TanStack•3y ago•

8 replies

accused-moccasin

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

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

useSuspenseQuery

example mentioned in the Tanstack docs and in particular the

isFetching

isFetching

status. The component in the

Project.jsx

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

useSuspenseQuery

returning

{data, isFetching}

{data, isFetching}

, and the

isFetching

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

isFetching

can only be

false

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

TanStack•3y ago•

8 replies

accused-moccasin

useSuspenseQuery and isFetching

fallback

fallback

useSuspenseQuery

useSuspenseQuery

example mentioned in the Tanstack docs and in particular the

isFetching

isFetching

status. The component in the

Project.jsx

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

useSuspenseQuery

returning

{data, isFetching}

{data, isFetching}

, and the

isFetching

isFetching

isFetching

isFetching

can only be

false

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

useSuspenseQuery and isFetching

useSuspenseQuery and isFetching

Similar Threads

Similar Threads

Similar Threads