absent-sapphire

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>
  )
}

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.

7 Replies

correct-apricot•3y ago

combine runs on every render, so the problem isn't combine. The interesting part is that the component renders after two things have fetched, and only then continues to fetch two more, when it should fetch all 4 at the same time. This is reproducible without combine as well. I think that's because you have two ids, and thus two active observers, and then you change them to 4 observers so it bastically waterfalls: it first fetches for ids 3 & 4, and after they resolve, it fetches for 5 & 6. you can see that better if you set the timeout to e.g. 5 seconds and add log stataments to the queryFn:

queryFn: () => {
  console.log('fetching for', id)
  return new Promise(resolve => setTimeout(() => resolve(id), 5000))
},

queryFn: () => {
  console.log('fetching for', id)
  return new Promise(resolve => setTimeout(() => resolve(id), 5000))
},

correct-apricot•3y ago

so yeah this seems like a bug in the suspense handling of useQueries , somewhere here: https://github.com/TanStack/query/blob/3ca132782206cfc1dd2163ec282f661167825c47/packages/react-query/src/useQueries.ts#L258-L280

GitHub

query/packages/react-query/src/useQueries.ts at 3ca132782206cfc1dd2...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

correct-apricot•3y ago

I'd appreciate it if you could file an issue, even better if you have ideas how to fix it 🙂 huh, I have an idea for a fix already

absent-sapphireOP•3y ago

I'll take care of this, thanks.

absent-sapphireOP•3y ago

https://github.com/TanStack/query/issues/6298

GitHub

useSuspenseQueries observers count mismatch · Issue #6298 · TanStac...

Describe the bug When the amount of queries in useSuspenseQueries increases, the new queries resolution/suspense is split into two batches. The first batch takes care of newQueries.slice(0, previou...

absent-sapphireOP•3y ago

Thanks for your time and help.

correct-apricot•3y ago

Thanks for the contribution

Gaming

Programming

useSuspenseQueries noncontinuous suspense

Did you find this page helpful?