TanStackT
TanStack•3y ago•
9 replies
opposite-copper

useSuspenseQueries noncontinuous suspense

Hello everyone,
I am not sure, maybe I misunderstand combine, but I notice some strange behaviour when I use it in useSuspenseQueries.

Given the code:
const useQueriesTest = ids =>
  useSuspenseQueries({
    queries: ids.map(id => ({
      queryKey: [id],
      queryFn: () => Promise.resolve(id),
    })),
    combine: results => results.map(result => result.data),
  })

function Example() {
  const [ids, setIds] = React.useState([1, 2])
  const testQueriesIds = useQueriesTest(ids)

  return (
    <button onClick={() => setIds([3, 4, 5, 6])}>Click Me!</button>
  )
}

I would expect that clicking on the button will put my app in a suspended state and testQueriesIds will equal to [3, 4, 5, 6] after suspense is done.
However, after clicking on the button, I briefly get a [3, 4, undefined, undefined] before I get the actual result.

https://codesandbox.io/p/sandbox/friendly-jang-gjp9p8

I could deal with it using filter(Boolean) in combine but it does not fully satisfy me to do checks for undefined results each time I combine queries.

Any help, or if I have to deal with it using undefined checks - explanation why, will be appreciated.
Was this page helpful?