Prefetch query with parameters

I have a

page.tsx

page.tsx

that calls a function.

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
})

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
})

What if the getPosts call here, is subject to the params in the query string of the user landing on the page? Say "category" is a filter and I want to only show those.

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts({ category: "Cooking" }),
})

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts({ category: "Cooking" }),
})

Throws an error because now I am calling this function in the first render server side. It gives:

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.

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.

So what is the pattern that should be used here?

TanStack•8mo ago•

3 replies

select-harlequin

Prefetch query with parameters

I have a

page.tsx

page.tsx

that calls a function.

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
})

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
})

What if the getPosts call here, is subject to the params in the query string of the user landing on the page? Say "category" is a filter and I want to only show those.

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts({ category: "Cooking" }),
})

await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts({ category: "Cooking" }),
})

Throws an error because now I am calling this function in the first render server side. It gives:

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.

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.

So what is the pattern that should be used here?

Prefetch query with parameters

Similar Threads

Prefetch query with parameters

Similar Threads

Similar Threads

Similar Threads