-
+
Hooks for fetching, caching and updating asynchronous data in React, Solid, Svelte and Vue
@@ -12,8 +12,8 @@ Hooks for fetching, caching and updating asynchronous data in React, Solid, Svel
-
${html}
-
-
-
- `)
-
- queryClient.clear()
}
```
-### Client
-
-- Parse the dehydrated cache state that was sent to the client with the HTML
-- Create a new `QueryClient` instance
-- Render your app with the client provider and also **using the dehydrated state. This is extremely important! You must render both server and client using the same dehydrated state to ensure hydration on the client produces the exact same markup as the server.**
+In each route, note that it's fine to do this in nested routes too:
```tsx
+// app/routes/posts.tsx
+import { json } from '@remix-run/node'
import {
- Hydrate,
+ dehydrate,
+ HydrationBoundary,
QueryClient,
- QueryClientProvider,
+ useQuery,
} from '@tanstack/react-query'
-const dehydratedState = window.__REACT_QUERY_STATE__
-
-const queryClient = new QueryClient()
-
-ReactDOM.hydrate(
- ${html}
-
-
-
- `)
+Amazing, we've mostly flattened our waterfalls! There's a catch though. Let's call this page the `/feed` page, and let's pretend we also have another page like `/posts`. If we type in `www.example.com/feed` directly in the url bar and hit enter, we get all these great server rendering benefits, BUT, if we instead type in `www.example.com/posts` and then **click a link** to `/feed`, we're back to to this:
- queryClient.clear()
-}
+```
+1. |> JS for Loading...
Error: {query.error.message}
{todo.title}
} -{todo.title}
}
- {/* ✅ Will trigger loading fallback, data accessed in a suspense context. */}
-
+ {/* ✅ Will trigger loading fallback, data accessed in a suspense boundary. */}
+
{(todo) =>
- {/* ❌ Will not trigger loading fallback, data not accessed in a suspense context. */}
+ {/* ❌ Will not trigger loading fallback, data not accessed in a suspense boundary. */}
{(todo) =>
)
@@ -99,7 +109,11 @@ function Example() {
- Solid Query primitives (`createX`) do not support destructuring. The return value from these functions is a store, and their properties are only tracked in a reactive context.
```tsx
-import { QueryClient, QueryClientProvider, createQuery } from '@tanstack/solid-query'
+import {
+ QueryClient,
+ QueryClientProvider,
+ createQuery,
+} from '@tanstack/solid-query'
import { Match, Switch } from 'solid-js'
const queryClient = new QueryClient()
@@ -114,25 +128,27 @@ export default function App() {
function Example() {
// ❌ react version -- supports destructing outside reactive context
- // const { isLoading, error, data } = useQuery(['repoData'], () =>
- // fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
- // res.json()
- // )
- // )
+ // const { isPending, error, data } = useQuery({
+ // queryKey: ['repoData'],
+ // queryFn: () =>
+ // fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
+ // (res) => res.json()
+ // ),
+ // })
// ✅ solid version -- does not support destructuring outside reactive context
- const query = createQuery(
- () => ['repoData'],
- () =>
+ const query = createQuery(() => ({
+ queryKey: ['repoData'],
+ queryFn: () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
- (res) => res.json(),
+ (res) => res.json()
),
- )
+ }))
// ✅ access query properties in JSX reactive context
return (
{todo.title}
}{todo.title}
}
@@ -148,7 +164,7 @@ function Example() {
}
```
-- If you want options to be reactive you need to pass them using object getter syntax. This may look strange at first but it leads to more idiomatic solid code.
+- Signals and store values can be passed in directly to function arguments. Solid Query will update the query `store` automatically.
```tsx
import {
@@ -162,20 +178,26 @@ const queryClient = new QueryClient()
function Example() {
const [enabled, setEnabled] = createSignal(false)
- const query = createQuery(() => ['todos'], fetchTodos, {
- // ❌ passing a signal directly is not reactive
- // enabled: enabled(),
-
- // ✅ passing a function that returns a signal is reactive
- get enabled() {
- return enabled()
- },
- })
+ const [todo, setTodo] = createSignal(0)
+
+ // ✅ passing a signal directly is safe and observers update
+ // automatically when the value of a signal changes
+ const todosQuery = createQuery(() => ({
+ queryKey: ['todos'],
+ queryFn: fetchTodos,
+ enabled: enabled(),
+ }))
+
+ const todoDetailsQuery = createQuery(() => ({
+ queryKey: ['todo', todo()],
+ queryFn: fetchTodo,
+ enabled: todo() > 0,
+ }))
return (
-
+
@@ -183,7 +205,9 @@ function Example() {
- {(todo) =>
@@ -201,6 +225,7 @@ function App() {
}
```
-- Errors can be caught and reset using SolidJS' native `ErrorBoundary` component. `QueryErrorResetBoundary` is not needed with Solid Query
+- Errors can be caught and reset using SolidJS' native `ErrorBoundary` component.
+ Set `throwOnError` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary`
-- Since Property tracking is handled through Solid's fine grained reactivity, options like `notifyOnChangeProps` are not needed
\ No newline at end of file
+- Since Property tracking is handled through Solid's fine grained reactivity, options like `notifyOnChangeProps` are not needed
diff --git a/docs/svelte/installation.md b/docs/svelte/installation.md
index 10e6da1630..49cee9b324 100644
--- a/docs/svelte/installation.md
+++ b/docs/svelte/installation.md
@@ -5,14 +5,16 @@ title: Installation
You can install Svelte Query via [NPM](https://npmjs.com).
+> v5 is currently available as a release-candidate. We don't anticipate any major API changes from here on out. We encourage you to try it out and report any issues you find.
+
### NPM
```bash
-$ npm i @tanstack/svelte-query
+$ npm i @tanstack/svelte-query@rc
# or
-$ pnpm add @tanstack/svelte-query
+$ pnpm add @tanstack/svelte-query@rc
# or
-$ yarn add @tanstack/svelte-query
+$ yarn add @tanstack/svelte-query@rc
```
> Wanna give it a spin before you download? Try out the [basic](/query/v4/docs/svelte/examples/svelte/basic) example!
diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md
index e9c130ed7c..6b5125cd30 100644
--- a/docs/svelte/overview.md
+++ b/docs/svelte/overview.md
@@ -64,11 +64,11 @@ Svelte Query offers useful functions and components that will make managing serv
- `useIsMutating`
- `useHydrate`
- ``
-- ``
+- ``
## Important Differences between Svelte Query & React Query
Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
- Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores).
-- If your query or mutation depends on variables, you must assign it reactively. You can read more about this [here](./reactivity).
+- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](./reactivity).
diff --git a/docs/svelte/reactivity.md b/docs/svelte/reactivity.md
index e99f97c7fa..c59a1c58e3 100644
--- a/docs/svelte/reactivity.md
+++ b/docs/svelte/reactivity.md
@@ -3,18 +3,18 @@ id: reactivity
title: Reactivity
---
-Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To make a different variable or function reactive, you need to use [reactive declarations](https://svelte.dev/tutorial/reactive-declarations). This also applies to Svelte Query.
+Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/docs/svelte-store).
-In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is edited by the input field. However, as the query is not told it should react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
+In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is bound to the input field. However, as the query is not able to react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
```svelte
-
+
```
-To solve this, you can prefix the query with `$: ` to tell the compiler it should be reactive.
+To solve this, we can convert `intervalMs` into a writable store. The query options can then be turned into a derived store, which will be passed into the function with true reactivity.
```svelte
-
+
```
diff --git a/docs/vue/guides/background-fetching-indicators.md b/docs/vue/guides/background-fetching-indicators.md
index 125a176950..65ab505414 100644
--- a/docs/vue/guides/background-fetching-indicators.md
+++ b/docs/vue/guides/background-fetching-indicators.md
@@ -10,7 +10,7 @@ ref: docs/react/guides/background-fetching-indicators.md
- Loading...
+ Loading...
Error: {{ error.message }}
waiting 700.... }>
+
+
+ {props.children}
+
+ {
+ )
+}
diff --git a/examples/react/nextjs-suspense-streaming/tsconfig.json b/examples/react/nextjs-suspense-streaming/tsconfig.json
new file mode 100644
index 0000000000..6ef5cd577f
--- /dev/null
+++ b/examples/react/nextjs-suspense-streaming/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json
index 84f1488c3c..b67be7e3bd 100644
--- a/examples/react/nextjs/package.json
+++ b/examples/react/nextjs/package.json
@@ -8,11 +8,11 @@
"start": "next start"
},
"dependencies": {
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "ky": "^0.23.0",
- "ky-universal": "^0.8.2",
- "next": "12.2.2",
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "ky": "^0.33.3",
+ "ky-universal": "^0.11.0",
+ "next": "^13.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"resolve-from": "^5.0.0",
diff --git a/examples/react/nextjs/src/components/Header/index.js b/examples/react/nextjs/src/components/Header/index.js
index fdcb1dad06..dca3216946 100644
--- a/examples/react/nextjs/src/components/Header/index.js
+++ b/examples/react/nextjs/src/components/Header/index.js
@@ -7,13 +7,14 @@ export const Header = () => {
return (
-
- Home
+
+ Home
-
-
- Client-Only
-
+
+ Client-Only
Loading...
{todo.title}
} + {(todo) => ( + + )}
Fetching...
@@ -54,20 +54,3 @@ const {
```
[//]: # 'Example'
-[//]: # 'Example3'
-
-```tsx
-const fetchProjects = ({ pageParam = 0 }) =>
- fetch('/api/projects?cursor=' + pageParam)
-
-const { fetchNextPage } = useInfiniteQuery({
- queryKey: ['projects'],
- queryFn: fetchProjects,
- getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
-})
-
-// Pass your own page param
-const skipToCursor50 = () => fetchNextPage({ pageParam: 50 })
-```
-
-[//]: # 'Example3'
diff --git a/docs/vue/guides/migrating-to-v5.md b/docs/vue/guides/migrating-to-v5.md
new file mode 100644
index 0000000000..31e2bbd762
--- /dev/null
+++ b/docs/vue/guides/migrating-to-v5.md
@@ -0,0 +1,41 @@
+---
+id: migrating-to-tanstack-query-5
+title: Migrating to TanStack Query v5
+ref: docs/react/guides/migrating-to-v5.md
+---
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+
+## Vue Query Breaking Changes
+
+### `useQueries` composable returns `ref` instead of `reactive`
+
+To fix compatibility with Vue 2, `useQueries` composable now returns `queries` array wrapped in `ref`.
+Previously `reactive` was returned which led to multiple problems:
+
+- User could spread return value loosing reactivity.
+- `readonly` wrapper used for return value was breaking Vue 2 reactivity detection mechanism. This was a silent issue in Vue 2.6, but appeared as error in Vue 2.7.
+- Vue 2 does not support arrays as a root value of `reactive`.
+
+With this change all of those issues are fixed.
+
+Also this aligns `useQueries` with other composables which return all of the values as `refs`.
+
+### Vue v3.3 is now required
+
+To be able to provide new features following Vue releases, we now require Vue 3 to be at least in v3.3 version.
+Requirements for Vue 2.x remain unchanged.
+
+[//]: # 'FrameworkSpecificBreakingChanges'
+[//]: # 'FrameworkSpecificNewFeatures'
+
+### Ability to run `vue-query` composables in `injectionContext`
+
+Previously `vue-query` composables could be run only within `setup` function of the component.
+We had an escape hatch in place to allow those hooks to be run anywhere if user would provide `queryClient` as a composable option.
+
+Now you can use `vue-query` composables in any function that supports `injectionContext`. Ex. router navigation guards.
+When using this new feature, make sure that `vue-query` composable is running within `effectScope`. Otherwise it might lead to memory leaks.
+We have added `dev-only` warnings to inform users about potential misusage.
+
+[//]: # 'FrameworkSpecificNewFeatures'
diff --git a/docs/vue/guides/mutations.md b/docs/vue/guides/mutations.md
index 7d0d5ebb34..87c3ac6225 100644
--- a/docs/vue/guides/mutations.md
+++ b/docs/vue/guides/mutations.md
@@ -10,7 +10,7 @@ ref: docs/react/guides/mutations.md
- Adding todo...
+ Adding todo...
An error occurred: {{ error.message }}
Todo added!
@@ -63,7 +63,7 @@ function addTodo() {
const client = new QueryClient({
defaultOptions: {
queries: {
- cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+ gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
diff --git a/docs/vue/guides/paginated-queries.md b/docs/vue/guides/paginated-queries.md
index 31e3ec0431..de7bdb4369 100644
--- a/docs/vue/guides/paginated-queries.md
+++ b/docs/vue/guides/paginated-queries.md
@@ -17,7 +17,7 @@ const fetcher = (page: Ref) =>
).then((response) => response.json())
const page = ref(1)
-const { isLoading, isError, data, error, isFetching, isPreviousData } =
+const { isPending, isError, data, error, isFetching, isPreviousData } =
useQuery({
queryKey: ['projects', page],
queryFn: () => fetcher(page),
@@ -38,7 +38,7 @@ const nextPage = () => {
}>
+ waiting 600....
}>
+ Current Page: {{ page }} | Previous data: {{ isPreviousData }}
-Loading...
+ Loading...
An error has occurred: {{ error }}
-
diff --git a/docs/vue/guides/placeholder-query-data.md b/docs/vue/guides/placeholder-query-data.md
index 6075f554c6..ed72d18dcc 100644
--- a/docs/vue/guides/placeholder-query-data.md
+++ b/docs/vue/guides/placeholder-query-data.md
@@ -4,7 +4,7 @@ title: Placeholder Query Data
ref: docs/react/guides/placeholder-query-data.md
---
-[//]: # 'Example'
+[//]: # 'ExampleValue'
```tsx
const result = useQuery({
@@ -14,12 +14,10 @@ const result = useQuery({
})
```
-[//]: # 'Example'
+[//]: # 'ExampleValue'
[//]: # 'Memoization'
[//]: # 'Memoization'
-[//]: # 'Example2'
-[//]: # 'Example2'
-[//]: # 'Example3'
+[//]: # 'ExampleCache'
```tsx
const result = useQuery({
@@ -35,6 +33,6 @@ const result = useQuery({
})
```
-[//]: # 'Example3'
+[//]: # 'ExampleCache'
[//]: # 'Materials'
[//]: # 'Materials'
diff --git a/docs/vue/guides/prefetching.md b/docs/vue/guides/prefetching.md
index b4e4f62020..96cb8f97e3 100644
--- a/docs/vue/guides/prefetching.md
+++ b/docs/vue/guides/prefetching.md
@@ -1,5 +1,47 @@
---
id: prefetching
title: Prefetching
-ref: docs/react/guides/prefetching.md
---
+
+If you're lucky enough, you may know enough about what your users will do to be able to prefetch the data they need before it's needed! If this is the case, you can use the `prefetchQuery` method to prefetch the results of a query to be placed into the cache:
+
+[//]: # 'ExamplePrefetching'
+
+```tsx
+const prefetchTodos = async () => {
+ // The results of this query will be cached like a normal query
+ await queryClient.prefetchQuery({
+ queryKey: ['todos'],
+ queryFn: fetchTodos,
+ })
+}
+```
+
+[//]: # 'ExamplePrefetching'
+
+- If **fresh** data for this query is already in the cache, the data will not be fetched
+- If a `staleTime` is passed eg. `prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })` and the data is older than the specified `staleTime`, the query will be fetched
+- If no instances of `useQuery` appear for a prefetched query, it will be deleted and garbage collected after the time specified in `gcTime`.
+
+## Prefetching Infinite Queries
+
+Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option, in which case you also have to provide a `getNextPageParam` function:
+
+[//]: # 'ExampleInfiniteQuery'
+
+```tsx
+const prefetchTodos = async () => {
+ // The results of this query will be cached like a normal query
+ await queryClient.prefetchInfiniteQuery({
+ queryKey: ['projects'],
+ queryFn: fetchProjects,
+ initialPageParam: 0,
+ getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+ pages: 3, // prefetch the first 3 pages
+ })
+}
+```
+
+[//]: # 'ExampleInfiniteQuery'
+
+The above code will try to prefetch 3 pages in order, and `getNextPageParam` will be executed for each page to determine the next page to prefetch. If `getNextPageParam` returns `undefined`, the prefetching will stop.
diff --git a/docs/vue/guides/queries.md b/docs/vue/guides/queries.md
index 81cac5e0eb..44559f0c93 100644
--- a/docs/vue/guides/queries.md
+++ b/docs/vue/guides/queries.md
@@ -19,14 +19,14 @@ const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
- Loading...
+ Loading...
Error: {{ error.message }}
-
@@ -49,7 +49,7 @@ const { status, data, error } = useQuery({
- Loading...
+ Loading...
Error: {{ error.message }}
-
diff --git a/docs/vue/guides/ssr.md b/docs/vue/guides/ssr.md
index d0995a5b07..7a0098cd0c 100644
--- a/docs/vue/guides/ssr.md
+++ b/docs/vue/guides/ssr.md
@@ -213,10 +213,10 @@ This refetching of stale queries is a perfect match when caching markup in a CDN
### High memory consumption on server
-In case you are creating the `QueryClient` for every request, Vue Query creates the isolated cache for this client, which is preserved in memory for the `cacheTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
+In case you are creating the `QueryClient` for every request, Vue Query creates the isolated cache for this client, which is preserved in memory for the `gcTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
-On the server, `cacheTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `cacheTime` then you will be responsible for clearing the cache early.
+On the server, `gcTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `gcTime` then you will be responsible for clearing the cache early.
To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../reference/QueryClient#queryclientclear) after the request is handled and dehydrated state has been sent to the client.
-Alternatively, you can set a smaller `cacheTime`.
+Alternatively, you can set a smaller `gcTime`.
diff --git a/docs/vue/installation.md b/docs/vue/installation.md
index 70ec75d080..21ab95d29b 100644
--- a/docs/vue/installation.md
+++ b/docs/vue/installation.md
@@ -5,17 +5,19 @@ title: Installation
You can install Vue Query via [NPM](https://npmjs.com).
+> v5 is currently available as a release-candidate. We don't anticipate any major API changes from here on out. We encourage you to try it out and report any issues you find.
+
### NPM
```bash
-$ npm i @tanstack/vue-query
+$ npm i @tanstack/vue-query@rc
# or
-$ pnpm add @tanstack/vue-query
+$ pnpm add @tanstack/vue-query@rc
# or
-$ yarn add @tanstack/vue-query
+$ yarn add @tanstack/vue-query@rc
```
-> Wanna give it a spin before you download? Try out the [basic](/query/v4/docs/vue/examples/vue/basic) example!
+> Wanna give it a spin before you download? Try out the [basic](../examples/vue/basic) example!
Vue Query is compatible with Vue 2.x and 3.x
@@ -43,7 +45,7 @@ If you are not a fan of `
- Loading...
+ Loading...
Error: {{ error.message }}
-
diff --git a/docs/vue/typescript.md b/docs/vue/typescript.md
index e3a4f3e482..963bd0089a 100644
--- a/docs/vue/typescript.md
+++ b/docs/vue/typescript.md
@@ -49,10 +49,12 @@ const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
[//]: # 'TypeNarrowing'
```tsx
-const { data, isSuccess } = reactive(useQuery({
- queryKey: ['test'],
- queryFn: () => Promise.resolve(5),
-}))
+const { data, isSuccess } = reactive(
+ useQuery({
+ queryKey: ['test'],
+ queryFn: () => Promise.resolve(5),
+ }),
+)
if (isSuccess) {
data
@@ -75,10 +77,16 @@ if (error.value instanceof Error) {
}
```
-[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUKEiw49AB7AIqUuUpV5i1GPESYeMOjgBxcsjBwAvIjjAAJgC44jZCABGuIhImsIzeCXQYVgALEwgzZSsACgBKRwAFVWAMAB4wswBtAF0APks8jSUAOgBzQKiqThLTMC0Yophg9EYoqHRUSGZDCzy2jt8MItt6BhivcR8-a1xyKCJLFAxsXDwopCEVgGl0PEcMqmrw2qosgBo4DfwAMUZHAKDQmuVCMfFOTjhPr4A9AH44SYsOAzaCOABK6BIKWQjHYjAgAHdGDlxsASHAoiCoEVuPQADY4Gx+JisdAQdEAUSgsxiiAknyxOPxOHpcHeX0+fwBA3gWMcVNmEkIQA)
+[typescript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoUJFhx6AD2ARUpcpSqLlqCZKkw8YdHADi5ZGDgBeRHGAATAFxxGyEACNcRKVNYRm8CToMKwAFmYQFqo2ABQAlM4ACurAGAA8ERYA2gC6AHzWBVoqAHQA5sExVJxl5mA6cSUwoeiMMTyokMzGVgUdXRgl9vQMcT6SfgG2uORQRNYoGNi4eDFIIisA0uh4zllUtZH1VDkANHAb+ABijM5BIeF1qoRjkpyccJ9fAHoA-OPAEhwGLFVAlVIAQSUKgAolBZjEZtA4nFEFJPkioOi4O84H8pIQgA)
[//]: # 'TypingError'
[//]: # 'TypingError2'
[//]: # 'TypingError2'
+[//]: # 'TypingError3'
+[//]: # 'TypingError3'
+[//]: # 'RegisterErrorType'
+[//]: # 'RegisterErrorType'
+[//]: # 'TypingQueryOptions'
+[//]: # 'TypingQueryOptions'
[//]: # 'Materials'
[//]: # 'Materials'
diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json
index 54ab060b34..5c364bc4c9 100644
--- a/examples/react/algolia/package.json
+++ b/examples/react/algolia/package.json
@@ -8,21 +8,21 @@
"preview": "vite preview"
},
"dependencies": {
- "@algolia/client-search": "4.11.0",
- "@algolia/transporter": "4.11.0",
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "algoliasearch": "4.12.2",
+ "@algolia/client-search": "4.17.1",
+ "@algolia/transporter": "4.17.1",
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "algoliasearch": "4.17.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
- "@tanstack/eslint-plugin-query": "^4.13.0",
- "@types/react": "^18.0.14",
- "@types/react-dom": "^18.0.5",
- "@vitejs/plugin-react": "^2.0.0",
- "typescript": "^4.7.4",
- "vite": "^3.0.0"
+ "@tanstack/eslint-plugin-query": "^5.0.0-rc.1",
+ "@types/react": "^18.2.4",
+ "@types/react-dom": "^18.2.4",
+ "@vitejs/plugin-react": "^4.0.0",
+ "typescript": "^5.0.4",
+ "vite": "^4.4.4"
},
"browserslist": {
"production": [
diff --git a/examples/react/algolia/src/SearchResults.tsx b/examples/react/algolia/src/SearchResults.tsx
index 0bb39b1e18..59b353a7dd 100644
--- a/examples/react/algolia/src/SearchResults.tsx
+++ b/examples/react/algolia/src/SearchResults.tsx
@@ -24,7 +24,7 @@ export default function SearchResults({ query = '' }: SearchResultsProps) {
query,
hitsPerPage: 5,
staleTime: 1000 * 30, // 30s
- cacheTime: 1000 * 60 * 15, // 15m
+ gcTime: 1000 * 60 * 15, // 15m
enabled: !!query,
})
diff --git a/examples/react/algolia/src/algolia.ts b/examples/react/algolia/src/algolia.ts
index a3b449f6dd..bc816ac104 100644
--- a/examples/react/algolia/src/algolia.ts
+++ b/examples/react/algolia/src/algolia.ts
@@ -16,7 +16,7 @@ type SearchOptions = {
export async function search
Loading...
+ if (status === 'pending') returnLoading...
if (status === 'error') return Error: {error.message} return ( diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json index c4c768a2a0..ed1b796f7d 100644 --- a/examples/react/basic-graphql-request/package.json +++ b/examples/react/basic-graphql-request/package.json @@ -8,16 +8,16 @@ "preview": "vite preview" }, "dependencies": { - "graphql": "^15.3.0", - "graphql-request": "^3.1.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "@tanstack/react-query": "^4.7.1", - "@tanstack/react-query-devtools": "^4.7.1" + "graphql": "^16.6.0", + "graphql-request": "^6.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "@tanstack/react-query": "^5.0.0-rc.1", + "@tanstack/react-query-devtools": "^5.0.0-rc.1" }, "devDependencies": { - "@vitejs/plugin-react": "^2.0.0", - "vite": "^3.0.0" + "@vitejs/plugin-react": "^4.0.0", + "vite": "^4.4.4" }, "browserslist": { "production": [ diff --git a/examples/react/basic-graphql-request/src/index.jsx b/examples/react/basic-graphql-request/src/index.jsx index 02dcdb3142..b484d73a23 100644 --- a/examples/react/basic-graphql-request/src/index.jsx +++ b/examples/react/basic-graphql-request/src/index.jsx @@ -71,7 +71,7 @@ function Posts({ setPostId }) {Posts
- {status === 'loading' ? (
+ {status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
@@ -142,7 +142,7 @@ function Post({ postId, setPostId }) {
Back
- {!postId || status === 'loading' ? (
+ {!postId || status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json
index 2088e2ad61..5fa87febff 100644
--- a/examples/react/basic-typescript/package.json
+++ b/examples/react/basic-typescript/package.json
@@ -8,23 +8,23 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "@tanstack/react-query-persist-client": "^4.7.1",
- "@tanstack/query-sync-storage-persister": "^4.7.1",
- "axios": "^0.26.1",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
+ "@tanstack/query-sync-storage-persister": "^5.0.0-rc.1",
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "@tanstack/react-query-persist-client": "^5.0.0-rc.1",
+ "axios": "^1.4.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
- "@tanstack/eslint-plugin-query": "^4.13.0",
- "@types/react": "^17.0.3",
- "@types/react-dom": "^17.0.3",
- "@vitejs/plugin-react": "^2.0.0",
+ "@tanstack/eslint-plugin-query": "^5.0.0-rc.1",
+ "@types/react": "^18.2.4",
+ "@types/react-dom": "^18.2.4",
+ "@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.8.0",
- "typescript": "^4.2.3",
- "vite": "^3.0.0"
+ "typescript": "^5.0.4",
+ "vite": "^4.4.4"
},
"browserslist": {
"production": [
diff --git a/examples/react/basic-typescript/src/index.tsx b/examples/react/basic-typescript/src/index.tsx
index ebe89bb1b6..34b931bbc4 100644
--- a/examples/react/basic-typescript/src/index.tsx
+++ b/examples/react/basic-typescript/src/index.tsx
@@ -10,7 +10,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
- cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+ gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
@@ -49,7 +49,7 @@ function Posts({
Posts
- {status === 'loading' ? (
+ {status === 'pending' ? (
'Loading...'
) : error instanceof Error ? (
Error: {error.message}
@@ -116,7 +116,7 @@ function Post({
Back
- {!postId || status === 'loading' ? (
+ {!postId || status === 'pending' ? (
'Loading...'
) : error instanceof Error ? (
Error: {error.message}
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 2c2074cdd5..c117ad9088 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -8,16 +8,16 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "axios": "^0.21.1",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "axios": "^1.4.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
- "@tanstack/eslint-plugin-query": "^4.13.0",
- "@vitejs/plugin-react": "^2.0.0",
- "vite": "^3.0.0"
+ "@tanstack/eslint-plugin-query": "^5.0.0-rc.1",
+ "@vitejs/plugin-react": "^4.0.0",
+ "vite": "^4.4.4"
},
"browserslist": {
"production": [
diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx
index fe64d04fad..e038ea9b33 100644
--- a/examples/react/basic/src/index.jsx
+++ b/examples/react/basic/src/index.jsx
@@ -57,7 +57,7 @@ function Posts({ setPostId }) {
Posts
- {status === 'loading' ? (
+ {status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
@@ -118,7 +118,7 @@ function Post({ postId, setPostId }) {
Back
- {!postId || status === 'loading' ? (
+ {!postId || status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json
index 506ef913ee..9433abc3cf 100644
--- a/examples/react/default-query-function/package.json
+++ b/examples/react/default-query-function/package.json
@@ -8,15 +8,15 @@
"preview": "vite preview"
},
"dependencies": {
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "axios": "^0.26.1",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "axios": "^1.4.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
- "@vitejs/plugin-react": "^2.0.0",
- "vite": "^3.0.0"
+ "@vitejs/plugin-react": "^4.0.0",
+ "vite": "^4.4.4"
},
"browserslist": {
"production": [
diff --git a/examples/react/default-query-function/src/index.jsx b/examples/react/default-query-function/src/index.jsx
index ec1da890bd..5b494df68e 100644
--- a/examples/react/default-query-function/src/index.jsx
+++ b/examples/react/default-query-function/src/index.jsx
@@ -64,7 +64,7 @@ function Posts({ setPostId }) {
Posts
- {status === 'loading' ? (
+ {status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
@@ -114,7 +114,7 @@ function Post({ postId, setPostId }) {
Back
- {!postId || status === 'loading' ? (
+ {!postId || status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
Error: {error.message}
diff --git a/examples/react/optimistic-updates-typescript/.gitignore b/examples/react/infinite-query-with-max-pages/.gitignore
similarity index 100%
rename from examples/react/optimistic-updates-typescript/.gitignore
rename to examples/react/infinite-query-with-max-pages/.gitignore
diff --git a/examples/react/optimistic-updates-typescript/README.md b/examples/react/infinite-query-with-max-pages/README.md
similarity index 100%
rename from examples/react/optimistic-updates-typescript/README.md
rename to examples/react/infinite-query-with-max-pages/README.md
diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json
new file mode 100644
index 0000000000..679a10971c
--- /dev/null
+++ b/examples/react/infinite-query-with-max-pages/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@tanstack/query-example-react-infinite-query-with-max-pages",
+ "private": true,
+ "main": "index.js",
+ "license": "MIT",
+ "dependencies": {
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "axios": "^1.4.0",
+ "isomorphic-unfetch": "4.0.2",
+ "next": "^13.4.4",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-intersection-observer": "^8.33.1"
+ },
+ "scripts": {
+ "dev": "next",
+ "start": "next start",
+ "build": "next build"
+ }
+}
diff --git a/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js
new file mode 100644
index 0000000000..a13fbee1aa
--- /dev/null
+++ b/examples/react/infinite-query-with-max-pages/src/pages/api/projects.js
@@ -0,0 +1,19 @@
+// an endpoint for getting projects data
+export default (req, res) => {
+ const cursor = parseInt(req.query.cursor) || 0
+ const pageSize = 4
+
+ const data = Array(pageSize)
+ .fill(0)
+ .map((_, i) => {
+ return {
+ name: 'Project ' + (i + cursor) + ` (server time: ${Date.now()})`,
+ id: i + cursor,
+ }
+ })
+
+ const nextId = cursor < 20 ? data[data.length - 1].id + 1 : null
+ const previousId = cursor > -20 ? data[0].id - pageSize : null
+
+ setTimeout(() => res.json({ data, nextId, previousId }), 300)
+}
diff --git a/examples/react/infinite-query-with-max-pages/src/pages/index.js b/examples/react/infinite-query-with-max-pages/src/pages/index.js
new file mode 100644
index 0000000000..5b396b145c
--- /dev/null
+++ b/examples/react/infinite-query-with-max-pages/src/pages/index.js
@@ -0,0 +1,108 @@
+import React from 'react'
+import axios from 'axios'
+import {
+ useInfiniteQuery,
+ QueryClient,
+ QueryClientProvider,
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+ return (
+
+
+ {page.data.map((project) => (
+
+ ))}
+
+
+ )
+}
diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json
index 992107b308..f9d355bea1 100644
--- a/examples/react/load-more-infinite-scroll/package.json
+++ b/examples/react/load-more-infinite-scroll/package.json
@@ -4,11 +4,11 @@
"main": "index.js",
"license": "MIT",
"dependencies": {
- "@tanstack/react-query": "^4.7.1",
- "@tanstack/react-query-devtools": "^4.7.1",
- "axios": "^0.21.1",
- "isomorphic-unfetch": "3.0.0",
- "next": "12.2.2",
+ "@tanstack/react-query": "^5.0.0-rc.1",
+ "@tanstack/react-query-devtools": "^5.0.0-rc.1",
+ "axios": "^1.4.0",
+ "isomorphic-unfetch": "4.0.2",
+ "next": "^13.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intersection-observer": "^8.33.1"
diff --git a/examples/react/load-more-infinite-scroll/src/pages/index.js b/examples/react/load-more-infinite-scroll/src/pages/index.js
index 0770c97756..938282f946 100644
--- a/examples/react/load-more-infinite-scroll/src/pages/index.js
+++ b/examples/react/load-more-infinite-scroll/src/pages/index.js
@@ -33,28 +33,27 @@ function Example() {
fetchPreviousPage,
hasNextPage,
hasPreviousPage,
- } = useInfiniteQuery(
- ['projects'],
- async ({ pageParam = 0 }) => {
+ } = useInfiniteQuery({
+ queryKey: ['projects'],
+ queryFn: async ({ pageParam }) => {
const res = await axios.get('/api/projects?cursor=' + pageParam)
return res.data
},
- {
- getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
- getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
- },
- )
+ initialPageParam: 0,
+ getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
+ getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+ })
React.useEffect(() => {
if (inView) {
fetchNextPage()
}
- }, [inView])
+ }, [fetchNextPage, inView])
return (
Infinite Query with max pages
+4 projects per page
+3 pages max
+ {status === 'pending' ? ( +Loading...
+ ) : status === 'error' ? ( + Error: {error.message} + ) : ( + <> +
+
+
+ {data.pages.map((page) => (
+ + {project.name} +
+ ))} +
+
+
+
+ {isFetching && !isFetchingNextPage
+ ? 'Background Updating...'
+ : null}
+
+
+ )}
+ +
Infinite Loading
- {status === 'loading' ? ( + {status === 'pending' ? (Loading...
) : status === 'error' ? ( Error: {error.message} @@ -110,9 +109,7 @@ function Example() { )}- - Go to another page - + Go to another page
result: {data}
+}
+
+export default function MyPage() {
+ return (
+ <>
+