Implementing Search Functionality in nuqs

[tuboihirokidesu]

I have currently implemented the search functionality as follows:

export function SearchForm() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [isPending, startTransition] = useTransition();

  const { register, handleSubmit } = useSearchForm();

  const onSubmit = ({ query }: SearchFormSchema) => {
    startTransition(() => {
      const url = new URL(`${env.NEXT_PUBLIC_CONSUMER_APP_BASE_URL}/search`);
      url.searchParams.append('query', query);
      // If you are currently on the search page, carry over other parameters except for query
      if (pathname.includes('/search')) {
        searchParams.forEach((value, key) => {
          if (key !== 'query') {
            url.searchParams.append(key, value);
          }
        });
      }
      const href = url.toString().replace(url.origin, '');
      router.push(href);
    });
  };

  return <></>
}

I have moved this implementation from the root path to the /search path and want to use the query search parameter to fetch the search results.

I'm trying to achieve this in nuqs without using useRouter, usePathname, or useSearchParams, but it's not working as expected.

Is there a good way to implement this functionality in nuqs without relying on these hooks?

[tuboihirokidesu]

Sorry, I think this applies, so I'll close this discussion.

#480 (comment)

[tuboihirokidesu]

Hmm, after all,

The logic for retaining parameters other than query when on a search page (as noted in the comments) isn't working well (maybe I need to use URLSearchParams?).

I'd appreciate it if you could teach me the best practices 🙏

[tuboihirokidesu]

Would an implementation like this be a good idea...?

export function SearchForm( ) {
  const searchParams = useSearchParams();
  const t = useTranslations('common');
  const tSr = useTranslations('common-sr');
  const router = useRouter();

  const [isPending, startTransition] = useTransition();
  const queryParser = parseAsString.withDefault('').withOptions({
    startTransition,
  });

  const { register, handleSubmit } = useSearchForm();

  const onSubmit = ({ query }: SearchFormSchema) => {
    const serialize = createSerializer({
      query: queryParser,
    });
    const newSearchParams = new URLSearchParams(searchParams);
    const url = serialize(newSearchParams, { query });
    router.push(`/search${url}`);
  };

  return <></>
}