adverse-sapphire

I want to use RSC queryClient in my zustand store

Basically, i was using zustand store as a wrapper around my queries and mutations to avoid extra renders of hooks (not sure if this was needed but seemed neat). Now i'm switching my app to Next 13.5.6 (tanstack query is the latest version) with RSC and SSR. I have a zustand store configured as follows:

const qc = typeof window === "undefined" ? getServerQueryClient() : queryClient;
const historyQuery = qc
  .getQueryCache()
  // @ts-expect-error Type mismatch on React query
  .build(qc, getSessionsHistoryOptions(authenticatedFetcher));

if (!historyQuery.state.data) historyQuery.fetch();

const historyQueryObserver = new QueryObserver<
  Pick<Session, "sessionId" | "title" | "createdAt">[]
>(qc, { queryKey: ["sessions"] });

historyQueryObserver.subscribe((result) => {
  useSessionsStore.setState({
    history: result.data ?? [],
    isHistoryLoading: result.fetchStatus === "fetching",
  });
});

export const useSessionsStore = create<SessionsStore>((set, get) => ({
  ...some code
  history: typeof window === "undefined" ? historyQuery.state.data ?? [] : [],
  ...some code
}))

const qc = typeof window === "undefined" ? getServerQueryClient() : queryClient;
const historyQuery = qc
  .getQueryCache()
  // @ts-expect-error Type mismatch on React query
  .build(qc, getSessionsHistoryOptions(authenticatedFetcher));

if (!historyQuery.state.data) historyQuery.fetch();

const historyQueryObserver = new QueryObserver<
  Pick<Session, "sessionId" | "title" | "createdAt">[]
>(qc, { queryKey: ["sessions"] });

historyQueryObserver.subscribe((result) => {
  useSessionsStore.setState({
    history: result.data ?? [],
    isHistoryLoading: result.fetchStatus === "fetching",
  });
});

export const useSessionsStore = create<SessionsStore>((set, get) => ({
  ...some code
  history: typeof window === "undefined" ? historyQuery.state.data ?? [] : [],
  ...some code
}))

I expected this to work since i'm calling the request-specific cached queryClient as I do in my prefetch calls here if the window is undefined and otherwise calling my client-side queryClient. But i keep getting Error: Not implemented. at eval (./src/lib/react-query/query-client.ts:24:155) Is there any way around this?

4 Replies

flat-fuchsia•3y ago

a wrapper around my queries and mutations to avoid extra renders of hooks

no, this is not needed at all. you also can't create an observer on the server because it uses client features

adverse-sapphireOP•3y ago

thanks for the quick response! @TkDodo 🔮 - So if a react component uses react query hooks and doesn't pass them to its children, react will create a virtual dom and compare the differences to the actual dom and repaint wherever needed (should be none in this case) but it will still compute those declarations and functions and go through a render without a paint. Is this correct? The main reason i refactored this useSessionStore into a zustand store with global state is because i was using a hook called useSession which is pretty much the same with this zustand store except it used react hooks so it would lead to many re-renders across my app but i wasn't sure if that would really impact the performance of the app. - Do i need the observer if i already prefetch and await my queries in the layout.tsx ?

flat-fuchsia•3y ago

i really have no idea what you are trying to do, but keep in mind that react query is also a global state manager and wherever you call useSession, you can just as well useQuery

Do i need the observer if i already prefetch and await my queries in the layout.tsx ?

an observer is created by useQuery

adverse-sapphireOP•3y ago

Basically i just want to know how i can use the same queryClient instance that i prefetch with in my zustand store during SSR

Gaming

Programming

I want to use RSC queryClient in my zustand store

Did you find this page helpful?