Using the parse 'methods' outside the hook

[r1chm8]

Hi,

I came across this package today and was wondering if it's possible to use the parseAs* methods outside of the hook.

For example, I want to ensure search params are validated on the app/page files (which is rendered on the server) in the same way as they are on the client. I can't use the useQueryState hook as that will make the page a client component, however if I was able to do something like the following, I could be sure the server and client are returning the same values.

Server:

import { parseAsInteger } from 'next-usequerystate';

export default async function Page({
  searchParams: { page },
}: {
  searchParams: { page?: string };
}) {
  const parsedPage = parseAsInteger(page).withDefault(1);
  // ...
};

Client:

'use client';

import { parseAsInteger, useQueryState } from 'next-usequerystate';

const Component () => {
  const [page] = useQueryState('page', parseAsInteger.withDefault(1));
  // ...
};

Many thanks

[franky47]

While there there is nothing server or client-specific about parsers, the fact that they're imported from next-usequerystate -- which is a client-only import -- makes it forbidden to call functions on them:

Error: Cannot access parseAsInteger.parse on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

It would be possible I guess to export the parsers in a separate, non-'use-client' file, that can be imported on the server and the client (eg: import { parseAsInteger } from 'next-usequerystates/parsers').

Assuming we're having no import issues, there would still be a bit of data massaging to get to the same value as what the hook returns: the default value is contained in the parser, but calls to .parse will not return it if parsing fails. Parsers also expect a string, as the empty string case is tested before calling the parsers in the hook.

Also, you'll probably want to define and configure your parser in a dedicated file that gets imported in both client and server files, to reduce duplication. This is what it could look like:

// path/to/parsers.ts

import { parseAsInteger } from 'next-usequerystate/parsers'

export const pageParser = parseAsInteger.withDefault(1);

Server:

import { pageParser } from 'path/to/parsers';

export default async function Page({
  searchParams: { page },
}: {
  searchParams: { page?: string };
}) {
  const parsedPage = pageParser.parse(page ?? '') ?? pageParser.defaultValue;
  // ...
};

Client:

'use client';

import { useQueryState } from 'next-usequerystate';
import { pageParser } from 'path/to/parsers'

const Component () => {
  const [page] = useQueryState('page', pageParser);
  // ...
};

[r1chm8]

This pattern could definitely work, but it would rely on being able to move the parsers into non use-client export.

If / until that happens I guess it is not possible to parse the search params on the server using the same parser logic as the client unless I duplicate the parser logic to my project or fork the repo and attempt to make the change myself 😟

I appricate you taking the time to reply, have a good day!

[franky47]

Released in 1.8.0-beta.8, with an example on how the shallow option affects sync with the server.

Let me know if it works out for you.

[r1chm8]

Wow that was fast!

I've updated and it's working as expected. I created a little helper so all the logic can be contained to the parser file:

Parser:

import { parseAsInteger } from 'next-usequerystate/parsers';

export const pageParser = {
  client: parseAsInteger.withDefault(1),
  server: (value = '') => pageParser.client.parse(value) ?? pageParser.client.defaultValue,
};

Server:

const parsedPage = pageParser.server(page);

Client:

'use client';

const Component () => {
  const [page] = useQueryState('page', pageParser.client);
  // ...
};

Thank you for all your help, (Merci beaucoup)!

[franky47]

That's a great idea, thanks! I've added that to the parsers API in 1.8.0-beta.9. See the updated demo for usage.

The implementation has to deal with multiple queries in the URL, like /?a=1&a=2. It follows the URLSearchParams and only parses the first item.