AlexA
tRPC•14mo ago•
1 reply
Alex

Not able to seed react query cache

I was reading this blog post from the react-query dev: https://tkdodo.eu/blog/seeding-the-query-cache#seeding-details-from-lists
And trying to follow the "push approach" here for seeding the react query cache but adapting it to @trpc/react-query

Here is the code I wrote.
  const utils = trpc.useUtils();
  const { data, isLoading } = trpc.question.getAllQuestions.useQuery(
    {},
    {
      queryFn: async () => {
        const data = await utils.question.getAllQuestions.fetch({});
        data.questions.forEach((question) => {
          utils.question.getQuestion.setData({ id: question.id }, question);
        });
        return data;
      },
    }
  );

But for some reason, the queryFn I wrote is never getting run. Is queryFn not supported in @trpc/react-query ? And if so, how should I go about seeding the cache as described in the blog?
Seeding the Query Cache
With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfalls.
Seeding the Query Cache
Was this page helpful?