jolly-crimson

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))
  })

// 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>
)

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),
      }
    },
  })

// 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?

3 Replies

jolly-crimsonOP•2y ago

Now that I started digging a bit more I think it might be related to https://github.com/TanStack/query/issues/6591 since I am using a server action to get my data

GitHub

Nextjs Streaming+Server Action Error: Server Functions cannot be ca...

Describe the bug Your minimal, reproducible example codesandbox Steps to reproduce error output in terminal How often does this bug happen? Every time Tanstack Query adapter react-query 5.0.0 react...

ambitious-aqua•11mo ago

pacto, did you ever find a solution to this?

jolly-crimsonOP•11mo ago

As far as I remember, this was related to using server actions and Suspense with queries, which didn't work, I started checking the loading/error state manually

Gaming

Programming

Running multiple queries based on search params

Did you find this page helpful?