TanStackT
TanStack14mo ago
19 replies
skinny-azure

refresh in useQueries cause infinite rerender

Do you know why useAllData causes a re-render, whereas useOneData data works normally?

const useOneData = () => {
  const { data, refetch } = useQuery(["a_key"], async () => {
    if (!data) {
      // do fetch 1
      const fetch1 = "data fetch 1";      

                // hard refresh to get the data of fetch2
                setTimeout(() => {
                    refetch();
                }, 100);

      return fetch1;
    }

    // do fetch 2
    const fetch2 = "data fetch 2";
    return fetch2;
  });

  return data;
};

const useAllData = (arrayToGet) => {
  const { result } = useQueries(
    arrayToGet.map((key, index) => ({
      queryKey: ["a_key", key],
      queryFn: async () => {
        const data = result[index];
        const { refetch } = result[index];
        if (!data) {
          // do fetch 1
          const fetch1 = "data fetch 1";     

          // hard refresh to get the data of fetch2
          setTimeout(() => {
              refetch();
          }, 100);

          return fetch1;
        }

        // do fetch 2
        const fetch2 = "data fetch 2";
        return fetch2;
      },
    }))
  );

  return result.map((data) => data.data);
};
Was this page helpful?