Merge branch 'main' into fix-query-core

TanStack · Oct 23, 2024 · 1cf9d14 · 1cf9d14
2 parents 47c7c56 + d3e2a8a
commit 1cf9d14
Show file tree

Hide file tree

Showing 6 changed files with 562 additions and 570 deletions.
diff --git a/docs/framework/react/guides/disabling-queries.md b/docs/framework/react/guides/disabling-queries.md
@@ -14,7 +14,7 @@ When `enabled` is `false`:
 - The query will ignore query client `invalidateQueries` and `refetchQueries` calls that would normally result in the query refetching.
 - `refetch` returned from `useQuery` can be used to manually trigger the query to fetch. However, it will not work with `skipToken`.
 
-> Typescript users may prefer to use [skipToken](#typesafe-disabling-of-queries-using-skiptoken) as an alternative to `enabled = false`.
+> TypeScript users may prefer to use [skipToken](#typesafe-disabling-of-queries-using-skiptoken) as an alternative to `enabled = false`.
 
 [//]: # 'Example'
 

diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md
@@ -201,35 +201,26 @@ If you want to prefetch together with Suspense, you will have to do things a bit
 You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
 
 ```tsx
-function App() {
+function ArticleLayout({ id }) {
   usePrefetchQuery({
-    queryKey: ['articles'],
-    queryFn: (...args) => {
-      return getArticles(...args)
-    },
+    queryKey: ['article-comments', id],
+    queryFn: getArticleCommentsById,
   })
 
   return (
-    <Suspense fallback="Loading articles...">
-      <Articles />
+    <Suspense fallback="Loading article">
+      <Article id={id} />
     </Suspense>
   )
 }
 
-function Articles() {
-  const { data: articles } = useSuspenseQuery({
-    queryKey: ['articles'],
-    queryFn: (...args) => {
-      return getArticles(...args)
-    },
+function Article({ id }) {
+  const { data: articleData, isPending } = useSuspenseQuery({
+    queryKey: ['article', id],
+    queryFn: getArticleById,
   })
 
-  return articles.map((article) => (
-    <div key={articleData.id}>
-      <ArticleHeader article={article} />
-      <ArticleBody article={article} />
-    </div>
-  ))
+  ...
 }
 ```
 

diff --git a/...t-query/src/__tests__/suspense.test-d.tsx → ...sts__/useSuspenseInfiniteQuery.test-d.tsx b/...t-query/src/__tests__/suspense.test-d.tsx → ...sts__/useSuspenseInfiniteQuery.test-d.tsx
@@ -1,77 +1,8 @@
 import { describe, expectTypeOf, it } from 'vitest'
 import { skipToken } from '@tanstack/query-core'
-import { useSuspenseQuery } from '../useSuspenseQuery'
 import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
 import type { InfiniteData } from '@tanstack/query-core'
 
-describe('useSuspenseQuery', () => {
-  it('should always have data defined', () => {
-    const { data } = useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-    })
-
-    expectTypeOf(data).toEqualTypeOf<number>()
-  })
-
-  it('should not have pending status', () => {
-    const { status } = useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-    })
-
-    expectTypeOf(status).toEqualTypeOf<'error' | 'success'>()
-  })
-
-  it('should not allow skipToken in queryFn', () => {
-    useSuspenseQuery({
-      queryKey: ['key'],
-      // @ts-expect-error
-      queryFn: skipToken,
-    })
-
-    useSuspenseQuery({
-      queryKey: ['key'],
-      // @ts-expect-error
-      queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
-    })
-  })
-
-  it('should not allow placeholderData, enabled or throwOnError props', () => {
-    useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-      // @ts-expect-error TS2345
-      placeholderData: 5,
-      enabled: true,
-    })
-
-    useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-      // @ts-expect-error TS2345
-      enabled: true,
-    })
-
-    useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-      // @ts-expect-error TS2345
-      throwOnError: true,
-    })
-  })
-
-  it('should not return isPlaceholderData', () => {
-    const query = useSuspenseQuery({
-      queryKey: ['key'],
-      queryFn: () => Promise.resolve(5),
-    })
-
-    // @ts-expect-error TS2339
-    query.isPlaceholderData
-  })
-})
-
 describe('useSuspenseInfiniteQuery', () => {
   it('should always have data defined', () => {
     const { data } = useSuspenseInfiniteQuery({