TanStackT
TanStack•2y ago•
3 replies
primary-violet

Running multiple queries based on search params

Hey, I want to have multiple and changing search params stored in the URL, then I want to get them in server component to prefetch the data 
// in Page component
 const queryClient = new QueryClient()

  filters.forEach(async (id: string) => {
    await queryClient.prefetchQuery(queries.data.detail(id))
  })


then later in same Page component

return (
          <HydrationBoundary state={dehydrate(queryClient)}>
          <Suspense fallback={<div>Loading...</div>}>
            <DisplayData />
          </Suspense>
        </HydrationBoundary>
)

I wrap data in HydrationBoundry and I want to have a fallback using Suspense, so I don't have to keep checking for values in my client component

// client component
  const { data } = useSuspenseQueries({
    queries: filters.map((id) => ({
      ...queries.data.detail(id),
      staleTime: 1000 * 60 * 5,
      refetchInterval: 1000 * 60 * 5,
    })),
    combine: (results) => {
      return {
        data: results.map((result) => result.data).flat(),
        pending: results.some((result) => result.isPending),
      }
    },
  })



I am also using lukemorales/query-key-factory


This is throwing me a bunch of errors to the console,
Uncaught Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
and
Warning: Cannot update a component (Router
) while rendering a different component (
DisplayData
). To locate the bad setState() call inside
DisplayData, follow the stack trace as described in

Am I doing something wrong here?
Was this page helpful?