T
TanStack•2y ago
rival-black

Suspense queries and isFetching

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
2 Replies
eastern-cyan
eastern-cyan•2y ago
Am I missing something?
Yes, the note on the docs:
Only Suspense-enabled data sources will activate the Suspense component. They include: - Data fetching with Suspense-enabled frameworks like Relay and Next.js - Lazy-loading component code with lazy - Reading the value of a Promise with use Suspense does not detect when data is fetched inside an Effect or event handler. The exact way you would load data in the Albums component above depends on your framework. If you use a Suspense-enabled framework, you’ll find the details in its data fetching documentation. Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
also, in their example demo, there is this line
// Note: this component is written using an experimental API // that's not yet available in stable versions of React.
they use the use API, which waits for a promise to fulfill you can see the demo's code here: https://codesandbox.io/p/sandbox/restless-waterfall-7hzg5z?file=%2Fsrc%2FAlbums.js%3A12%2C9
rival-black
rival-blackOP•2y ago
Apologies that this was posted in the react-router discussion - I've opened the same question in the react-query channel - happy for discussion to continue there.

Did you find this page helpful?