How to properly render a server side pagination in Storybook?

[SalahAdDin]

We are working with Storybook to visualize our components before using them on the pages.

We created our Pagination component using the example, specifically the server-side one, and we are trying to render it on Storybook, but it fails with the following error:

Error
[nuqs] Empty search params cache. Search params can't be accessed in Layouts.
See https://err.47ng.com/NUQS-500
Call Stack
 all
  navigation-Pagination-Pagination-stories.iframe.bundle.js:682:13
 Pagination
  navigation-Pagination-Pagination-stories.iframe.bundle.js:452:105
 renderWithHooks
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:125385:27
 mountIndeterminateComponent
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:131146:13
 beginWork$1
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:132746:16
 callCallback
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:134862:14
 invokeGuardedCallbackImpl
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:134911:16
 invokeGuardedCallback
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:134986:29
 beginWork
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:141177:28
 performUnitOfWork
  vendors-node_modules_pnpm_faker-js_faker_8_4_1_node_modules_faker-js_faker_dist_esm_index_mjs-c99bd3.iframe.bundle.js:140001:12

From the documentation, we understand we need to mock something, but, what is it?

Thank you!

[franky47]

According to the error URL, the issue is that the search params cache hasn't been populated. This can be done by calling the parse method on it, feeding it your mock search params, which will then be distributed to the RSC tree.

Documentation: https://nuqs.47ng.com/docs/server-side

[franky47]

Ok, so using the playground code as a reference, a fix could look like this (assuming the decorators run as server components by default).

import RootLayout from "@/app/[locale]/layout";
import { Meta, StoryObj } from "@storybook/react";

import { Pagination } from "./Pagination";
import { searchParamsCache } from './searchParams'

function SearchParamsCacheProvider({ children }: { children: any }) {
  searchParamsCache.parse({})
  return children
}

const meta: Meta<typeof Pagination> = {
  component: Pagination,
  decorators: [
    (Story) => (
      <RootLayout
        params={{
          locale: "en",
        }}>
        <SearchParamsCacheProvider>
          <Story />
        </SearchParamsCacheProvider>
      </RootLayout>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof Pagination>;

export const Navigation: Story = {
  args: { pathname: "/search", page: 5, total: 7 },
};

[SalahAdDin]

It worked pretty well, thanks!

Is it possible to use it without a layout?

[franky47]

Is it possible to use it without a layout?

If by layout you mean a Next.js layout component, yes, as mentioned in the error searchParams are actually not supported in layouts, only in pages.

[SalahAdDin]

Actually, It is not required, that's good.

BUt if I go to another story that uses the search params cache provider, it breaks:

[SalahAdDin]

@franky47 Is it an issue with nuqs or with the provider itself?