T
TanStack•12mo ago
sensitive-blue

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 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);
};
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);
};
10 Replies
eastern-cyan
eastern-cyan•12mo ago
@Hugo Levet Huge guess, but, does the request take more than 100ms? Also, may I ask why you use 2 fetch functions inside of queryFn maybe this can be resolved in another way
sensitive-blue
sensitive-blueOP•12mo ago
Yes but you can replace const fetch1 = "data fetch 1"; by const fetch1 = await fetch('<some_url>'); so fetch time is not a problem right? Yes, probably but the answer is more about why useQuery and useQueries don't works same?
eastern-cyan
eastern-cyan•12mo ago
my point is that fetch1 does not have time to finish and you call refetch, but I am not sure if the request gets thrown away and everything restarts, hence causing an infinite loop I asked this because, this approach seems error prone. I want to know what you are trying to achieve so I could propose another method.
sensitive-blue
sensitive-blueOP•12mo ago
oh yes I see, I checked but no error appears, I will add a try catch to be sure
eastern-cyan
eastern-cyan•12mo ago
I mean, there is no error that happens it might just throw away the request and try again from 0 then again and again but as I said, I am not sure, what you are doing (refetch inside of queryFn) is not a very common case
sensitive-blue
sensitive-blueOP•12mo ago
ok thanks, fetch1 is fast to response but it send old data not fresh. fetch2 is more slow than fetch1 but data is up to date. My app first show old data and when updated data is getting show fresh data hum strange but ok
eastern-cyan
eastern-cyan•12mo ago
i mean, you are telling it to refetch, before it even got to have data in the first place
sensitive-blue
sensitive-blueOP•12mo ago
Do you have a suggestion for my use case? oh yes ok, It's okay I understood 😅
eastern-cyan
eastern-cyan•12mo ago
- I'd use 2 useQueries somehow, with different queryKeys, maybe add fast: true to the first one and disable caching and refetching for it, then use the response of this one as the placeholderData for the second slow one. - Or you could try fetch1.then(() => refetch()) instead of the setTimeout, might also want to use keepPreviousData
sensitive-blue
sensitive-blueOP•12mo ago
ok, thanks for you help I will try a solution like that I use first one and it's work thanks a lot

Did you find this page helpful?