Nuqs adapter (query string state management)

[rmarscher]

I saw @tylersayshi's blog article about nuqs and wanted to try it.

I made a Waku adapter by following nuqs' community adapter for the One framework:

"use client";

import {
  type unstable_AdapterOptions as AdapterOptions,
  unstable_createAdapterProvider as createAdapterProvider,
  renderQueryString,
} from "nuqs/adapters/custom";
import { useRouter_UNSTABLE as useRouter } from "waku";

export function renderURL(base: string, search: URLSearchParams) {
  const hashlessBase = base.split("#")[0] ?? "";
  const query = renderQueryString(search);
  const hash = location.hash;
  return hashlessBase + query + hash;
}

function useNuqsAdapter() {
  const { query, push, replace } = useRouter();
  const searchParams = new URLSearchParams(query);
  const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
    if (options.shallow) {
      const url = renderURL(location.origin + location.pathname, search);
      options.history === "push"
        ? history.pushState(null, "", url)
        : history.replaceState(null, "", url);
    } else {
      const updateMethod = options.history === "push" ? push : replace;
      updateMethod(renderQueryString(search) as any);
    }
    // Waku router does not scroll unless the pathname changes
    if (options.scroll) {
      window.scrollTo(0, 0);
    }
  };
  return {
    searchParams,
    updateUrl,
  };
}

export const NuqsAdapter = createAdapterProvider(useNuqsAdapter);

And then I added it to my root layout wrapping {children}. It works great!

I posted the example to github here - https://github.com/rmarscher/waku-nuqs

And I currently have it deployed here: https://waku-nuqs.martiandev.workers.dev/?value=Hello

Edit: my community example was merged. Use this guide to add Nuqs to your Waku app. https://github.com/47ng/nuqs/blob/next/packages/docs/content/docs/community-adapters/waku.mdx

[rmarscher]

I see there is a hydration error when loading the page with the query string in the URL. Hmm... maybe I need to pass the query from the page props rather than get it from useRouter.

[rmarscher]

Ah... it was because the page render config was set to "static" - so it was rendering the full server html at build time. It builds it with an empty URL state which causes a hydration mismatch when loading a page that has a query string.

The options are to switch to "dynamic" render mode or keep the use of useQueryState to components that are ok to not have hydration and use the suppressHydrationWarning attribute.

I updated my demo to dynamic rendering.

[tylersayshi]

cc @franky47

[franky47]

That's awesome! (I'm the author of nuqs) Feel free to open a PR to add it to the community adapters in the nuqs repo.

The next step would be to add support for the shallow prop. It might be early in the Waku implementation for shallow routing, but the idea in nuqs is that by default, URL updates should be client-only by default (using the browser's History API to pushState/replaceState), and only opt-in to call the server to re-render the RSC tree if it actually needs to access the search params server-side (using shallow: false).

Thanks @tylersayshi for the ping!

[rmarscher]

The next step would be to add support for the shallow prop.

I'm working on it. :)

[rmarscher]

I'll open a PR and we can continue the conversation there.

[rmarscher]

47ng/nuqs#848

[rmarscher]

This was merged! Thanks again. I am enjoying using it in my project. https://github.com/47ng/nuqs/blob/next/packages/docs/content/docs/community-adapters/waku.mdx