useQueries with infinite queries

I am rendering a dynamically generated tree (e.g. file browser), where every tree node is fetched from an API (I.e. I don't know how many root nodes I will start with, or how many children each node will have). The implementation is more or less like this:

// useTree hook
const [openNodeIds, setOpenNodeIds] = useState([]);
const results = useQueries(openNodeIds.map((nodeId) => ({ queryKey, queryFn: () => fetchChildNodes(nodeId) }));
const nodes = results.map((result) => getNodesFromResult(result));
return nodes;

// useTree hook
const [openNodeIds, setOpenNodeIds] = useState([]);
const results = useQueries(openNodeIds.map((nodeId) => ({ queryKey, queryFn: () => fetchChildNodes(nodeId) }));
const nodes = results.map((result) => getNodesFromResult(result));
return nodes;

Works, great. However, due to the size of some of these API responses, I want to make use of infiniteQuery, where I load the first ~100, and offer the user a button to "load more". Effectively, I'm looking for the

useInfiniteQueries

useInfiniteQueries

hook, which from my humble research, does not exist: https://stackoverflow.com/a/74246920/16699607

So, without that holy grail hook officially existing, does anyone have any ideas for how to implement such a task: Run a dynamic number of infinite queries? Hacks/workarounds very welcome.

TanStack•4y ago•

3 replies

primary-violet

useQueries with infinite queries

// useTree hook
const [openNodeIds, setOpenNodeIds] = useState([]);
const results = useQueries(openNodeIds.map((nodeId) => ({ queryKey, queryFn: () => fetchChildNodes(nodeId) }));
const nodes = results.map((result) => getNodesFromResult(result));
return nodes;

// useTree hook
const [openNodeIds, setOpenNodeIds] = useState([]);
const results = useQueries(openNodeIds.map((nodeId) => ({ queryKey, queryFn: () => fetchChildNodes(nodeId) }));
const nodes = results.map((result) => getNodesFromResult(result));
return nodes;

useInfiniteQueries

useInfiniteQueries

useQueries with infinite queries

Similar Threads

useQueries with infinite queries

Similar Threads

Similar Threads

Similar Threads