Prefetch query with parameters

I have a

page.tsx

page.tsx

page.tsx

page.tsx that calls a function.

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

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

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

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.

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

Similar Threads

Similar Threads