Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(react-query): fix prefetch with suspense example #8193

Merged
merged 2 commits into from
Oct 20, 2024
Merged

docs(react-query): fix prefetch with suspense example #8193

merged 2 commits into from
Oct 20, 2024
+10 −19

Conversation

qiushiyan
Copy link
Contributor

@qiushiyan qiushiyan commented Oct 17, 2024 •
edited
Loading

In the docs, the current code example for prefetching with suspense queries is

function App() {
  usePrefetchQuery({
    queryKey: ['articles'],
    queryFn: (...args) => {
      return getArticles(...args)
    },
  })

  return (
    <Suspense fallback="Loading articles...">
      <Articles />
    </Suspense>
  )
}

function Articles() {
  const { data: articles } = useSuspenseQuery({
    queryKey: ['articles'],
    queryFn: (...args) => {
      return getArticles(...args)
    },
  })

  return articles.map((article) => (
    <div key={articleData.id}>
      <ArticleHeader article={article} />
      <ArticleBody article={article} />
    </div>
  ))
}

This might be a poor example:

  • the prefetch is followed directly by the suspense query, which does not bring much performance benefit,

  • all previous examples are dealing with the article item (primary data) and its comments (secondary data), the example is using a single query of the article list, which seems disconnected

  • I think what we want to demonstrate is prefetching the article comments while the article suspense component is pending, i.e.

function ArticleLayout({ id }) {
  usePrefetchQuery({
    queryKey: ['article-comments', id],
    queryFn: getArticleCommentsById,
  })

  return (
    <Suspense fallback="Loading article">
      <Article id={id} />
    </Suspense>
  )
}

function Article({ id }) {
  const { data: articleData, isPending } = useSuspenseQuery({
    queryKey: ['article', id],
    queryFn: getArticleById,
  })

  ...
}

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Oct 17, 2024
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Oct 20, 2024 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4021134. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Oct 20, 2024

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8193

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@8193

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@8193

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@8193

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8193

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@8193

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@8193

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@8193

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@8193

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@8193

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@8193

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@8193

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@8193

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@8193

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@8193

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@8193

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@8193

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@8193

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@8193

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@8193

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@8193

commit: 4021134

@TkDodo TkDodo merged commit a2ea754 into TanStack:main Oct 20, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@qiushiyan @TkDodo