#36233·storybook

[Documentation]: Explain `QueryClient` isolation with parallel story tests with `Vitest`

Author: oleksandr-danylchenkoCreated Sep 8, 2026Updated Sep 14, 2026
Labelsdocumentationreactsev:S3addon: vitest

Describe the problem

The TanStack React framework documentation recommends a single QueryClient in preview, clearing it in beforeEach, and sharing it through both parameters.tanstack.router.context and a QueryClientProvider decorator.

//  Create a new QueryClient
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      staleTime: Infinity,
    },
  },
});

export default definePreview({
  beforeEach: () => {
    //  Clear the cache between stories so each story starts fresh
    queryClient.clear();
  },
  parameters: {
    tanstack: {
      router: {
        //  Make queryClient available in stories' beforeEach via ctx.context.queryClient
        context: { queryClient },
      },
    },
  },
});

This is safe when stories run serially!

With Vitest file parallelism enabled, independent story tests can overlap in the browser preview. One story's beforeEach can then call queryClient.clear() while another story's router loader or rendered component is reading from the same cache. In our case, protected-route stories intermittently lost their seeded session data and failed during collection or rendering.


Could the documentation explain whether there is a supported way to retain Vitest parallelism while providing a QueryClient to the router context?

The documented per-story-client alternative is not viable for an application whose initial route loaders need context.queryClient, if the client is created in a React render function or decorator: the initial router load happens before React rendering. A client created there cannot be passed back to the router's initial context, and using separate clients makes loader-seeded data invisible to rendered components.

The framework does support a parameters.tanstack.router.context factory that runs before the initial route load, but coordinating that per-story client with the QueryClientProvider, story setup, cleanup, Docs rendering, and the framework's router lifecycle is substantially more complex than the current docs suggest. It would help to document either:

  • a supported per-story factory pattern that keeps router loaders and QueryClientProvider on the same client while allowing parallel test files; or
  • that shared-client setups must disable Vitest file parallelism, with a configuration example.

Additional context

This follows #35283, which raised the broader isolation problem for TanStack Query stories. The related documentation clarifies that per-story clients provide stronger isolation, but does not show a complete router-loader-safe pattern or explain the implications for Vitest browser-test parallelism.

Relevant documentation: https://storybook.js.org/docs/get-started/frameworks/tanstack-react#project-setup

Vitest file parallelism: https://vitest.dev/guide/parallelism.html#file-parallelism