Alex Posts - tRPC

Alex

•Created by Alex on 11/18/2024 in #❓-help

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?

2 replies