T
TanStack•2y ago
conventional-tan

useSuspenseQuery and isFetching

[Apologies that this question was mistakenly posted first in the react-router channel. Moving here now.] According to the React docs, when you wrap part of your application in a Suspense component and specify a fallback, then the fallback component will be rendered until all children have completed their data fetching. In other words, if queries in child components are in a fetching state, then the fallback is rendered instead of the children. When child components have finished fetching, then they are rendered. That being so, I'm confused about the useSuspenseQuery example mentioned in the Tanstack docs and in particular the isFetching status. The component in the Project.jsx file is defined like so: 
export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}
export default function Project({ activeProject, setActiveProject }) {
  const { data, isFetching } = useSuspenseQuery({... })

  return (
    <div>
      <Button onClick={() => setActiveProject(null)}>Back</Button>
      <h1>
        {activeProject} {isFetching ? <Spinner /> : null}
      </h1>
      {data ? (
        <div>
          <p>forks: {data.forks_count}</p>
          <p>stars: {data.stargazers_count}</p>
          <p>watchers: {data.watchers}</p>
        </div>
      ) : null}
      <br />
      <br />
    </div>
  )
}
Here we see the useSuspenseQuery returning {data, isFetching}, and the isFetching boolean is being used in the jsx definition. But according to the React docs, if the query is indeed in a fetching state, this component will never be rendered - its parent suspense component will instead be rendering its fallback, and the child component will only be rendered when fetching has finished. So isFetching can only be false in the rendered child component. Am I missing something?
StackBlitz
Query Suspense Example - StackBlitz
Run official live example code for Query Suspense, created by Tan Stack on StackBlitz
– React
The library for web and native user interfaces
6 Replies
conventional-tan
conventional-tanOP•2y ago
@ferretwithabéret Thanks for your reply to this question in the react-router channel (question and discussion now moving here) but I didn't fully understand what you were saying. The docs for @tanstack/query suggest that it works with suspense...
metropolitan-bronze
metropolitan-bronze•2y ago
The example uses transitions so it doesn't suspend
conventional-tan
conventional-tanOP•2y ago
@TkDodo 🔮 The react query docs give the above code as an example of using suspense.
metropolitan-bronze
metropolitan-bronze•2y ago
Yes, using suspense with transitions so that it doesn't show the suspense fallback It's an old example, it could do with an upgrade But when transitions are used, the fallback isn't shown. That's how suspense works
conventional-tan
conventional-tanOP•2y ago
@TkDodo 🔮 Thanks for the extra clarifications. If not using transitions, is what I said above correct ie isFetching can only be false in the rendered component?
metropolitan-bronze
metropolitan-bronze•2y ago
Should be for the initial fetch, yes. For refetches we don't suspend

Did you find this page helpful?