TanStackT
TanStack2w ago
5 replies
clean-aquamarine

SSR Prefetching works in one component, but not the other?

Hello, I was working on a new project where users have organizations and can change their current active organization.

the first screenshot is the dashboard page, where the activeOrganization server action gets prefetched using the queryClient.prefetchQuery()

the second screenshot is the layout.tsx file, which is a server component and has the sidebar components, our main focus is on AppSidebar component, the AppSidebar is a client-side component that has "OrganizationSelector" component, ( as shown in the third screenshot )which is a dropdown menu that shows all the organizations that a user owns.

the fourth screenshot contains the code of "organization-selector.tsx", which is a client-side component that has two queryFunctions ( which are pre-fetched on the server in dashboard/page.tsx & layout.tsx )
the two functions are
1 - activeOrganization
2 - organizations

now, for some reason, when i put the activeOrganization query, it errors out and gives me hydration issues, and makes the whole page render in client-side not server-side.

what could i be doing wrong?
image.png
image.png
image.png
image.png
Was this page helpful?