foreign-sapphire

useInfiniteQueries ?

We have been using useQueries for executing mulitple queries required to fetch data. We need to support cursor based pagition which is supported by useInfiniteQuery. However, there isn't an equivalent useInfiniteQueries. Are there plans to build one? or any workaround ?

6 Replies

sensitive-blue•3y ago

nope, no plans. solution is to render one component for each infinite query and have a useInfiniteQuery in them. What user interface are you building that has multiple infinite queries ?

foreign-sapphireOP•3y ago

one component with one useInfiniteQuery makes sense when you have component rendering data from single datasource. In my case, I have complex data visualizations which reference 2-3 datasources for example

function RenderGraph() {
  
  const data = useQueries({
    queries: [
      { queryKey: ['nodes'], queryFn: fetchNodes},
      { queryKey: ['edges'], queryFn: fetchEdges}
      { queryKey: ['health'], queryFn: fetchHealth}
    ]
  })
  
  return <NetworkGraph data={data} />
}

function RenderGraph() {
  
  const data = useQueries({
    queries: [
      { queryKey: ['nodes'], queryFn: fetchNodes},
      { queryKey: ['edges'], queryFn: fetchEdges}
      { queryKey: ['health'], queryFn: fetchHealth}
    ]
  })
  
  return <NetworkGraph data={data} />
}

sensitive-blue•3y ago

Do they need to be separate queries?

foreign-sapphireOP•3y ago

yes unfortunately they are different endpoints 😦 and within the graphics we need to separately paginate them

sensitive-blue•3y ago

Could still be one query that does 3 requests

foreign-sapphireOP•3y ago

We could, but that means the queryfn is handling ansync states we don't leverage react-query as much 😦 for example we don't get independent isLoading, isError, and or pagination/sorting. Caching gets busted @TkDodo 🔮 any thoughts?

Gaming

Programming

useInfiniteQueries ?

Did you find this page helpful?