Is there way to trigger default value if select value is changing ?

[Kavan72]

Basically, I’m implementing pagination with a query. I have page, pageSize, and query. Here is my code:

import { parseAsString, parseAsInteger, useQueryStates, parseAsStringLiteral } from 'nuqs';

const createParsers = (query: string, page: number, pageSize: number) => ({
  query: parseAsString.withDefault(query).withOptions({ history: 'push' }),
  page: parseAsInteger.withDefault(page).withOptions({ history: 'push' }),
  pageSize: parseAsInteger.withDefault(pageSize).withOptions({ history: 'push' }),
});

const urlKeys = {
  page: 'page',
  pageSize: 'pageSize',
};

export type ParsersType = ReturnType<typeof createParsers>;
export type OrganizationListSearchParams = ReturnType<typeof useQueryStates<ParsersType>>[0];
export type SetOrganizationListSearchParams = ReturnType<typeof useQueryStates<ParsersType>>[1];

export function useOrganizationListSearchParams(
  query: string = '',
  page: number = 1,
  pageSize: number = 10,
) {
  return useQueryStates(createParsers(query, page, pageSize), {
    urlKeys,
  });
}

Now, I have another hook for data fetching where I’m using this hook.

export function useGetLatestOrganization(backendApi: BackendApi) {
  const [searchParams, updateOrganizationSearchParams] = useOrganizationListSearchParams();
  const { query, page, pageSize, sortBy } = useMemo(() => searchParams, [searchParams]);

  const { data, isLoading, error, isValidating, mutate } = useSWR<PageOrganization>(
    ['Organization', query, page, pageSize],
    () =>
      backendApi.organization
        .getAllOrganizationsApiV1OrganizationGet(query, page, pageSize)
        .then((res) => res.data),
    swrOptions
  );

  return useMemo(
    () => ({
      mutate,
      organizations: data?.items || [],
      organizationsPage: data?.page || 0,
      organizationsPageSize: data?.pageSize || 0,
      organizationsTotalRecords: data?.total || 0,
      organizationsTotalPages: data?.pages || 0,
      organizationsLoading: isLoading,
      organizationsError: error,
      organizationsValidating: isValidating,
      organizationsEmpty: !isLoading && !data?.items.length,
      organizationSearchParams: { query, page, pageSize, sortBy },
      updateOrganizationSearchParams,
    }),
    [
      mutate,
      data,
      error,
      isLoading,
      isValidating,
      query,
      page,
      pageSize,
      sortBy,
      updateOrganizationSearchParams,
    ]
  );
}

Now, the idea is that when the user tries to use the search bar, I update the query with page = 1.

updateOrganizationSearchParams((previousState) => ({
  query: event.target.value,
  page: 1,
}));

Here is the idea to set the default or trigger the page to 1 when the query changes, but only on one render.

[franky47]

First off, I would recommend memoizing the parsers, as they are recreated on every render here, and therefore breaking referential equality on your state updater function:

export function useOrganizationListSearchParams(
  query: string = '',
  page: number = 1,
  pageSize: number = 10,
) {
  const parsers = useMemo(() => createParsers(query, page, pageSize), [query, page, pageSize])
  return useQueryStates(parsers, {
    urlKeys,
  });
}

Now regarding your main question, I'm not sure I understand what you are trying to do, could you clarify please?

[Kavan72]

Suppose we have 10 pages in pagination, and the user is on the 3rd page. If the user starts searching, I need to set the page to 1. If we don’t do this, the API will fire with q={hello}&page={3}, which is incorrect. Therefore, I have to reset the page to 1 when the user initiates a search.

[Kavan72]

First off, I would recommend memoizing the parsers, as they are recreated on every render here, and therefore breaking referential equality on your state updater function:

export function useOrganizationListSearchParams(
  query: string = '',
  page: number = 1,
  pageSize: number = 10,
) {
  const parsers = useMemo(() => createParsers(query, page, pageSize), [query, page, pageSize])
  return useQueryStates(parsers, {
    urlKeys,
  });
}

Now regarding your main question, I'm not sure I understand what you are trying to do, could you clarify please?

Nice catch, thank you ❤️

[franky47]

If the user starts searching, I need to set the page to 1

I see, well your initial code seemed correct for this:

updateOrganizationSearchParams((previousState) => ({
  query: event.target.value,
  page: 1,
}));

You could even do a diff on the previous and current values for the search field if using a controlled input:

updateOrganizationSearchParams((previousState) => ({
  query: event.target.value,
  page: previousState.query !== event.target.value ? 1 : undefined, // undefined means 'leave as-is'
}));

[Kavan72]

Thank you, I was looking for this.

updateOrganizationSearchParams((previousState) => ({
  query: event.target.value,
  page: null,
}))

Using a constant value like 1 is difficult to manage with default value, so null is a perfect solution.

[franky47]

Writing null will remove the key from the URL (so you'd get only q=hello), and the default value will be returned as state from useQueryStates (docs).

If you want to explicitly write the default value in the URL, you'd have to:

1. Set the clearOnDefault option to false (docs)
2. Set the state to the default value explicitly in the state updater function.