refresh in useQueries cause infinite rerender
Do you know why
useAllDatauseAllData causes a re-render, whereas useOneDatauseOneData 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);
};