Passing QueryClient to React Router loaders when QueryClient is initiated in a useState

[em2724]

Hi all, I'm struggling to find a way to pass a QueryClient to react-router route loaders when the QueryClient is initialised in a useState.

The React Router docs state, "Due to the decoupling of fetching and rendering in the design of the data APIs, you should create your router outside of the React tree with a statically defined set of routes." Like so:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Also, in the React Query docs when you want to use React Query in a route loader function, you pass the QueryClient to the loader functions like this:

const queryClient = new QueryClient()

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: 'contacts',
        element: <Contacts />,
        children: [
          {
            path: 'contacts/:contactId',
            element: <Contact />,
            // ⬇️ pass the queryClient to the route
            loader: contactLoader(queryClient),
          },
        ],
      },
    ],
  },
])

However, it is common to initialise the QueryClient in a useState, for example to set up toasts globally:

export const App = ({ children }) => {
  const toasts = useToasts()

  const [queryClient] = React.useState(() => {
    return new QueryClient({
      queryCache: new QueryCache({
        onError: (error, query) => {
          toasts.error()
        }
      }),
      mutationCache: new MutationCache({
        onSuccess: (data, variables, context, mutation) => {
          toasts.success()
        }
      })
    });
  });

  return (
    <QueryClientProvider client={queryClient}>
      {/**/}
    </QueryClientProvider>
  );
};

In this case how do you pass the QueryClient to the loader functions, considering "you should create your router outside of the React tree"?

Thanks :)

[ddcatraya]

What about using a singleton? Can you see bugs originating for this implementation? it will work if you only have one ReacrQueryProvider and you might need to reset the queryClientScoped in testing.

let queryClientScoped: QueryClient | undefined;
export const getQueryClient = (t?: TType, toasts?: ToastType) => {
  if (!queryClientScoped && toasts && t) {
    queryClientScoped = new QueryClient({
      queryCache: new QueryCache({
        onError: (error) => {
          toasts.error(t(error.message));
        },
      }),
      mutationCache: new MutationCache({
        onError(error) {
           toasts.error(t(error.message));
        },
      }),
    });
  }

  return queryClientScoped;
};

export const ReactQueryProvider: FC<{
  children?: React.ReactNode;
}> = ({ children }) => {
  const toasts = useToasts();
  const { t } = useTranslation();
  const [queryClient] = useState(() => getQueryClient(t, toasts));

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

const prefectQueries = (queries: Array<FetchQueryOptions>) => {
  const queryClient = getQueryClient();

  queryClient  && queries.forEach((query) => queryClient.prefetchQuery(query));

  return null;
};

....

loader: () => prefectQueries([someQuery]),

[em2724]

@ddcatraya Thanks, will try this solution and get back.