TanStack•3y ago•

9 replies

opposite-copper

useSuspenseQueries noncontinuous suspense

Hello everyone,
I am not sure, maybe I misunderstand

combine

combine

, but I notice some strange behaviour when I use it in

useSuspenseQueries

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

testQueriesIds

will equal to

[3, 4, 5, 6]

[3, 4, 5, 6]

after suspense is done.
However, after clicking on the button, I briefly get a

[3, 4, undefined, undefined]

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

filter(Boolean)

combine

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.

TanStack•3y ago•

9 replies

opposite-copper

useSuspenseQueries noncontinuous suspense

Hello everyone,
I am not sure, maybe I misunderstand

combine

combine

, but I notice some strange behaviour when I use it in

useSuspenseQueries

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

testQueriesIds

will equal to

[3, 4, 5, 6]

[3, 4, 5, 6]

after suspense is done.
However, after clicking on the button, I briefly get a

[3, 4, undefined, undefined]

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

filter(Boolean)

combine

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.

useSuspenseQueries noncontinuous suspense

Similar Threads

useSuspenseQueries noncontinuous suspense

Similar Threads

Similar Threads

Similar Threads