TanStackT
TanStack•3y ago•
6 replies
ordinary-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
}))

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?
Was this page helpful?