Alex•4d ago

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

  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.

0 Replies

No replies yetBe the first to reply to this messageJoin