snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)
This commit is contained in:
145
docs/framework/vue/devtools.md
Normal file
145
docs/framework/vue/devtools.md
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: devtools
|
||||
title: Devtools
|
||||
---
|
||||
|
||||
Wave your hands in the air and shout hooray because Vue Query comes with dedicated devtools! 🥳
|
||||
|
||||
When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
|
||||
|
||||
> For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages:
|
||||
>
|
||||
> - <img alt="Chrome logo" src="https://www.google.com/chrome/static/images/chrome-logo.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai">Devtools for Chrome</a>
|
||||
> - <img alt="Firefox logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/">Devtools for Firefox</a>
|
||||
> - <img alt="Edge logo" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Microsoft_Edge_logo_%282019%29.svg" width="16" height="16" class="inline mr-1 not-prose" /> <a href="https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj">Devtools for Edge</a>
|
||||
|
||||
## Component based Devtools (Vue 3)
|
||||
|
||||
You can directly integrate the devtools component into your page using a dedicated package.
|
||||
Component-based devtools use a framework-agnostic implementation and are always up-to-date.
|
||||
|
||||
The devtools component is a separate package that you need to install:
|
||||
|
||||
```bash
|
||||
npm i @tanstack/vue-query-devtools
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
pnpm add @tanstack/vue-query-devtools
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add @tanstack/vue-query-devtools
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
bun add @tanstack/vue-query-devtools
|
||||
```
|
||||
|
||||
By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
|
||||
|
||||
## Floating Mode
|
||||
|
||||
Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
|
||||
|
||||
Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>The app!</h1>
|
||||
<VueQueryDevtools />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
- `initialIsOpen: boolean`
|
||||
- Set this `true` if you want the dev tools to default to being open.
|
||||
- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
|
||||
- Defaults to `bottom-right`.
|
||||
- The position of the TanStack logo to open and close the devtools panel.
|
||||
- `position?: "top" | "bottom" | "left" | "right"`
|
||||
- Defaults to `bottom`.
|
||||
- The position of the Vue Query devtools panel.
|
||||
- `client?: QueryClient`
|
||||
- Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
|
||||
- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
|
||||
- Use this to predefine some errors that can be triggered on your queries. The initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
|
||||
- `styleNonce?: string`
|
||||
- Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
|
||||
- `shadowDOMTarget?: ShadowRoot`
|
||||
- Default behavior will apply the devtool's styles to the head tag within the DOM.
|
||||
- Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
|
||||
- `theme?: "light" | "dark" | "system"`
|
||||
- Defaults to `system`.
|
||||
- Set this to change the theme of the devtools panel.
|
||||
|
||||
## Embedded Mode
|
||||
|
||||
Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools.
|
||||
|
||||
Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
|
||||
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>The app!</h1>
|
||||
<button @click="isOpen = !isOpen">
|
||||
{{ isOpen ? 'Close' : 'Open' }} the devtools panel
|
||||
</button>
|
||||
<VueQueryDevtoolsPanel v-if="isOpen" :onClose="() => (isOpen = false)" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
- `style?: Partial<CSSStyleDeclaration>`
|
||||
- Custom styles for the devtools panel
|
||||
- Default: `{ height: '500px' }`
|
||||
- Example: `{ height: '100%' }`
|
||||
- Example: `{ height: '100%', width: '100%' }`
|
||||
- `onClose?: () => void`
|
||||
- Callback function that is called when the devtools panel is closed
|
||||
- `client?: QueryClient`,
|
||||
- Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
|
||||
- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
|
||||
- Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
|
||||
- `styleNonce?: string`
|
||||
- Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
|
||||
- `shadowDOMTarget?: ShadowRoot`
|
||||
- Default behavior will apply the devtool's styles to the head tag within the DOM.
|
||||
- Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
|
||||
- `theme?: "light" | "dark" | "system"`
|
||||
- Defaults to `system`.
|
||||
- Set this to change the theme of the devtools panel.
|
||||
|
||||
## Traditional Devtools
|
||||
|
||||
Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events.
|
||||
Devtool code will be treeshaken from production bundles by default.
|
||||
|
||||
To make it work, you only need to enable it in the plugin options:
|
||||
|
||||
```ts
|
||||
app.use(VueQueryPlugin, {
|
||||
enableDevtoolsV6Plugin: true,
|
||||
})
|
||||
```
|
||||
|
||||
Both v6 and v7 versions of devtools are supported.
|
||||
9
docs/framework/vue/graphql.md
Normal file
9
docs/framework/vue/graphql.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
id: graphql
|
||||
title: GraphQL
|
||||
ref: docs/framework/react/graphql.md
|
||||
replace: { 'React': 'Vue', 'react-query': 'vue-query' }
|
||||
---
|
||||
|
||||
[//]: # 'Codegen'
|
||||
[//]: # 'Codegen'
|
||||
45
docs/framework/vue/guides/background-fetching-indicators.md
Normal file
45
docs/framework/vue/guides/background-fetching-indicators.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
id: background-fetching-indicators
|
||||
title: Background Fetching Indicators
|
||||
ref: docs/framework/react/guides/background-fetching-indicators.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { isPending, isFetching, isError, data, error } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: getTodos,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isFetching">Refreshing...</div>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<!-- We can assume by this point that `isSuccess === true` -->
|
||||
<ul v-else-if="data">
|
||||
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example2'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useIsFetching } from '@tanstack/vue-query'
|
||||
|
||||
const isFetching = useIsFetching()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isFetching">Queries are fetching in the background...</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
5
docs/framework/vue/guides/caching.md
Normal file
5
docs/framework/vue/guides/caching.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: caching
|
||||
title: Caching Examples
|
||||
ref: docs/framework/react/guides/caching.md
|
||||
---
|
||||
72
docs/framework/vue/guides/custom-client.md
Normal file
72
docs/framework/vue/guides/custom-client.md
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: custom-client
|
||||
title: Custom Client
|
||||
---
|
||||
|
||||
### Custom client
|
||||
|
||||
Vue Query allows providing custom `QueryClient` for Vue context.
|
||||
|
||||
It might be handy when you need to create `QueryClient` beforehand to integrate it with other libraries that do not have access to the Vue context.
|
||||
|
||||
For this reason, `VueQueryPlugin` accepts either `QueryClientConfig` or `QueryClient` as a plugin options.
|
||||
|
||||
If You provide `QueryClientConfig`, `QueryClient` instance will be created internally and provided to Vue context.
|
||||
|
||||
```tsx
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClientConfig: {
|
||||
defaultOptions: { queries: { staleTime: 3600 } },
|
||||
},
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
```tsx
|
||||
const myClient = new QueryClient(queryClientConfig)
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClient: myClient,
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
### Custom context key
|
||||
|
||||
You can also customize the key under which `QueryClient` will be accessible in Vue context. This can be useful is you want to avoid name clashing between multiple apps on the same page with Vue2.
|
||||
|
||||
It works both with default, and custom `QueryClient`
|
||||
|
||||
```tsx
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClientKey: 'Foo',
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
```tsx
|
||||
const myClient = new QueryClient(queryClientConfig)
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClient: myClient,
|
||||
queryClientKey: 'Foo',
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
To use the custom client key, You have to provide it as a query options
|
||||
|
||||
```js
|
||||
useQuery({
|
||||
queryKey: ['query1'],
|
||||
queryFn: fetcher,
|
||||
queryClientKey: 'foo',
|
||||
})
|
||||
```
|
||||
|
||||
Internally custom key will be combined with default query key as a suffix. But user do not have to worry about it.
|
||||
|
||||
```tsx
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClientKey: 'Foo',
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo
|
||||
```
|
||||
32
docs/framework/vue/guides/default-query-function.md
Normal file
32
docs/framework/vue/guides/default-query-function.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
id: default-query-function
|
||||
title: Default Query Function
|
||||
ref: docs/framework/react/guides/default-query-function.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```tsx
|
||||
// Define a default query function that will receive the query key
|
||||
const defaultQueryFn = async ({ queryKey }) => {
|
||||
const { data } = await axios.get(
|
||||
`https://jsonplaceholder.typicode.com${queryKey[0]}`,
|
||||
)
|
||||
return data
|
||||
}
|
||||
|
||||
// provide the default query function to your app with defaultOptions
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClientConfig: {
|
||||
defaultOptions: { queries: { queryFn: defaultQueryFn } },
|
||||
},
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
|
||||
// All you have to do now is pass a key!
|
||||
const { status, data, error, isFetching } = useQuery({
|
||||
queryKey: [`/posts/${postId}`],
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
55
docs/framework/vue/guides/dependent-queries.md
Normal file
55
docs/framework/vue/guides/dependent-queries.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: dependent-queries
|
||||
title: Dependent Queries
|
||||
ref: docs/framework/react/guides/dependent-queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```js
|
||||
// Get the user
|
||||
const { data: user } = useQuery({
|
||||
queryKey: ['user', email],
|
||||
queryFn: () => getUserByEmail(email.value),
|
||||
})
|
||||
|
||||
const userId = computed(() => user.value?.id)
|
||||
const enabled = computed(() => !!user.value?.id)
|
||||
|
||||
// Then get the user's projects
|
||||
const { isIdle, data: projects } = useQuery({
|
||||
queryKey: ['projects', userId],
|
||||
queryFn: () => getProjectsByUser(userId.value),
|
||||
enabled, // The query will not execute until `enabled == true`
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example2'
|
||||
|
||||
```tsx
|
||||
// Get the users ids
|
||||
const { data: userIds } = useQuery({
|
||||
queryKey: ['users'],
|
||||
queryFn: getUsersData,
|
||||
select: (users) => users.map((user) => user.id),
|
||||
})
|
||||
|
||||
const queries = computed(() => {
|
||||
return userIds.value.length
|
||||
? userIds.value.map((id) => {
|
||||
return {
|
||||
queryKey: ['messages', id],
|
||||
queryFn: () => getMessagesByUsers(id),
|
||||
}
|
||||
})
|
||||
: []
|
||||
})
|
||||
|
||||
// Then get the users messages
|
||||
const usersMessages = useQueries({
|
||||
queries, // if userIds.value is undefined or has no items, an empty array will be returned
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
79
docs/framework/vue/guides/disabling-queries.md
Normal file
79
docs/framework/vue/guides/disabling-queries.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: disabling-queries
|
||||
title: Disabling/Pausing Queries
|
||||
ref: docs/framework/react/guides/disabling-queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { isLoading, isError, data, error, refetch, isFetching } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: fetchTodoList,
|
||||
enabled: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="refetch()">Fetch Todos</button>
|
||||
<span v-if="isLoading">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error?.message }}</span>
|
||||
<div v-else-if="data">
|
||||
<span v-if="isFetching">Fetching...</span>
|
||||
<ul>
|
||||
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span v-else>Not ready...</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example2'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const filter = ref('')
|
||||
const isEnabled = computed(() => !!filter.value)
|
||||
const { data } = useQuery({
|
||||
queryKey: ['todos', filter],
|
||||
queryFn: () => fetchTodos(filter),
|
||||
// ⬇️ disabled as long as the filter is empty
|
||||
enabled: isEnabled,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="data">Filter was set and data is here!</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
[//]: # 'Example3'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery, skipToken } from '@tanstack/vue-query'
|
||||
|
||||
const filter = ref('')
|
||||
const queryFn = computed(() =>
|
||||
!!filter.value ? () => fetchTodos(filter) : skipToken,
|
||||
)
|
||||
const { data } = useQuery({
|
||||
queryKey: ['todos', filter],
|
||||
// ⬇️ disabled as long as the filter is undefined or empty
|
||||
queryFn: queryFn,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="data">Filter was set and data is here!</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example3'
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
id: does-this-replace-client-state
|
||||
title: Does Vue Query replace Vuex, Pinia or other global state managers?
|
||||
ref: docs/framework/react/guides/does-this-replace-client-state.md
|
||||
replace: { 'Redux, MobX': 'Vuex, Pinia' }
|
||||
---
|
||||
5
docs/framework/vue/guides/filters.md
Normal file
5
docs/framework/vue/guides/filters.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: filters
|
||||
title: Filters
|
||||
ref: docs/framework/react/guides/filters.md
|
||||
---
|
||||
8
docs/framework/vue/guides/important-defaults.md
Normal file
8
docs/framework/vue/guides/important-defaults.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
id: important-defaults
|
||||
title: Important Defaults
|
||||
ref: docs/framework/react/guides/important-defaults.md
|
||||
---
|
||||
|
||||
[//]: # 'Materials'
|
||||
[//]: # 'Materials'
|
||||
57
docs/framework/vue/guides/infinite-queries.md
Normal file
57
docs/framework/vue/guides/infinite-queries.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: infinite-queries
|
||||
title: Infinite Queries
|
||||
ref: docs/framework/react/guides/infinite-queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const fetchProjects = async ({ pageParam }) => {
|
||||
const res = await fetch('/api/projects?cursor=' + pageParam)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetching,
|
||||
isFetchingNextPage,
|
||||
isPending,
|
||||
isError,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: fetchProjects,
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<div v-else-if="data">
|
||||
<span v-if="isFetching && !isFetchingNextPage">Fetching...</span>
|
||||
<ul v-for="(group, index) in data.pages" :key="index">
|
||||
<li v-for="project in group.projects" :key="project.id">
|
||||
{{ project.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
@click="() => fetchNextPage()"
|
||||
:disabled="!hasNextPage || isFetchingNextPage"
|
||||
>
|
||||
<span v-if="isFetchingNextPage">Loading more...</span>
|
||||
<span v-else-if="hasNextPage">Load More</span>
|
||||
<span v-else>Nothing more to load</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
8
docs/framework/vue/guides/initial-query-data.md
Normal file
8
docs/framework/vue/guides/initial-query-data.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
id: initial-query-data
|
||||
title: Initial Query Data
|
||||
ref: docs/framework/react/guides/initial-query-data.md
|
||||
---
|
||||
|
||||
[//]: # 'Materials'
|
||||
[//]: # 'Materials'
|
||||
24
docs/framework/vue/guides/invalidations-from-mutations.md
Normal file
24
docs/framework/vue/guides/invalidations-from-mutations.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
id: invalidations-from-mutations
|
||||
title: Invalidations from Mutations
|
||||
ref: docs/framework/react/guides/invalidations-from-mutations.md
|
||||
---
|
||||
|
||||
[//]: # 'Example2'
|
||||
|
||||
```tsx
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
|
||||
const mutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['reminders'] })
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
41
docs/framework/vue/guides/migrating-to-v5.md
Normal file
41
docs/framework/vue/guides/migrating-to-v5.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
id: migrating-to-tanstack-query-5
|
||||
title: Migrating to TanStack Query v5
|
||||
ref: docs/framework/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'
|
||||
97
docs/framework/vue/guides/mutations.md
Normal file
97
docs/framework/vue/guides/mutations.md
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: mutations
|
||||
title: Mutations
|
||||
ref: docs/framework/react/guides/mutations.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useMutation } from '@tanstack/vue-query'
|
||||
|
||||
const { isPending, isError, error, isSuccess, mutate } = useMutation({
|
||||
mutationFn: (newTodo) => axios.post('/todos', newTodo),
|
||||
})
|
||||
|
||||
function addTodo() {
|
||||
mutate({ id: new Date(), title: 'Do Laundry' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Adding todo...</span>
|
||||
<span v-else-if="isError">An error occurred: {{ error.message }}</span>
|
||||
<span v-else-if="isSuccess">Todo added!</span>
|
||||
<button @click="addTodo">Create Todo</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Info1'
|
||||
[//]: # 'Info1'
|
||||
[//]: # 'Example2'
|
||||
[//]: # 'Example2'
|
||||
[//]: # 'Example3'
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { useMutation } from '@tanstack/vue-query'
|
||||
|
||||
const { error, mutate, reset } = useMutation({
|
||||
mutationFn: (newTodo) => axios.post('/todos', newTodo),
|
||||
})
|
||||
|
||||
function addTodo() {
|
||||
mutate({ id: new Date(), title: 'Do Laundry' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-else-if="error">
|
||||
<span>An error occurred: {{ error.message }}</span>
|
||||
<button @click="reset">Reset error</button>
|
||||
</span>
|
||||
<button @click="addTodo">Create Todo</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example3'
|
||||
[//]: # 'Example11'
|
||||
|
||||
```js
|
||||
const client = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
gcTime: 1000 * 60 * 60 * 24, // 24 hours
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// we need a default mutation function so that paused mutations can resume after a page reload
|
||||
queryClient.setMutationDefaults({
|
||||
mutationKey: ['todos'],
|
||||
mutationFn: ({ id, data }) => {
|
||||
return api.updateTodo(id, data)
|
||||
},
|
||||
})
|
||||
|
||||
const vueQueryOptions: VueQueryPluginOptions = {
|
||||
queryClient: client,
|
||||
clientPersister: (queryClient) => {
|
||||
return persistQueryClient({
|
||||
queryClient,
|
||||
persister: createAsyncStoragePersister({ storage: localStorage }),
|
||||
})
|
||||
},
|
||||
clientPersisterOnSuccess: (queryClient) => {
|
||||
queryClient.resumePausedMutations()
|
||||
},
|
||||
}
|
||||
|
||||
createApp(App).use(VueQueryPlugin, vueQueryOptions).mount('#app')
|
||||
```
|
||||
|
||||
[//]: # 'Example11'
|
||||
[//]: # 'Materials'
|
||||
[//]: # 'Materials'
|
||||
5
docs/framework/vue/guides/network-mode.md
Normal file
5
docs/framework/vue/guides/network-mode.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: network-mode
|
||||
title: Network Mode
|
||||
ref: docs/framework/react/guides/network-mode.md
|
||||
---
|
||||
6
docs/framework/vue/guides/optimistic-updates.md
Normal file
6
docs/framework/vue/guides/optimistic-updates.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
id: optimistic-updates
|
||||
title: Optimistic Updates
|
||||
ref: docs/framework/react/guides/optimistic-updates.md
|
||||
replace: { 'React': 'Vue' }
|
||||
---
|
||||
53
docs/framework/vue/guides/paginated-queries.md
Normal file
53
docs/framework/vue/guides/paginated-queries.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
id: paginated-queries
|
||||
title: Paginated / Lagged Queries
|
||||
ref: docs/framework/react/guides/paginated-queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example2'
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref, Ref } from 'vue'
|
||||
import { useQuery, keepPreviousData } from '@tanstack/vue-query'
|
||||
|
||||
const fetcher = (page: Ref<number>) =>
|
||||
fetch(
|
||||
`https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
|
||||
).then((response) => response.json())
|
||||
|
||||
const page = ref(1)
|
||||
const { isPending, isError, data, error, isFetching, isPlaceholderData } =
|
||||
useQuery({
|
||||
queryKey: ['projects', page],
|
||||
queryFn: () => fetcher(page),
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
const prevPage = () => {
|
||||
page.value = Math.max(page.value - 1, 1)
|
||||
}
|
||||
const nextPage = () => {
|
||||
if (!isPlaceholderData.value) {
|
||||
page.value = page.value + 1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Posts</h1>
|
||||
<p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>
|
||||
<button @click="prevPage">Prev Page</button>
|
||||
<button @click="nextPage">Next Page</button>
|
||||
<div v-if="isPending">Loading...</div>
|
||||
<div v-else-if="isError">An error has occurred: {{ error }}</div>
|
||||
<div v-else-if="data">
|
||||
<ul>
|
||||
<li v-for="item in data" :key="item.id">
|
||||
{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
38
docs/framework/vue/guides/parallel-queries.md
Normal file
38
docs/framework/vue/guides/parallel-queries.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: parallel-queries
|
||||
title: Parallel Queries
|
||||
ref: docs/framework/react/guides/parallel-queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// The following queries will execute in parallel
|
||||
const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
|
||||
const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
|
||||
const projectsQuery = useQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: fetchProjects,
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Info'
|
||||
[//]: # 'Info'
|
||||
[//]: # 'Example2'
|
||||
|
||||
```js
|
||||
const users = computed(...)
|
||||
const queries = computed(() => users.value.map(user => {
|
||||
return {
|
||||
queryKey: ['user', user.id],
|
||||
queryFn: () => fetchUserById(user.id),
|
||||
}
|
||||
})
|
||||
);
|
||||
const userQueries = useQueries({queries: queries})
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
38
docs/framework/vue/guides/placeholder-query-data.md
Normal file
38
docs/framework/vue/guides/placeholder-query-data.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: placeholder-query-data
|
||||
title: Placeholder Query Data
|
||||
ref: docs/framework/react/guides/placeholder-query-data.md
|
||||
---
|
||||
|
||||
[//]: # 'ExampleValue'
|
||||
|
||||
```tsx
|
||||
const result = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: () => fetch('/todos'),
|
||||
placeholderData: placeholderTodos,
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'ExampleValue'
|
||||
[//]: # 'Memoization'
|
||||
[//]: # 'Memoization'
|
||||
[//]: # 'ExampleCache'
|
||||
|
||||
```tsx
|
||||
const result = useQuery({
|
||||
queryKey: ['blogPost', blogPostId],
|
||||
queryFn: () => fetch(`/blogPosts/${blogPostId}`),
|
||||
placeholderData: () => {
|
||||
// Use the smaller/preview version of the blogPost from the 'blogPosts'
|
||||
// query as the placeholder data for this blogPost query
|
||||
return queryClient
|
||||
.getQueryData(['blogPosts'])
|
||||
?.find((d) => d.id === blogPostId)
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'ExampleCache'
|
||||
[//]: # 'Materials'
|
||||
[//]: # 'Materials'
|
||||
9
docs/framework/vue/guides/polling.md
Normal file
9
docs/framework/vue/guides/polling.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
id: polling
|
||||
title: Polling
|
||||
ref: docs/framework/react/guides/polling.md
|
||||
replace: { '@tanstack/react-query': '@tanstack/vue-query' }
|
||||
---
|
||||
|
||||
[//]: # 'ReactNative'
|
||||
[//]: # 'ReactNative'
|
||||
57
docs/framework/vue/guides/prefetching.md
Normal file
57
docs/framework/vue/guides/prefetching.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: prefetching
|
||||
title: Prefetching
|
||||
---
|
||||
|
||||
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, use `queryClient.query` or `queryClient.infiniteQuery` to warm the cache ahead of time:
|
||||
|
||||
[//]: # 'ExamplePrefetching'
|
||||
|
||||
```tsx
|
||||
import { noop } from '@tanstack/vue-query'
|
||||
|
||||
const prefetchTodos = async () => {
|
||||
// The results of this query will be cached like a normal query
|
||||
await queryClient
|
||||
.query({
|
||||
queryKey: ['todos'],
|
||||
queryFn: fetchTodos,
|
||||
})
|
||||
.catch(noop)
|
||||
}
|
||||
```
|
||||
|
||||
[//]: # 'ExamplePrefetching'
|
||||
|
||||
- If **fresh** data for this query is already in the cache, the data will not be fetched
|
||||
- If a `staleTime` is passed e.g. `queryClient.query({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })` and the data is older than the specified `staleTime`, the query will be fetched
|
||||
- As `useQuery` will retry fetches and handle errors, you can use `void` to ignore the promise from `query` and `.catch(noop)` to ignore errors.
|
||||
- If you want to always return cached data when it exists, use `staleTime: 'static'`
|
||||
- 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
|
||||
import { noop } from '@tanstack/vue-query'
|
||||
|
||||
const prefetchProjects = async () => {
|
||||
// The results of this query will be cached like a normal query
|
||||
await queryClient
|
||||
.infiniteQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: fetchProjects,
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
|
||||
pages: 3, // prefetch the first 3 pages
|
||||
})
|
||||
.catch(noop)
|
||||
}
|
||||
```
|
||||
|
||||
[//]: # '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.
|
||||
63
docs/framework/vue/guides/queries.md
Normal file
63
docs/framework/vue/guides/queries.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: queries
|
||||
title: Queries
|
||||
ref: docs/framework/react/guides/queries.md
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```ts
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example3'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: fetchTodoList,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<!-- We can assume by this point that `isSuccess === true` -->
|
||||
<ul v-else-if="data">
|
||||
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example3'
|
||||
[//]: # 'Example4'
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { status, data, error } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: fetchTodoList,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="status === 'pending'">Loading...</span>
|
||||
<span v-else-if="status === 'error'">Error: {{ error.message }}</span>
|
||||
<!-- also status === 'success', but "else" logic works, too -->
|
||||
<ul v-else-if="data">
|
||||
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example4'
|
||||
[//]: # 'Materials'
|
||||
[//]: # 'Materials'
|
||||
25
docs/framework/vue/guides/query-cancellation.md
Normal file
25
docs/framework/vue/guides/query-cancellation.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
id: query-cancellation
|
||||
title: Query Cancellation
|
||||
ref: docs/framework/react/guides/query-cancellation.md
|
||||
---
|
||||
|
||||
[//]: # 'Example7'
|
||||
|
||||
```ts
|
||||
const query = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: async ({ signal }) => {
|
||||
const resp = await fetch('/todos', { signal })
|
||||
return resp.json()
|
||||
},
|
||||
})
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
function onButtonClick() {
|
||||
queryClient.cancelQueries({ queryKey: ['todos'] })
|
||||
}
|
||||
```
|
||||
|
||||
[//]: # 'Example7'
|
||||
22
docs/framework/vue/guides/query-functions.md
Normal file
22
docs/framework/vue/guides/query-functions.md
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
id: query-functions
|
||||
title: Query Functions
|
||||
ref: docs/framework/react/guides/query-functions.md
|
||||
---
|
||||
|
||||
[//]: # 'Example4'
|
||||
|
||||
```js
|
||||
const result = useQuery({
|
||||
queryKey: ['todos', { status, page }],
|
||||
queryFn: fetchTodoList,
|
||||
})
|
||||
|
||||
// Access the key, status and page variables in your query function!
|
||||
function fetchTodoList({ queryKey }) {
|
||||
const [_key, { status, page }] = queryKey
|
||||
return new Promise()
|
||||
}
|
||||
```
|
||||
|
||||
[//]: # 'Example4'
|
||||
6
docs/framework/vue/guides/query-invalidation.md
Normal file
6
docs/framework/vue/guides/query-invalidation.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
id: query-invalidation
|
||||
title: Query Invalidation
|
||||
ref: docs/framework/react/guides/query-invalidation.md
|
||||
replace: { 'react-query': 'vue-query' }
|
||||
---
|
||||
21
docs/framework/vue/guides/query-keys.md
Normal file
21
docs/framework/vue/guides/query-keys.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
id: query-keys
|
||||
title: Query Keys
|
||||
ref: docs/framework/react/guides/query-keys.md
|
||||
---
|
||||
|
||||
[//]: # 'Example5'
|
||||
|
||||
```ts
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
function useTodos(todoId: Ref<string>) {
|
||||
const queryKey = ['todos', todoId]
|
||||
return useQuery({
|
||||
queryKey,
|
||||
queryFn: () => fetchTodoById(todoId.value),
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
[//]: # 'Example5'
|
||||
6
docs/framework/vue/guides/query-options.md
Normal file
6
docs/framework/vue/guides/query-options.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
id: query-options
|
||||
title: Query Options
|
||||
ref: docs/framework/react/guides/query-options.md
|
||||
replace: { '@tanstack/react-query': '@tanstack/vue-query' }
|
||||
---
|
||||
39
docs/framework/vue/guides/query-retries.md
Normal file
39
docs/framework/vue/guides/query-retries.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
id: query-retries
|
||||
title: Query Retries
|
||||
ref: docs/framework/react/guides/query-retries.md
|
||||
replace: { 'Provider': 'Plugin' }
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```tsx
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
// Make a specific query retry a certain number of times
|
||||
const result = useQuery({
|
||||
queryKey: ['todos', 1],
|
||||
queryFn: fetchTodoListPage,
|
||||
retry: 10, // Will retry failed requests 10 times before displaying an error
|
||||
})
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example2'
|
||||
|
||||
```ts
|
||||
import { VueQueryPlugin } from '@tanstack/vue-query'
|
||||
|
||||
const vueQueryPluginOptions = {
|
||||
queryClientConfig: {
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
[//]: # 'Example2'
|
||||
5
docs/framework/vue/guides/scroll-restoration.md
Normal file
5
docs/framework/vue/guides/scroll-restoration.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: scroll-restoration
|
||||
title: Scroll Restoration
|
||||
ref: docs/framework/react/guides/scroll-restoration.md
|
||||
---
|
||||
278
docs/framework/vue/guides/ssr.md
Normal file
278
docs/framework/vue/guides/ssr.md
Normal file
@@ -0,0 +1,278 @@
|
||||
---
|
||||
id: ssr
|
||||
title: SSR
|
||||
---
|
||||
|
||||
Vue Query supports prefetching multiple queries on the server and then _dehydrating_ those queries to the queryClient. This means the server can prerender markup that is immediately available on page load and as soon as JS is available, Vue Query can upgrade or _hydrate_ those queries with the full functionality of the library. This includes refetching those queries on the client if they have become stale since the time they were rendered on the server.
|
||||
|
||||
## Using Nuxt.js
|
||||
|
||||
### Nuxt 3
|
||||
|
||||
First create `vue-query.ts` file in your `plugins` directory with the following content:
|
||||
|
||||
```ts
|
||||
import type {
|
||||
DehydratedState,
|
||||
VueQueryPluginOptions,
|
||||
} from '@tanstack/vue-query'
|
||||
import {
|
||||
VueQueryPlugin,
|
||||
QueryClient,
|
||||
hydrate,
|
||||
dehydrate,
|
||||
} from '@tanstack/vue-query'
|
||||
// Nuxt 3 app aliases
|
||||
import { defineNuxtPlugin, useState } from '#imports'
|
||||
|
||||
export default defineNuxtPlugin((nuxt) => {
|
||||
const vueQueryState = useState<DehydratedState | null>('vue-query')
|
||||
|
||||
// Modify your Vue Query global settings here
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 5000 } },
|
||||
})
|
||||
const options: VueQueryPluginOptions = { queryClient }
|
||||
|
||||
nuxt.vueApp.use(VueQueryPlugin, options)
|
||||
|
||||
if (import.meta.server) {
|
||||
nuxt.hooks.hook('app:rendered', () => {
|
||||
vueQueryState.value = dehydrate(queryClient)
|
||||
})
|
||||
}
|
||||
|
||||
if (import.meta.client && vueQueryState.value !== null) {
|
||||
hydrate(queryClient, vueQueryState.value)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
|
||||
|
||||
- Prefetch all the queries that you need with `queryClient.query`, `queryClient.infiniteQuery`, or `suspense`
|
||||
|
||||
```ts
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const queryClient = useQueryClient()
|
||||
const { data } = useQuery({
|
||||
queryKey: ['test'],
|
||||
queryFn: fetcher,
|
||||
})
|
||||
|
||||
onServerPrefetch(async () => {
|
||||
await suspense()
|
||||
})
|
||||
|
||||
return { data }
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Nuxt 2
|
||||
|
||||
First create `vue-query.js` file in your `plugins` directory with the following content:
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import { VueQueryPlugin, QueryClient, hydrate } from '@tanstack/vue-query'
|
||||
|
||||
export default (context) => {
|
||||
// Modify your Vue Query global settings here
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 5000 } },
|
||||
})
|
||||
|
||||
if (process.server) {
|
||||
context.ssrContext.VueQuery = queryClient
|
||||
}
|
||||
|
||||
if (process.client) {
|
||||
Vue.use(VueQueryPlugin, { queryClient })
|
||||
|
||||
if (context.nuxtState && context.nuxtState.vueQueryState) {
|
||||
hydrate(queryClient, context.nuxtState.vueQueryState)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Add this plugin to your `nuxt.config.js`
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
...
|
||||
plugins: ['~/plugins/vue-query.js'],
|
||||
}
|
||||
```
|
||||
|
||||
Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
|
||||
|
||||
- Use `useContext` to get nuxt context
|
||||
- Use `useQueryClient` to get server-side instance of `queryClient`
|
||||
- Prefetch all the queries that you need with `queryClient.query`, `queryClient.infiniteQuery`, or `suspense`
|
||||
- Dehydrate `queryClient` to the `nuxtContext`
|
||||
|
||||
```vue
|
||||
// pages/todos.vue
|
||||
<template>
|
||||
<div>
|
||||
<button @click="refetch">Refetch</button>
|
||||
<p>{{ data }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
onServerPrefetch,
|
||||
useContext,
|
||||
} from '@nuxtjs/composition-api'
|
||||
import { useQuery, useQueryClient, dehydrate } from '@tanstack/vue-query'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// Get QueryClient either from SSR context, or Vue context
|
||||
const { ssrContext } = useContext()
|
||||
// Make sure to provide `queryClient` as a second parameter to `useQuery` calls
|
||||
const queryClient =
|
||||
(ssrContext != null && ssrContext.VueQuery) || useQueryClient()
|
||||
|
||||
// This will be prefetched and sent from the server
|
||||
const { data, refetch, suspense } = useQuery(
|
||||
{
|
||||
queryKey: ['todos'],
|
||||
queryFn: getTodos,
|
||||
},
|
||||
queryClient,
|
||||
)
|
||||
// This won't be prefetched, it will start fetching on client side
|
||||
const { data2 } = useQuery(
|
||||
{
|
||||
queryKey: ['todos2'],
|
||||
queryFn: getTodos,
|
||||
},
|
||||
queryClient,
|
||||
)
|
||||
|
||||
onServerPrefetch(async () => {
|
||||
await suspense()
|
||||
ssrContext.nuxt.vueQueryState = dehydrate(queryClient)
|
||||
})
|
||||
|
||||
return {
|
||||
refetch,
|
||||
data,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
As demonstrated, it's fine to prefetch some queries and let others fetch on the client. This means you can control what content server renders or not by adding or removing `queryClient.query` or `suspense` for a specific query.
|
||||
|
||||
## Using Vite SSR
|
||||
|
||||
Sync VueQuery client state with [vite-ssr](https://github.com/frandiox/vite-ssr) in order to serialize it in the DOM:
|
||||
|
||||
```js
|
||||
// main.js (entry point)
|
||||
import App from './App.vue'
|
||||
import viteSSR from 'vite-ssr/vue'
|
||||
import {
|
||||
QueryClient,
|
||||
VueQueryPlugin,
|
||||
hydrate,
|
||||
dehydrate,
|
||||
} from '@tanstack/vue-query'
|
||||
|
||||
export default viteSSR(App, { routes: [] }, ({ app, initialState }) => {
|
||||
// -- This is Vite SSR main hook, which is called once per request
|
||||
|
||||
// Create a fresh VueQuery client
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
// Sync initialState with the client state
|
||||
if (import.meta.env.SSR) {
|
||||
// Indicate how to access and serialize VueQuery state during SSR
|
||||
initialState.vueQueryState = { toJSON: () => dehydrate(queryClient) }
|
||||
} else {
|
||||
// Reuse the existing state in the browser
|
||||
hydrate(queryClient, initialState.vueQueryState)
|
||||
}
|
||||
|
||||
// Mount and provide the client to the app components
|
||||
app.use(VueQueryPlugin, { queryClient })
|
||||
})
|
||||
```
|
||||
|
||||
Then, call VueQuery from any component using Vue's `onServerPrefetch`:
|
||||
|
||||
```html
|
||||
<!-- MyComponent.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<button @click="refetch">Refetch</button>
|
||||
<p>{{ data }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import { onServerPrefetch } from 'vue'
|
||||
|
||||
// This will be prefetched and sent from the server
|
||||
const { refetch, data, suspense } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: getTodos,
|
||||
})
|
||||
|
||||
onServerPrefetch(suspense)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Tips, Tricks and Caveats
|
||||
|
||||
### Only successful queries are included in dehydration
|
||||
|
||||
Any query with an error is automatically excluded from dehydration. This means that the default behavior is to pretend these queries were never loaded on the server, usually showing a loading state instead, and retrying the queries on the queryClient. This happens regardless of error.
|
||||
|
||||
Sometimes this behavior is not desirable, maybe you want to render an error page with a correct status code instead on certain errors or queries. In those cases, use `queryClient.query` and catch any errors to handle those manually.
|
||||
|
||||
### Staleness is measured from when the query was fetched on the server
|
||||
|
||||
A query is considered stale depending on when it was `dataUpdatedAt`. A caveat here is that the server needs to have the correct time for this to work properly, but UTC time is used, so timezones do not factor into this.
|
||||
|
||||
Because `staleTime` defaults to `0`, queries will be refetched in the background on page load by default. You might want to use a higher `staleTime` to avoid this double fetching, especially if you don't cache your markup.
|
||||
|
||||
This refetching of stale queries is a perfect match when caching markup in a CDN! You can set the cache time of the page itself decently high to avoid having to re-render pages on the server, but configure the `staleTime` of the queries lower to make sure data is refetched in the background as soon as a user visits the page. Maybe you want to cache the pages for a week, but refetch the data automatically on page load if it's older than a day?
|
||||
|
||||
### 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 `gcTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
|
||||
|
||||
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/classes/QueryClient.md#clear) after the request is handled and dehydrated state has been sent to the client.
|
||||
|
||||
## `dehydrate`/`hydrate` options
|
||||
|
||||
`dehydrate` and `hydrate` are re-exported from `@tanstack/query-core`, so they're available directly from `@tanstack/vue-query` — as used throughout this guide.
|
||||
|
||||
`dehydrate(client, options?)` accepts a `DehydrateOptions` object:
|
||||
|
||||
- `shouldDehydrateMutation: (mutation) => boolean` — whether to dehydrate a given mutation. Called for each mutation in the cache; defaults to only including paused mutations. To extend the default behavior instead of replacing it, import and call `defaultShouldDehydrateMutation` as part of your return statement.
|
||||
- `shouldDehydrateQuery: (query) => boolean` — whether to dehydrate a given query. Called for each query in the cache; defaults to only including successful queries (see [above](#only-successful-queries-are-included-in-dehydration)). Extend it the same way, with `defaultShouldDehydrateQuery`.
|
||||
- `serializeData?: (data) => any` — transforms (serializes) data during dehydration.
|
||||
- `shouldRedactErrors?: (error) => boolean` — only applies to queries still `pending` at dehydration time, whose promise is dehydrated too: decides whether to redact the error if that promise later rejects. Defaults to redacting all such errors. Does **not** apply to `query.state.error` on already-settled queries — that error is included in the dehydrated state as-is, so sanitize it yourself via `shouldDehydrateQuery` if it may contain sensitive data.
|
||||
|
||||
`hydrate(client, dehydratedState, options?)` accepts a `HydrateOptions` object:
|
||||
|
||||
- `defaultOptions.mutations` — default mutation options for the hydrated mutations.
|
||||
- `defaultOptions.queries` — default query options for the hydrated queries.
|
||||
- `defaultOptions.deserializeData?: (data) => any` — transforms (deserializes) data before it's put into the cache.
|
||||
|
||||
One caveat with `hydrate`: if a query being hydrated already exists in the cache, it's only overwritten when the incoming data is newer than what's already there — otherwise it's silently skipped.
|
||||
|
||||
Alternatively, you can set a smaller `gcTime`.
|
||||
57
docs/framework/vue/guides/suspense.md
Normal file
57
docs/framework/vue/guides/suspense.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: suspense
|
||||
title: Suspense (experimental)
|
||||
---
|
||||
|
||||
> NOTE: Suspense mode for Vue Query is experimental, same as Vue's Suspense itself. These APIs WILL change and should not be used in production unless you lock both your Vue and Vue Query versions to patch-level versions that are compatible with each other.
|
||||
|
||||
Vue Query can also be used with Vue's new [Suspense](https://vuejs.org/guide/built-ins/suspense.html) API's.
|
||||
|
||||
To do that you need to wrap your suspendable component with `Suspense` component provided by Vue
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import SuspendableComponent from './SuspendableComponent.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<SuspendableComponent />
|
||||
</template>
|
||||
<template #fallback>
|
||||
<div>Loading...</div>
|
||||
</template>
|
||||
</Suspense>
|
||||
</template>
|
||||
```
|
||||
|
||||
And change your `setup` function in suspendable component to be `async`. Then you can use async `suspense` function that is provided by `vue-query`.
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const todoFetcher = async () =>
|
||||
await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
|
||||
response.json(),
|
||||
)
|
||||
export default defineComponent({
|
||||
name: 'SuspendableComponent',
|
||||
async setup() {
|
||||
const { data, suspense } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: todoFetcher,
|
||||
})
|
||||
await suspense()
|
||||
|
||||
return { data }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Fetch-on-render vs Render-as-you-fetch
|
||||
|
||||
Out of the box, Vue Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. This means that when your components attempt to mount, they will trigger query fetching and suspend, but only once you have imported them and mounted them. If you want to take it to the next level and implement a **Render-as-you-fetch** model, we recommend implementing [Prefetching](./prefetching) on routing callbacks and/or user interactions events to start loading queries before they are mounted and hopefully even before you start importing or mounting their parent components.
|
||||
4
docs/framework/vue/guides/testing.md
Normal file
4
docs/framework/vue/guides/testing.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
id: testing
|
||||
title: Testing
|
||||
---
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: updates-from-mutation-responses
|
||||
title: Updates from Mutation Responses
|
||||
ref: docs/framework/react/guides/updates-from-mutation-responses.md
|
||||
---
|
||||
25
docs/framework/vue/guides/window-focus-refetching.md
Normal file
25
docs/framework/vue/guides/window-focus-refetching.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
id: window-focus-refetching
|
||||
title: Window Focus Refetching
|
||||
ref: docs/framework/react/guides/window-focus-refetching.md
|
||||
replace: { '@tanstack/react-query': '@tanstack/vue-query' }
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
```js
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
queryClientConfig: {
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
app.use(VueQueryPlugin, vueQueryPluginOptions)
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'ReactNative'
|
||||
[//]: # 'ReactNative'
|
||||
67
docs/framework/vue/installation.md
Normal file
67
docs/framework/vue/installation.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: installation
|
||||
title: Installation
|
||||
---
|
||||
|
||||
You can install Vue Query via [NPM](https://npmjs.com).
|
||||
|
||||
### NPM
|
||||
|
||||
```bash
|
||||
npm i @tanstack/vue-query
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
pnpm add @tanstack/vue-query
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add @tanstack/vue-query
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
bun add @tanstack/vue-query
|
||||
```
|
||||
|
||||
> Wanna give it a spin before you download? Try out the [basic](./examples/basic) example!
|
||||
|
||||
Vue Query is compatible with Vue 2.x and 3.x
|
||||
|
||||
> If you are using Vue 2.6, make sure to also setup [@vue/composition-api](https://github.com/vuejs/composition-api)
|
||||
|
||||
### Vue Query Initialization
|
||||
|
||||
Before using Vue Query, you need to initialize it using `VueQueryPlugin`
|
||||
|
||||
```tsx
|
||||
import { VueQueryPlugin } from '@tanstack/vue-query'
|
||||
|
||||
app.use(VueQueryPlugin)
|
||||
```
|
||||
|
||||
### Use of Composition API with `<script setup>`
|
||||
|
||||
All examples in our documentation use [`<script setup>`](https://staging.vuejs.org/api/sfc-script-setup.html) syntax.
|
||||
|
||||
Vue 2 users can also use that syntax using [this plugin](https://github.com/antfu/unplugin-vue2-script-setup). Please check the plugin documentation for installation details.
|
||||
|
||||
If you are not a fan of `<script setup>` syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under `setup()` function and returning the values used in the template.
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { isPending, isFetching, isError, data, error } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: getTodos,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>...</template>
|
||||
```
|
||||
16
docs/framework/vue/overview.md
Normal file
16
docs/framework/vue/overview.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
id: overview
|
||||
title: Overview
|
||||
ref: docs/framework/react/overview.md
|
||||
replace: { 'React': 'Vue', 'react-query': 'vue-query' }
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Example'
|
||||
[//]: # 'Materials'
|
||||
|
||||
## You talked me into it, so what now?
|
||||
|
||||
- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](./reference/functions/useQuery)
|
||||
|
||||
[//]: # 'Materials'
|
||||
5
docs/framework/vue/plugins/broadcastQueryClient.md
Normal file
5
docs/framework/vue/plugins/broadcastQueryClient.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
id: broadcastQueryClient
|
||||
title: broadcastQueryClient (Experimental)
|
||||
ref: docs/framework/react/plugins/broadcastQueryClient.md
|
||||
---
|
||||
200
docs/framework/vue/plugins/createPersister.md
Normal file
200
docs/framework/vue/plugins/createPersister.md
Normal file
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: createPersister
|
||||
title: experimental_createQueryPersister
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
This utility comes as a separate package and is available under the `'@tanstack/query-persist-client-core'` import.
|
||||
|
||||
```bash
|
||||
npm install @tanstack/query-persist-client-core
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
pnpm add @tanstack/query-persist-client-core
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add @tanstack/query-persist-client-core
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
bun add @tanstack/query-persist-client-core
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
- Import the `experimental_createQueryPersister` function
|
||||
- Create a new `experimental_createQueryPersister`
|
||||
- you can pass any `storage` to it that adheres to the `AsyncStorage` interface
|
||||
- Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance.
|
||||
- If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used.
|
||||
- If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted.
|
||||
- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310
|
||||
|
||||
This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run.
|
||||
|
||||
Garbage collecting a Query from memory **does not** affect the persisted data. That means Queries can be kept in memory for a shorter period of time to be more **memory efficient**. If they are used the next time, they will just be restored from the persistent storage again.
|
||||
|
||||
```tsx
|
||||
import { QueryClient } from '@tanstack/vue-query'
|
||||
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
|
||||
|
||||
const persister = experimental_createQueryPersister({
|
||||
storage: AsyncStorage,
|
||||
maxAge: 1000 * 60 * 60 * 12, // 12 hours
|
||||
})
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
gcTime: 1000 * 30, // 30 seconds
|
||||
persister: persister.persisterFn,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Adapted defaults
|
||||
|
||||
The `createPersister` plugin technically wraps the `queryFn`, so it doesn't restore if the `queryFn` doesn't run. In that way, it acts as a caching layer between the Query and the network. Thus, the `networkMode` defaults to `'offlineFirst'` when a persister is used, so that restoring from the persistent storage can also happen even if there is no network connection.
|
||||
|
||||
## Additional utilities
|
||||
|
||||
Invoking `experimental_createQueryPersister` returns additional utilities in addition to `persisterFn` for easier implementation of userland functionalities.
|
||||
|
||||
### `persistQueryByKey(queryKey: QueryKey, queryClient: QueryClient): Promise<void>`
|
||||
|
||||
This function will persist `Query` to storage and key defined when creating persister.
|
||||
This utility might be used along `setQueryData` to persist optimistic update to storage without waiting for invalidation.
|
||||
|
||||
```tsx
|
||||
const persister = experimental_createQueryPersister({
|
||||
storage: AsyncStorage,
|
||||
maxAge: 1000 * 60 * 60 * 12, // 12 hours
|
||||
})
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
useMutation({
|
||||
mutationFn: updateTodo,
|
||||
onMutate: async (newTodo) => {
|
||||
...
|
||||
// Optimistically update to the new value
|
||||
queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
|
||||
// And persist it to storage
|
||||
persister.persistQueryByKey(['todos'], queryClient)
|
||||
...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### `retrieveQuery<T>(queryHash: string): Promise<T | undefined>`
|
||||
|
||||
This function would attempt to retrieve persisted query by `queryHash`.
|
||||
If `query` is `expired`, `busted` or `malformed` it would be removed from the storage instead, and `undefined` would be returned.
|
||||
|
||||
### `persisterGc(): Promise<void>`
|
||||
|
||||
This function can be used to sporadically clean up storage from `expired`, `busted` or `malformed` entries.
|
||||
|
||||
For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.
|
||||
For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
|
||||
|
||||
### `restoreQueries(queryClient: QueryClient, filters): Promise<void>`
|
||||
|
||||
This function can be used to restore queries that are currently stored by persister.
|
||||
For example when your app is starting up in offline mode, or you want all or only specific data from previous session to be immediately available without intermediate `loading` state.
|
||||
|
||||
The filter object supports the following properties:
|
||||
|
||||
- `queryKey?: QueryKey`
|
||||
- Set this property to define a query key to match on.
|
||||
- `exact?: boolean`
|
||||
- If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed.
|
||||
|
||||
For this function to work, your storage must expose `entries` method that would return a `key-value tuple array`.
|
||||
For example `Object.entries(localStorage)` for `localStorage` or `entries` from `idb-keyval`.
|
||||
|
||||
## API
|
||||
|
||||
### `experimental_createQueryPersister`
|
||||
|
||||
```tsx
|
||||
experimental_createQueryPersister(options: StoragePersisterOptions)
|
||||
```
|
||||
|
||||
#### `Options`
|
||||
|
||||
```tsx
|
||||
export interface StoragePersisterOptions {
|
||||
/** The storage client used for setting and retrieving items from cache.
|
||||
* For SSR pass in `undefined`.
|
||||
*/
|
||||
storage: AsyncStorage | Storage | undefined | null
|
||||
/**
|
||||
* How to serialize the data to storage.
|
||||
* @default `JSON.stringify`
|
||||
*/
|
||||
serialize?: (persistedQuery: PersistedQuery) => string
|
||||
/**
|
||||
* How to deserialize the data from storage.
|
||||
* @default `JSON.parse`
|
||||
*/
|
||||
deserialize?: (cachedString: string) => PersistedQuery
|
||||
/**
|
||||
* A unique string that can be used to forcefully invalidate existing caches,
|
||||
* if they do not share the same buster string
|
||||
*/
|
||||
buster?: string
|
||||
/**
|
||||
* The max-allowed age of the cache in milliseconds.
|
||||
* If a persisted cache is found that is older than this
|
||||
* time, it will be discarded
|
||||
* @default 24 hours
|
||||
*/
|
||||
maxAge?: number
|
||||
/**
|
||||
* Prefix to be used for storage key.
|
||||
* Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
|
||||
*/
|
||||
prefix?: string
|
||||
/**
|
||||
* If set to `true`, the query will refetch on successful query restoration if the data is stale.
|
||||
* If set to `false`, the query will not refetch on successful query restoration.
|
||||
* If set to `'always'`, the query will always refetch on successful query restoration.
|
||||
* Defaults to `true`.
|
||||
*/
|
||||
refetchOnRestore?: boolean | 'always'
|
||||
/**
|
||||
* Filters to narrow down which Queries should be persisted.
|
||||
*/
|
||||
filters?: QueryFilters
|
||||
}
|
||||
|
||||
interface AsyncStorage<TStorageValue = string> {
|
||||
getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
|
||||
setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
|
||||
removeItem: (key: string) => MaybePromise<void>
|
||||
entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
|
||||
}
|
||||
```
|
||||
|
||||
The default options are:
|
||||
|
||||
```tsx
|
||||
{
|
||||
prefix = 'tanstack-query',
|
||||
maxAge = 1000 * 60 * 60 * 24,
|
||||
serialize = JSON.stringify,
|
||||
deserialize = JSON.parse,
|
||||
refetchOnRestore = true,
|
||||
}
|
||||
```
|
||||
53
docs/framework/vue/quick-start.md
Normal file
53
docs/framework/vue/quick-start.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
id: quick-start
|
||||
title: Quick Start
|
||||
ref: docs/framework/react/quick-start.md
|
||||
replace: { 'React': 'Vue', 'react-query': 'vue-query' }
|
||||
---
|
||||
|
||||
[//]: # 'Example'
|
||||
|
||||
If you're looking for a fully functioning example, please have a look at our [basic codesandbox example](./examples/basic)
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'
|
||||
|
||||
// Access QueryClient instance
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
// Query
|
||||
const { isPending, isError, data, error } = useQuery({
|
||||
queryKey: ['todos'],
|
||||
queryFn: getTodos,
|
||||
})
|
||||
|
||||
// Mutation
|
||||
const mutation = useMutation({
|
||||
mutationFn: postTodo,
|
||||
onSuccess: () => {
|
||||
// Invalidate and refetch
|
||||
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
||||
},
|
||||
})
|
||||
|
||||
function onButtonClick() {
|
||||
mutation.mutate({
|
||||
id: Date.now(),
|
||||
title: 'Do Laundry',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<!-- We can assume by this point that `isSuccess === true` -->
|
||||
<ul v-else>
|
||||
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
|
||||
</ul>
|
||||
<button @click="onButtonClick">Add Todo</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
[//]: # 'Example'
|
||||
173
docs/framework/vue/reactivity.md
Normal file
173
docs/framework/vue/reactivity.md
Normal file
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: reactivity
|
||||
title: Reactivity
|
||||
---
|
||||
|
||||
Vue uses the [the signals paradigm](https://vuejs.org/guide/extras/reactivity-in-depth.html#connection-to-signals) to handle and track reactivity. A key feature of
|
||||
this system is the reactive system only triggers updates on specifically watched reactive properties. A consequence of this is you also need to ensure that the queries are updated when values they consume are updated.
|
||||
|
||||
## Keeping Queries Reactive
|
||||
|
||||
When creating a composable for a query your first choice may be to write it like so:
|
||||
|
||||
```ts
|
||||
export function useUserProjects(userId: string) {
|
||||
return useQuery(
|
||||
queryKey: ['userProjects', userId],
|
||||
queryFn: () => api.fetchUserProjects(userId),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
We might consume this composable like so:
|
||||
|
||||
```ts
|
||||
// Reactive user ID ref.
|
||||
const userId = ref('1')
|
||||
// Fetches the user 1's projects.
|
||||
const { data: projects } = useUserProjects(userId.value)
|
||||
|
||||
const onChangeUser = (newUserId: string) => {
|
||||
// Edits the userId, but the query will not re-fetch.
|
||||
userId.value = newUserId
|
||||
}
|
||||
```
|
||||
|
||||
This code will not work as intended. This is because we are extracting the value from the userId ref directly. Vue-query is not tracking the `userId` `ref` so it has no way of knowing when the value changes.
|
||||
|
||||
Luckily, the fix for this is trivial. The value must be made trackable in the query key. We can Just accept the `ref` directly in the composable and place it in the query key:
|
||||
|
||||
```ts
|
||||
export function useUserProjects(userId: Ref<string>) {
|
||||
return useQuery(
|
||||
queryKey: ['userProjects', userId],
|
||||
queryFn: () => api.fetchUserProjects(userId.value),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Now the query will re-fetch when the `userId` changes.
|
||||
|
||||
```ts
|
||||
const onChangeUser = (newUserId: string) => {
|
||||
// Query refetches data with new user ID!
|
||||
userId.value = newUserId
|
||||
}
|
||||
```
|
||||
|
||||
In vue query any reactive properties within a query key are tracked for changes automatically. This allows vue-query to refetch data whenever the
|
||||
parameters for a given request change.
|
||||
|
||||
### Accounting for Non-Reactive Queries
|
||||
|
||||
While far less likely, sometimes passing non-reactive variables is intentional. For example, some entities only need to be fetched once and don't need tracking or we invalidate a mutation a query options object after a mutation.
|
||||
If we use our custom composable defined above the usage in this case feels a bit off:
|
||||
|
||||
```ts
|
||||
const { data: projects } = useUserProjects(ref('1'))
|
||||
```
|
||||
|
||||
We have to create an intermediate `ref` just to make the parameter type-compatible. We can do better here. Let's instead update our composable to accept both plain values and reactive values:
|
||||
|
||||
```ts
|
||||
export function useUserProjects(userId: MaybeRef<string>) {
|
||||
return useQuery(
|
||||
queryKey: ['userProjects', userId],
|
||||
queryFn: () => api.fetchUserProjects(toValue(userId)),
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Now we can use the composable with both plain values and refs:
|
||||
|
||||
```ts
|
||||
// Fetches the user 1's projects, userId is not expected to change.
|
||||
const { data: projects } = useUserProjects('1')
|
||||
|
||||
// Fetches the user 1's projects, queries will react to changes on userId.
|
||||
const userId = ref('1')
|
||||
|
||||
// Make some changes to userId...
|
||||
|
||||
// Query re-fetches based on any changes to userId.
|
||||
const { data: projects } = useUserProjects(userId)
|
||||
```
|
||||
|
||||
### Using Derived State inside Queries
|
||||
|
||||
It's quite common to derive some new reactive state from another source of reactive state. Commonly, this problem manifests in situations where you deal with component props. Let's assume our `userId` is a prop passed to a component:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
userId: string
|
||||
}>()
|
||||
</script>
|
||||
```
|
||||
|
||||
You may be tempted to use the prop directly in the query like so:
|
||||
|
||||
```ts
|
||||
// Won't react to changes in props.userId.
|
||||
const { data: projects } = useUserProjects(props.userId)
|
||||
```
|
||||
|
||||
However, similar to the first example, this is not reactive. Property access on `reactive` variables causes reactivity to be lost. We can fix this by making this derived state reactive via a `computed`:
|
||||
|
||||
```ts
|
||||
const userId = computed(() => props.userId)
|
||||
|
||||
// Reacts to changes in props.userId.
|
||||
const { data: projects } = useUserProjects(userId)
|
||||
```
|
||||
|
||||
This works as expected, however, this solution isn't always the most optimal. Aside from the introduction of an intermediate variable, we also create a memoized value that is somewhat unnecessary. For trivial cases of simple property access `computed` is an optimization with no real benefit. In these cases a more appropriate solution is to use [reactive getters](https://blog.vuejs.org/posts/vue-3-3#better-getter-support-with-toref-and-tovalue). Reactive getters are simply functions that return a value based on some reactive state, similar to how `computed` works. Unlike `computed`, reactive getters do not memoize their values so it makes it a good candidate for simple property access.
|
||||
|
||||
Let's once again refactor our composable, but this time we'll have it accept a `ref`, plain value, or a reactive getter:
|
||||
|
||||
```ts
|
||||
export function useUserProjects(userId: MaybeRefOrGetter<string>) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Let's adjust our usage and now use a reactive getter:
|
||||
|
||||
```ts
|
||||
// Reacts to changes in props.userId. No `computed` needed!
|
||||
const { data: projects } = useUserProjects(() => props.userId)
|
||||
```
|
||||
|
||||
This gives us a terse syntax and the reactivity we need without any unneeded memoization overhead.
|
||||
|
||||
### Other tracked Query Options
|
||||
|
||||
Above, we only touched one query option that tracks reactive dependencies. However, in addition to `queryKey`, `enabled` also allows
|
||||
the use of reactive values. This comes in handy in situations where you want to control the fetching of a query based on some derived state:
|
||||
|
||||
```ts
|
||||
export function useUserProjects(userId: MaybeRef<string>) {
|
||||
return useQuery(
|
||||
queryKey: ['userProjects', userId],
|
||||
queryFn: () => api.fetchUserProjects(toValue(userId)),
|
||||
enabled: () => userId.value === activeUserId.value,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
More details on this option can be found on the [useQuery reference](./reference/functions/useQuery.md) page.
|
||||
|
||||
### Immutability
|
||||
|
||||
Results from `useQuery` are always immutable. This is necessary for performance and caching purposes. If you need to mutate a value returned from `useQuery`, you must create a copy of the data.
|
||||
|
||||
One implication of this design is that passing values from `useQuery` to a two-way binding such as `v-model` will not work. You must create a mutable copy of the data before attempting to update it in place.
|
||||
|
||||
## Key Takeaways
|
||||
|
||||
- `enabled` and `queryKey` are the two query options that can accept reactive values.
|
||||
- Pass query option that accept all three types of values in Vue: refs, plain values, and reactive getters.
|
||||
- If you expect a query to react to changes based on the values it consumes, ensure that the values are reactive. (i.e. pass in refs directly to the query, or use reactive getters)
|
||||
- If you don't need a query to be reactive pass in a plain value.
|
||||
- For trivial derived state such as property access consider using a reactive getter in place of a `computed`.
|
||||
- Results from `useQuery` are always immutable.
|
||||
273
docs/framework/vue/reference/classes/CancelledError.md
Normal file
273
docs/framework/vue/reference/classes/CancelledError.md
Normal file
@@ -0,0 +1,273 @@
|
||||
---
|
||||
id: CancelledError
|
||||
title: CancelledError
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/retryer.ts:77](https://github.com/TanStack/query/blob/main/packages/query-core/src/retryer.ts#L77)
|
||||
|
||||
The error thrown by a `Retryer` (and surfaced to `query.promise`/`mutation`) when a fetch is cancelled, e.g. via
|
||||
`query.cancel()`. `revert`, if `true`, tells the caller to restore the state the query was in before the fetch
|
||||
started instead of surfacing the error. `silent`, if `true`, tells the caller to suppress this error and instead
|
||||
resolve with the promise of the fetch that triggered the cancellation.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
query.cancel()
|
||||
|
||||
try {
|
||||
await query.promise
|
||||
} catch (error) {
|
||||
if (error instanceof CancelledError) {
|
||||
// the fetch was cancelled, e.g. via `query.cancel()`
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Error`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new CancelledError(options?): CancelledError;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/retryer.ts:80](https://github.com/TanStack/query/blob/main/packages/query-core/src/retryer.ts#L80)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`CancelOptions`](../interfaces/CancelOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`CancelledError`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Error.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### cause?
|
||||
|
||||
```ts
|
||||
optional cause: unknown;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/typescript@6.0.3/node\_modules/typescript/lib/lib.es2022.error.d.ts:24
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.cause
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### message
|
||||
|
||||
```ts
|
||||
message: string;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/typescript@6.0.3/node\_modules/typescript/lib/lib.es5.d.ts:1075
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.message
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### name
|
||||
|
||||
```ts
|
||||
name: string;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/typescript@6.0.3/node\_modules/typescript/lib/lib.es5.d.ts:1074
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.name
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### revert?
|
||||
|
||||
```ts
|
||||
optional revert: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/retryer.ts:78](https://github.com/TanStack/query/blob/main/packages/query-core/src/retryer.ts#L78)
|
||||
|
||||
***
|
||||
|
||||
### silent?
|
||||
|
||||
```ts
|
||||
optional silent: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/retryer.ts:79](https://github.com/TanStack/query/blob/main/packages/query-core/src/retryer.ts#L79)
|
||||
|
||||
***
|
||||
|
||||
### stack?
|
||||
|
||||
```ts
|
||||
optional stack: string;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/typescript@6.0.3/node\_modules/typescript/lib/lib.es5.d.ts:1076
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.stack
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### stackTraceLimit
|
||||
|
||||
```ts
|
||||
static stackTraceLimit: number;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/@types+node@22.19.15/node\_modules/@types/node/globals.d.ts:68
|
||||
|
||||
The `Error.stackTraceLimit` property specifies the number of stack frames
|
||||
collected by a stack trace (whether generated by `new Error().stack` or
|
||||
`Error.captureStackTrace(obj)`).
|
||||
|
||||
The default value is `10` but may be set to any valid JavaScript number. Changes
|
||||
will affect any stack trace captured _after_ the value has been changed.
|
||||
|
||||
If set to a non-number value, or set to a negative number, stack traces will
|
||||
not capture any frames.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.stackTraceLimit
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### captureStackTrace()
|
||||
|
||||
```ts
|
||||
static captureStackTrace(targetObject, constructorOpt?): void;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/@types+node@22.19.15/node\_modules/@types/node/globals.d.ts:52
|
||||
|
||||
Creates a `.stack` property on `targetObject`, which when accessed returns
|
||||
a string representing the location in the code at which
|
||||
`Error.captureStackTrace()` was called.
|
||||
|
||||
```js
|
||||
const myObject = {};
|
||||
Error.captureStackTrace(myObject);
|
||||
myObject.stack; // Similar to `new Error().stack`
|
||||
```
|
||||
|
||||
The first line of the trace will be prefixed with
|
||||
`${myObject.name}: ${myObject.message}`.
|
||||
|
||||
The optional `constructorOpt` argument accepts a function. If given, all frames
|
||||
above `constructorOpt`, including `constructorOpt`, will be omitted from the
|
||||
generated stack trace.
|
||||
|
||||
The `constructorOpt` argument is useful for hiding implementation
|
||||
details of error generation from the user. For instance:
|
||||
|
||||
```js
|
||||
function a() {
|
||||
b();
|
||||
}
|
||||
|
||||
function b() {
|
||||
c();
|
||||
}
|
||||
|
||||
function c() {
|
||||
// Create an error without stack trace to avoid calculating the stack trace twice.
|
||||
const { stackTraceLimit } = Error;
|
||||
Error.stackTraceLimit = 0;
|
||||
const error = new Error();
|
||||
Error.stackTraceLimit = stackTraceLimit;
|
||||
|
||||
// Capture the stack trace above function b
|
||||
Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
|
||||
throw error;
|
||||
}
|
||||
|
||||
a();
|
||||
```
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### targetObject
|
||||
|
||||
`object`
|
||||
|
||||
##### constructorOpt?
|
||||
|
||||
`Function`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.captureStackTrace
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### prepareStackTrace()
|
||||
|
||||
```ts
|
||||
static prepareStackTrace(err, stackTraces): any;
|
||||
```
|
||||
|
||||
Defined in: node\_modules/.pnpm/@types+node@22.19.15/node\_modules/@types/node/globals.d.ts:56
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### err
|
||||
|
||||
`Error`
|
||||
|
||||
##### stackTraces
|
||||
|
||||
`CallSite`[]
|
||||
|
||||
#### Returns
|
||||
|
||||
`any`
|
||||
|
||||
#### See
|
||||
|
||||
https://v8.dev/docs/stack-trace-api#customizing-stack-traces
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Error.prepareStackTrace
|
||||
```
|
||||
665
docs/framework/vue/reference/classes/InfiniteQueryObserver.md
Normal file
665
docs/framework/vue/reference/classes/InfiniteQueryObserver.md
Normal file
@@ -0,0 +1,665 @@
|
||||
---
|
||||
id: InfiniteQueryObserver
|
||||
title: InfiniteQueryObserver
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:41](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L41)
|
||||
|
||||
An `InfiniteQueryObserver` extends `QueryObserver` to observe and switch
|
||||
between infinite queries. It augments the base `QueryObserverResult` with
|
||||
infinite-query-specific fields and methods, such as `hasNextPage` and
|
||||
`fetchNextPage`, and is the primitive that framework adapters (e.g.
|
||||
`useInfiniteQuery`) build their hooks on top of.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const observer = new InfiniteQueryObserver(queryClient, {
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
})
|
||||
|
||||
const unsubscribe = observer.subscribe((result) => console.log(result))
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- [`QueryObserver`](QueryObserver.md)\<`TQueryFnData`, `TError`, `TData`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`\>
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>(client, options): InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:83](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L83)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
##### options
|
||||
|
||||
[`InfiniteQueryObserverOptions`](../interfaces/InfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`InfiniteQueryObserver`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`constructor`](QueryObserver.md#constructor)
|
||||
|
||||
## Properties
|
||||
|
||||
### fetch
|
||||
|
||||
```ts
|
||||
protected fetch: ReplaceReturnType<(fetchOptions) => Promise<QueryObserverResult<TData, TError>>, Promise<InfiniteQueryObserverResult<TData, TError>>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:72](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L72)
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
QueryObserver.fetch
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getCurrentResult
|
||||
|
||||
```ts
|
||||
getCurrentResult: ReplaceReturnType<() => QueryObserverResult<TData, TError>, InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:60](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L60)
|
||||
|
||||
Returns the most recently computed `QueryObserverResult` for the
|
||||
observed query. This is a point-in-time read; to be notified of updates
|
||||
as they happen, subscribe to the observer instead (its inherited
|
||||
`subscribe` method).
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = observer.getCurrentResult()
|
||||
console.log(result.status, result.data)
|
||||
```
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
QueryObserver.getCurrentResult
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<QueryObserverListener<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`listeners`](QueryObserver.md#listeners)
|
||||
|
||||
***
|
||||
|
||||
### options
|
||||
|
||||
```ts
|
||||
options: QueryObserverOptions<TQueryFnData, TError, TData, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:89](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L89)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`options`](QueryObserver.md#options)
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe: (listener) => () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:55](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L55)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`InfiniteQueryObserverListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
QueryObserver.subscribe
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### bindMethods()
|
||||
|
||||
```ts
|
||||
protected bindMethods(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:96](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L96)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`bindMethods`](QueryObserver.md#bindmethods)
|
||||
|
||||
***
|
||||
|
||||
### createResult()
|
||||
|
||||
```ts
|
||||
protected createResult(query, options): InfiniteQueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:201](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L201)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### query
|
||||
|
||||
[`Query`](Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>
|
||||
|
||||
##### options
|
||||
|
||||
[`InfiniteQueryObserverOptions`](../interfaces/InfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`createResult`](QueryObserver.md#createresult)
|
||||
|
||||
***
|
||||
|
||||
### destroy()
|
||||
|
||||
```ts
|
||||
destroy(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:161](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L161)
|
||||
|
||||
Stops observing the current query: clears all listeners, cancels the
|
||||
stale and refetch-interval timers, and removes this observer from the
|
||||
query it was observing.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`destroy`](QueryObserver.md#destroy)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage(options?): Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:161](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L161)
|
||||
|
||||
Fetches the next page of the infinite query and returns a promise that
|
||||
resolves with the resulting `InfiniteQueryObserverResult`. The page
|
||||
param used for the fetch is determined by `getNextPageParam`, which
|
||||
receives the current pages/page params and whose result also determines
|
||||
`hasNextPage`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](../interfaces/FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const { hasNextPage } = observer.getCurrentResult()
|
||||
|
||||
if (hasNextPage) {
|
||||
await observer.fetchNextPage()
|
||||
}
|
||||
```
|
||||
|
||||
#### See
|
||||
|
||||
[InfiniteQueryObserver#fetchPreviousPage](#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchOptimistic()
|
||||
|
||||
```ts
|
||||
fetchOptimistic(options): Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:395](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L395)
|
||||
|
||||
Fetches a query defined by the given options without affecting this
|
||||
observer's own tracked query or result, and returns a promise that
|
||||
resolves with the `QueryObserverResult` for that fetch. This is useful
|
||||
for prefetching data that another observer (e.g. a query about to be
|
||||
navigated to) will need, ahead of time.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = await observer.fetchOptimistic({
|
||||
queryKey: ['posts', 2],
|
||||
queryFn: () => fetchPost(2),
|
||||
})
|
||||
console.log(result.data)
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`fetchOptimistic`](QueryObserver.md#fetchoptimistic)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage(options?): Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:190](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L190)
|
||||
|
||||
Fetches the previous page of the infinite query and returns a promise
|
||||
that resolves with the resulting `InfiniteQueryObserverResult`. The page
|
||||
param used for the fetch is determined by `getPreviousPageParam`, which
|
||||
receives the current pages/page params and whose result also determines
|
||||
`hasPreviousPage`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](../interfaces/FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const { hasPreviousPage } = observer.getCurrentResult()
|
||||
|
||||
if (hasPreviousPage) {
|
||||
await observer.fetchPreviousPage()
|
||||
}
|
||||
```
|
||||
|
||||
#### See
|
||||
|
||||
[InfiniteQueryObserver#fetchNextPage](#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### getCurrentQuery()
|
||||
|
||||
```ts
|
||||
getCurrentQuery(): Query<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:357](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L357)
|
||||
|
||||
Returns the `Query` instance this observer is currently observing.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`TQueryFnData`, `TError`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`getCurrentQuery`](QueryObserver.md#getcurrentquery)
|
||||
|
||||
***
|
||||
|
||||
### getOptimisticResult()
|
||||
|
||||
```ts
|
||||
getOptimisticResult(options): InfiniteQueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:127](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L127)
|
||||
|
||||
The infinite-query counterpart of [QueryObserver#getOptimisticResult](QueryObserver.md#getoptimisticresult), marking the
|
||||
options as an infinite query before delegating to it. Called by framework adapters (e.g.
|
||||
`useInfiniteQuery`) ahead of subscribing, to compute the current `InfiniteQueryObserverResult`
|
||||
synchronously.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`DefaultedInfiniteQueryObserverOptions`](../type-aliases/DefaultedInfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`getOptimisticResult`](QueryObserver.md#getoptimisticresult)
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`hasListeners`](QueryObserver.md#haslisteners)
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:110](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L110)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`onSubscribe`](QueryObserver.md#onsubscribe)
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:124](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L124)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`onUnsubscribe`](QueryObserver.md#onunsubscribe)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch(__namedParameters): Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:371](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L371)
|
||||
|
||||
Refetches the observed query and returns a promise that resolves with
|
||||
the resulting `QueryObserverResult`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### \_\_namedParameters
|
||||
|
||||
[`RefetchOptions`](../interfaces/RefetchOptions.md) = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = await observer.refetch({ cancelRefetch: false })
|
||||
console.log(result.data)
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`refetch`](QueryObserver.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### setOptions()
|
||||
|
||||
```ts
|
||||
setOptions(options): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/infiniteQueryObserver.ts:108](https://github.com/TanStack/query/blob/main/packages/query-core/src/infiniteQueryObserver.ts#L108)
|
||||
|
||||
Updates the observer's options. Behaves the same as
|
||||
`QueryObserver.setOptions`, additionally marking the options as
|
||||
belonging to an infinite query before delegating to the base
|
||||
implementation.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`InfiniteQueryObserverOptions`](../interfaces/InfiniteQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`setOptions`](QueryObserver.md#setoptions)
|
||||
|
||||
***
|
||||
|
||||
### shouldFetchOnReconnect()
|
||||
|
||||
```ts
|
||||
shouldFetchOnReconnect(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:135](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L135)
|
||||
|
||||
Returns whether the observed query is currently stale and configured
|
||||
(via the `refetchOnReconnect` option) to refetch when the network
|
||||
reconnects.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`shouldFetchOnReconnect`](QueryObserver.md#shouldfetchonreconnect)
|
||||
|
||||
***
|
||||
|
||||
### shouldFetchOnWindowFocus()
|
||||
|
||||
```ts
|
||||
shouldFetchOnWindowFocus(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:148](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L148)
|
||||
|
||||
Returns whether the observed query is currently stale and configured
|
||||
(via the `refetchOnWindowFocus` option) to refetch when the window
|
||||
regains focus.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`shouldFetchOnWindowFocus`](QueryObserver.md#shouldfetchonwindowfocus)
|
||||
|
||||
***
|
||||
|
||||
### trackProp()
|
||||
|
||||
```ts
|
||||
trackProp(key): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:350](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L350)
|
||||
|
||||
Records that the given `QueryObserverResult` property was read, so a subsequent update only
|
||||
notifies this observer if a tracked property actually changed. Normally called indirectly via
|
||||
[QueryObserver#trackResult](QueryObserver.md#trackresult)'s proxy; exposed directly for adapters that track property
|
||||
access themselves (e.g. through their own reactivity system) instead of via the proxy.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### key
|
||||
|
||||
`"error"` | `"data"` | `"isError"` | `"isPending"` | `"isLoading"` | `"isLoadingError"` | `"isRefetchError"` | `"isSuccess"` | `"isPlaceholderData"` | `"status"` | `"dataUpdatedAt"` | `"errorUpdatedAt"` | `"failureCount"` | `"failureReason"` | `"errorUpdateCount"` | `"isFetched"` | `"isFetchedAfterMount"` | `"isFetching"` | `"isInitialLoading"` | `"isPaused"` | `"isRefetching"` | `"isStale"` | `"isEnabled"` | `"refetch"` | `"fetchStatus"`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`trackProp`](QueryObserver.md#trackprop)
|
||||
|
||||
***
|
||||
|
||||
### trackResult()
|
||||
|
||||
```ts
|
||||
trackResult(result, onPropTracked?): QueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:331](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L331)
|
||||
|
||||
Wraps a `QueryObserverResult` in a `Proxy` that records which properties are read, via
|
||||
[QueryObserver#trackProp](QueryObserver.md#trackprop) (and an optional `onPropTracked` callback). Used by framework
|
||||
adapters when `notifyOnChangeProps` is not set, to implement its default "only re-render on
|
||||
properties you actually read" behavior.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### result
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
##### onPropTracked?
|
||||
|
||||
(`key`) => `void`
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`trackResult`](QueryObserver.md#trackresult)
|
||||
|
||||
***
|
||||
|
||||
### updateResult()
|
||||
|
||||
```ts
|
||||
updateResult(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:735](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L735)
|
||||
|
||||
Recomputes and stores the current result from the current query/options, notifying listeners
|
||||
if it changed. Framework adapters call this right after subscribing to make sure no query
|
||||
update was missed in the gap between creating the observer and subscribing to it.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserver`](QueryObserver.md).[`updateResult`](QueryObserver.md#updateresult)
|
||||
330
docs/framework/vue/reference/classes/Mutation.md
Normal file
330
docs/framework/vue/reference/classes/Mutation.md
Normal file
@@ -0,0 +1,330 @@
|
||||
---
|
||||
id: Mutation
|
||||
title: Mutation
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:135](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L135)
|
||||
|
||||
Represents a single mutation attempt. A `Mutation` holds the mutation's
|
||||
options, state (data/error/status), and the `MutationObserver`s currently
|
||||
subscribed to it.
|
||||
|
||||
Instances are created and managed internally by `MutationCache`; application
|
||||
code typically interacts with mutations indirectly through `QueryClient` or
|
||||
a framework hook like `useMutation`. Direct access to a `Mutation` instance
|
||||
is possible via `mutationCache.find()`/`getAll()` for inspecting cache state.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
const mutation = mutationCache.find({ mutationKey: ['addPost'] })
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Removable`
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TVariables
|
||||
|
||||
`TVariables` = `unknown`
|
||||
|
||||
### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new Mutation<TData, TError, TVariables, TOnMutateResult>(config): Mutation<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:152](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L152)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### config
|
||||
|
||||
`MutationConfig`\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Mutation`\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Removable.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### gcTime
|
||||
|
||||
```ts
|
||||
gcTime: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:7](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L7)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.gcTime
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### mutationId
|
||||
|
||||
```ts
|
||||
readonly mutationId: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:143](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L143)
|
||||
|
||||
***
|
||||
|
||||
### options
|
||||
|
||||
```ts
|
||||
options: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:142](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L142)
|
||||
|
||||
***
|
||||
|
||||
### state
|
||||
|
||||
```ts
|
||||
state: MutationState<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:141](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L141)
|
||||
|
||||
## Accessors
|
||||
|
||||
### meta
|
||||
|
||||
#### Get Signature
|
||||
|
||||
```ts
|
||||
get meta(): Record<string, unknown> | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:179](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L179)
|
||||
|
||||
The `meta` object passed in the mutation's options, if any.
|
||||
|
||||
##### Returns
|
||||
|
||||
`Record`\<`string`, `unknown`\> \| `undefined`
|
||||
|
||||
## Methods
|
||||
|
||||
### clearGcTimeout()
|
||||
|
||||
```ts
|
||||
protected clearGcTimeout(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:32](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L32)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.clearGcTimeout
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### continue()
|
||||
|
||||
```ts
|
||||
continue(): Promise<unknown>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:243](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L243)
|
||||
|
||||
Resumes a mutation that is currently paused or was restored from a
|
||||
dehydrated, still-`pending` state.
|
||||
|
||||
- If this mutation has an active retryer (it paused mid-attempt, e.g. due
|
||||
to the network mode or scope-based queuing), its retryer is resumed.
|
||||
- Otherwise, if the mutation's status is still `pending` (e.g. it was
|
||||
dehydrated while an attempt was in flight and never got a retryer in
|
||||
this instance), `execute` is called again with the last known variables.
|
||||
- Otherwise the mutation has already settled and this resolves immediately
|
||||
without running anything again.
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<`unknown`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
// typically driven by reconnect handling, e.g. queryClient.resumePausedMutations()
|
||||
const mutation = mutationCache.find({ mutationKey: ['addPost'] })
|
||||
await mutation?.continue()
|
||||
```
|
||||
|
||||
#### See
|
||||
|
||||
[Mutation#execute](#execute)
|
||||
|
||||
***
|
||||
|
||||
### destroy()
|
||||
|
||||
```ts
|
||||
destroy(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:10](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L10)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.destroy
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### execute()
|
||||
|
||||
```ts
|
||||
execute(variables): Promise<TData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:284](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L284)
|
||||
|
||||
Runs the mutation function for the given variables through a retryer, and
|
||||
drives the mutation's state and lifecycle callbacks through to settlement.
|
||||
|
||||
If this mutation's state is already `pending` when `execute` is called
|
||||
(i.e. it was restored, still in-flight, from a dehydrated state), the
|
||||
`onMutate` step is skipped and a `continue` action is dispatched to
|
||||
unpause it; otherwise a `pending` action is dispatched first, then the
|
||||
mutation cache's `onMutate` and the mutation's own `onMutate` option are
|
||||
awaited in that order, and the resulting context is stored.
|
||||
|
||||
The mutation function is then run (subject to `retry`/`retryDelay`/
|
||||
`networkMode`, and to the mutation cache's scope-based serialization).
|
||||
On success, the cache's `onSuccess`/`onSettled` callbacks run before the
|
||||
mutation's own `onSuccess`/`onSettled` options, a `success` action is
|
||||
dispatched, and the resolved data is returned. On failure, the same
|
||||
cache-then-option ordering is used for `onError`/`onSettled`, but each of
|
||||
those four callbacks is individually caught so that a throwing callback
|
||||
cannot mask the original error; an `error` action is then dispatched and
|
||||
the original error is re-thrown.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### variables
|
||||
|
||||
`TVariables`
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<`TData`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
// Called internally by `MutationObserver.mutate` and `Mutation.continue` —
|
||||
// applications normally trigger mutations through those, not this method.
|
||||
const data = await mutation.execute(variables)
|
||||
```
|
||||
|
||||
#### See
|
||||
|
||||
[Mutation#continue](#continue)
|
||||
|
||||
***
|
||||
|
||||
### optionalRemove()
|
||||
|
||||
```ts
|
||||
protected optionalRemove(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutation.ts:212](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutation.ts#L212)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Removable.optionalRemove
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### scheduleGc()
|
||||
|
||||
```ts
|
||||
protected scheduleGc(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:14](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L14)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.scheduleGc
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### updateGcTime()
|
||||
|
||||
```ts
|
||||
protected updateGcTime(newGcTime): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:24](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L24)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### newGcTime
|
||||
|
||||
`number` | `undefined`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.updateGcTime
|
||||
```
|
||||
336
docs/framework/vue/reference/classes/MutationCache.md
Normal file
336
docs/framework/vue/reference/classes/MutationCache.md
Normal file
@@ -0,0 +1,336 @@
|
||||
---
|
||||
id: MutationCache
|
||||
title: MutationCache
|
||||
---
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationCache.ts:15](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L15)
|
||||
|
||||
Vue-aware subclass of `@tanstack/query-core`'s `MutationCache`. `find`/`findAll` also accept a
|
||||
MaybeRefDeep filters object, so `ref`s can be passed directly without unwrapping. Access it via
|
||||
`queryClient.getMutationCache()` — `QueryClient` constructs one of these by default.
|
||||
|
||||
## Extends
|
||||
|
||||
- `MutationCache`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new MutationCache(config): MutationCache;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationCache.ts:129](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationCache.ts#L129)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### config
|
||||
|
||||
[`MutationCacheConfig`](../interfaces/MutationCacheConfig.md) = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
`MutationCache`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### config
|
||||
|
||||
```ts
|
||||
config: MutationCacheConfig = {};
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationCache.ts:129](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationCache.ts#L129)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.config
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<MutationCacheListener>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.listeners
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### clear()
|
||||
|
||||
```ts
|
||||
clear(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationCache.ts:236](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationCache.ts#L236)
|
||||
|
||||
Removes all mutations from the cache.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
mutationCache.clear()
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.clear
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### find()
|
||||
|
||||
```ts
|
||||
find<TData, TError, TVariables, TOnMutateResult>(filters):
|
||||
| Mutation<TData, TError, TVariables, TOnMutateResult>
|
||||
| undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationCache.ts:16](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L16)
|
||||
|
||||
A slightly more advanced method that can be used to get an existing mutation instance from
|
||||
the cache. If the mutation does not exist, `undefined` is returned.
|
||||
|
||||
This is not typically needed for most applications, but can come in handy when needing more
|
||||
information about a mutation in rare scenarios.
|
||||
|
||||
#### Type Parameters
|
||||
|
||||
##### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
##### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
##### TVariables
|
||||
|
||||
`TVariables` = `any`
|
||||
|
||||
##### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### filters
|
||||
|
||||
`MaybeRefDeep`\<[`MutationFilters`](../interfaces/MutationFilters.md)\<`unknown`, `Error`, `unknown`, `unknown`\>\>
|
||||
|
||||
#### Returns
|
||||
|
||||
\| [`Mutation`](Mutation.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
\| `undefined`
|
||||
|
||||
#### See
|
||||
|
||||
[MutationCache#findAll](#findall)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
const mutation = mutationCache.find({ mutationKey: ['addPost'] })
|
||||
```
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
MC.find
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### findAll()
|
||||
|
||||
```ts
|
||||
findAll(filters): Mutation<unknown, Error, unknown, unknown>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationCache.ts:27](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L27)
|
||||
|
||||
An even more advanced method that can be used to get existing mutation instances from the
|
||||
cache that match the given filters. If no mutations match, an empty array is returned.
|
||||
|
||||
This is not typically needed for most applications, but can come in handy when needing more
|
||||
information about mutations in rare scenarios.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### filters
|
||||
|
||||
`MaybeRefDeep`\<[`MutationFilters`](../interfaces/MutationFilters.md)\<`unknown`, `Error`, `unknown`, `unknown`\>\> = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Mutation`](Mutation.md)\<`unknown`, `Error`, `unknown`, `unknown`\>[]
|
||||
|
||||
#### See
|
||||
|
||||
[MutationCache#find](#find)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
const mutations = mutationCache.findAll({ mutationKey: ['addPost'] })
|
||||
```
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
MC.findAll
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getAll()
|
||||
|
||||
```ts
|
||||
getAll(): Mutation<unknown, Error, unknown, unknown>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationCache.ts:259](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationCache.ts#L259)
|
||||
|
||||
Returns all mutations within the cache.
|
||||
|
||||
This is not typically needed for most applications, but can come in handy when needing more
|
||||
information about a mutation in rare scenarios.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Mutation`](Mutation.md)\<`unknown`, `Error`, `unknown`, `unknown`\>[]
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
const mutations = mutationCache.getAll()
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.getAll
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:23](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L23)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:27](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L27)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`MutationCacheListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
MC.subscribe
|
||||
```
|
||||
335
docs/framework/vue/reference/classes/MutationObserver.md
Normal file
335
docs/framework/vue/reference/classes/MutationObserver.md
Normal file
@@ -0,0 +1,335 @@
|
||||
---
|
||||
id: MutationObserver
|
||||
title: MutationObserver
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:38](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L38)
|
||||
|
||||
Observes a single mutation and derives a `MutationObserverResult` from it.
|
||||
A framework hook like `useMutation` creates one `MutationObserver` per hook
|
||||
call, keeps it stable across re-renders, calls `setOptions` when the options
|
||||
passed to the hook change, subscribes to it to re-render on updates, and
|
||||
reads `getCurrentResult()` for the value to return. Calling `mutate()`
|
||||
builds a new underlying `Mutation` in the `MutationCache` and executes it.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const observer = new MutationObserver(queryClient, {
|
||||
mutationFn: (variables: { title: string }) => addPost(variables),
|
||||
})
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Subscribable`\<`MutationObserverListener`\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new MutationObserver<TData, TError, TVariables, TOnMutateResult>(client, options): MutationObserver<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:58](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L58)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
##### options
|
||||
|
||||
[`MutationObserverOptions`](../interfaces/MutationObserverOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`MutationObserver`\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable<
|
||||
MutationObserverListener<TData, TError, TVariables, TOnMutateResult>
|
||||
>.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<MutationObserverListener<TData, TError, TVariables, TOnMutateResult>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.listeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### options
|
||||
|
||||
```ts
|
||||
options: MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:46](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L46)
|
||||
|
||||
## Methods
|
||||
|
||||
### bindMethods()
|
||||
|
||||
```ts
|
||||
protected bindMethods(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:75](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L75)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### getCurrentResult()
|
||||
|
||||
```ts
|
||||
getCurrentResult(): MutationObserverResult<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:155](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L155)
|
||||
|
||||
Returns the observer's current result, derived from the observed
|
||||
mutation's state (or the default, `idle` state if no mutation has been
|
||||
built yet, e.g. before the first `mutate()` call or after `reset()`).
|
||||
|
||||
#### Returns
|
||||
|
||||
[`MutationObserverResult`](../type-aliases/MutationObserverResult.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### mutate()
|
||||
|
||||
```ts
|
||||
mutate(variables, options?): Promise<TData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:207](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L207)
|
||||
|
||||
Builds a new `Mutation` in the `MutationCache` using the observer's
|
||||
current options, detaches this observer from any previously observed
|
||||
mutation, attaches it to the new one, and executes it with the given
|
||||
variables.
|
||||
|
||||
The optional per-call `options` (`onSuccess`/`onError`/`onSettled`) are
|
||||
invoked once the mutation settles, in addition to any callbacks defined
|
||||
on the observer's own options.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### variables
|
||||
|
||||
`TVariables`
|
||||
|
||||
##### options?
|
||||
|
||||
[`MutateOptions`](../interfaces/MutateOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<`TData`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
await observer.mutate(
|
||||
{ title: 'New post' },
|
||||
{ onSuccess: (data) => console.log(data) },
|
||||
)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:127](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L127)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:135](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L135)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### reset()
|
||||
|
||||
```ts
|
||||
reset(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:180](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L180)
|
||||
|
||||
Detaches the observer from the mutation it is currently observing (if
|
||||
any) and resets the observed result back to its default, `idle` state.
|
||||
|
||||
This does not cancel an in-flight mutation; the mutation itself keeps
|
||||
running to completion and its own callbacks still fire, but this
|
||||
observer stops reflecting its state and a subsequent `mutate()` call
|
||||
will build a brand new mutation.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
observer.reset()
|
||||
```
|
||||
|
||||
#### See
|
||||
|
||||
[MutationObserver#mutate](#mutate)
|
||||
|
||||
***
|
||||
|
||||
### setOptions()
|
||||
|
||||
```ts
|
||||
setOptions(options): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/mutationObserver.ts:96](https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L96)
|
||||
|
||||
Updates the observer's options.
|
||||
|
||||
If the new `mutationKey` differs from the previous one (and both were
|
||||
defined), the observer is reset, detaching it from the mutation it was
|
||||
observing. Otherwise, if the currently observed mutation is still
|
||||
`pending`, its options are updated in place as well.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`MutationObserverOptions`](../interfaces/MutationObserverOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
observer.setOptions({
|
||||
mutationFn: (variables: { title: string }) => addPost(variables),
|
||||
onSuccess: (data) => console.log(data),
|
||||
})
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`MutationObserverListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.subscribe
|
||||
```
|
||||
325
docs/framework/vue/reference/classes/QueriesObserver.md
Normal file
325
docs/framework/vue/reference/classes/QueriesObserver.md
Normal file
@@ -0,0 +1,325 @@
|
||||
---
|
||||
id: QueriesObserver
|
||||
title: QueriesObserver
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:56](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L56)
|
||||
|
||||
A `QueriesObserver` watches an array of queries at once, exposing them as
|
||||
a single array of `QueryObserverResult`s (or, when a `combine` option is
|
||||
given, as a combined value derived from that array). It manages one
|
||||
internal `QueryObserver` per query, and is the primitive that framework
|
||||
adapters (e.g. `useQueries`) build their hooks on top of.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const observer = new QueriesObserver(queryClient, [
|
||||
{ queryKey: ['post', 1], queryFn: fetchPost },
|
||||
{ queryKey: ['post', 2], queryFn: fetchPost },
|
||||
])
|
||||
|
||||
const unsubscribe = observer.subscribe((result) => {
|
||||
console.log(result)
|
||||
})
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Subscribable`\<`QueriesObserverListener`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TCombinedResult
|
||||
|
||||
`TCombinedResult` = [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)[]
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new QueriesObserver<TCombinedResult>(
|
||||
client,
|
||||
queries,
|
||||
options?): QueriesObserver<TCombinedResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:70](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L70)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
##### queries
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`any`, `any`, `any`, `any`, `any`, `never`\>[]
|
||||
|
||||
##### options?
|
||||
|
||||
[`QueriesObserverOptions`](../interfaces/QueriesObserverOptions.md)\<`TCombinedResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`QueriesObserver`\<`TCombinedResult`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable<QueriesObserverListener>.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<QueriesObserverListener>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.listeners
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### destroy()
|
||||
|
||||
```ts
|
||||
destroy(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:106](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L106)
|
||||
|
||||
Stops observing all queries: clears all listeners and destroys every
|
||||
underlying `QueryObserver` this observer manages.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### getCurrentResult()
|
||||
|
||||
```ts
|
||||
getCurrentResult(): QueryObserverResult[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:210](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L210)
|
||||
|
||||
Returns the most recently computed array of `QueryObserverResult`s, one
|
||||
per observed query, in the same order as the queries passed to the
|
||||
constructor or `setQueries`.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)[]
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const results = observer.getCurrentResult()
|
||||
const data = results.map((result) => result.data)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getObservers()
|
||||
|
||||
```ts
|
||||
getObservers(): QueryObserver<unknown, Error, unknown, unknown, readonly unknown[]>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:227](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L227)
|
||||
|
||||
Returns the underlying `QueryObserver` instances this observer manages,
|
||||
in the same order as the queries passed to the constructor or
|
||||
`setQueries`.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserver`](QueryObserver.md)\<`unknown`, `Error`, `unknown`, `unknown`, readonly `unknown`[]\>[]
|
||||
|
||||
***
|
||||
|
||||
### getOptimisticResult()
|
||||
|
||||
```ts
|
||||
getOptimisticResult(queries, combine): [QueryObserverResult[], (r?) => TCombinedResult, () => QueryObserverResult[]];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:238](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L238)
|
||||
|
||||
The `QueriesObserver` counterpart of [QueryObserver#getOptimisticResult](QueryObserver.md#getoptimisticresult) — computes
|
||||
the result for the given (already-defaulted) queries right now, synchronously. Called by
|
||||
framework adapters (e.g. `useQueries`) ahead of subscribing, returning a tuple of the raw
|
||||
per-query results, a function to compute the combined result from them, and a function to
|
||||
wrap the results for property-access tracking.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### queries
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`unknown`, `Error`, `unknown`, `unknown`, readonly `unknown`[], `never`\>[]
|
||||
|
||||
##### combine
|
||||
|
||||
`CombineFn`\<`TCombinedResult`\> | `undefined`
|
||||
|
||||
#### Returns
|
||||
|
||||
\[[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)[], (`r?`) => `TCombinedResult`, () => [`QueryObserverResult`](../type-aliases/QueryObserverResult.md)[]\]
|
||||
|
||||
***
|
||||
|
||||
### getQueries()
|
||||
|
||||
```ts
|
||||
getQueries(): Query<unknown, Error, unknown, readonly unknown[]>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:218](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L218)
|
||||
|
||||
Returns the underlying `Query` instances currently being observed, in
|
||||
the same order as the queries passed to the constructor or `setQueries`.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:86](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L86)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:96](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L96)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### setQueries()
|
||||
|
||||
```ts
|
||||
setQueries(queries, options?): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queriesObserver.ts:127](https://github.com/TanStack/query/blob/main/packages/query-core/src/queriesObserver.ts#L127)
|
||||
|
||||
Replaces the set of queries being observed. Existing `QueryObserver`s
|
||||
are reused for queries that match an already-observed query hash;
|
||||
observers for queries that are no longer present are destroyed, and new
|
||||
observers are created and subscribed to for newly added queries.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### queries
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`unknown`, `Error`, `unknown`, `unknown`, readonly `unknown`[], `never`\>[]
|
||||
|
||||
##### options?
|
||||
|
||||
[`QueriesObserverOptions`](../interfaces/QueriesObserverOptions.md)\<`TCombinedResult`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
observer.setQueries([
|
||||
{ queryKey: ['post', 1], queryFn: fetchPost },
|
||||
{ queryKey: ['post', 3], queryFn: fetchPost },
|
||||
])
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`QueriesObserverListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.subscribe
|
||||
```
|
||||
585
docs/framework/vue/reference/classes/Query.md
Normal file
585
docs/framework/vue/reference/classes/Query.md
Normal file
@@ -0,0 +1,585 @@
|
||||
---
|
||||
id: Query
|
||||
title: Query
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:225](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L225)
|
||||
|
||||
Represents a single cached query. A `Query` holds the query's key, options,
|
||||
state (data/error/status), and the observers currently subscribed to it.
|
||||
|
||||
Instances are created and managed internally by `QueryCache`; application
|
||||
code typically interacts with queries indirectly through `QueryClient` or
|
||||
a framework hook like `useQuery`. Direct access to a `Query` instance is
|
||||
possible via `queryCache.find()`/`findAll()` for inspecting cache state.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
const query = queryCache.find({ queryKey: ['posts'] })
|
||||
|
||||
if (query) {
|
||||
console.log(query.state.dataUpdatedAt)
|
||||
}
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Removable`
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new Query<TQueryFnData, TError, TData, TQueryKey>(config): Query<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:246](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L246)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### config
|
||||
|
||||
`QueryConfig`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Query`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Removable.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### gcTime
|
||||
|
||||
```ts
|
||||
gcTime: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:7](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L7)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.gcTime
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### observers
|
||||
|
||||
```ts
|
||||
observers: QueryObserver<any, any, any, any, any>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:242](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L242)
|
||||
|
||||
***
|
||||
|
||||
### options
|
||||
|
||||
```ts
|
||||
options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:233](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L233)
|
||||
|
||||
***
|
||||
|
||||
### queryHash
|
||||
|
||||
```ts
|
||||
queryHash: string;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:232](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L232)
|
||||
|
||||
***
|
||||
|
||||
### queryKey
|
||||
|
||||
```ts
|
||||
queryKey: TQueryKey;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:231](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L231)
|
||||
|
||||
***
|
||||
|
||||
### state
|
||||
|
||||
```ts
|
||||
state: QueryState<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:234](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L234)
|
||||
|
||||
## Accessors
|
||||
|
||||
### meta
|
||||
|
||||
#### Get Signature
|
||||
|
||||
```ts
|
||||
get meta(): Record<string, unknown> | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:264](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L264)
|
||||
|
||||
The `meta` object passed in the query's options, if any.
|
||||
|
||||
##### Returns
|
||||
|
||||
`Record`\<`string`, `unknown`\> \| `undefined`
|
||||
|
||||
***
|
||||
|
||||
### promise
|
||||
|
||||
#### Get Signature
|
||||
|
||||
```ts
|
||||
get promise(): Promise<TData> | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:277](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L277)
|
||||
|
||||
The promise for the currently in-flight fetch, if the query is fetching.
|
||||
`undefined` when the query is not fetching.
|
||||
|
||||
##### Returns
|
||||
|
||||
`Promise`\<`TData`\> \| `undefined`
|
||||
|
||||
## Methods
|
||||
|
||||
### cancel()
|
||||
|
||||
```ts
|
||||
cancel(options?): Promise<void>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:348](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L348)
|
||||
|
||||
Cancels the query's currently in-flight fetch, if any.
|
||||
- Returns a promise that resolves once the cancellation has settled.
|
||||
- If no fetch is in progress, resolves immediately.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`CancelOptions`](../interfaces/CancelOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<`void`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
await query.cancel()
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### clearGcTimeout()
|
||||
|
||||
```ts
|
||||
protected clearGcTimeout(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:32](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L32)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.clearGcTimeout
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### destroy()
|
||||
|
||||
```ts
|
||||
destroy(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:361](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L361)
|
||||
|
||||
Clears the query's garbage collection timeout and silently cancels any
|
||||
in-flight fetch. Called by `QueryCache` when the query is removed from
|
||||
the cache.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### See
|
||||
|
||||
[Query#cancel](#cancel)
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Removable.destroy
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### fetch()
|
||||
|
||||
```ts
|
||||
fetch(options?, fetchOptions?): Promise<TData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:590](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L590)
|
||||
|
||||
Fetches the query, i.e. runs its `queryFn` (through any configured
|
||||
retryer/behavior) and updates the query's state with the result.
|
||||
- If a fetch is already in flight, returns its promise instead of
|
||||
starting a new one, unless `fetchOptions.cancelRefetch` is set and the
|
||||
query already has data, in which case the current fetch is silently
|
||||
cancelled first.
|
||||
- If `options` is passed, it replaces the query's current options
|
||||
before fetching.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
`QueryOptions`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `never`\>
|
||||
|
||||
##### fetchOptions?
|
||||
|
||||
`FetchOptions`\<`TQueryFnData`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<`TData`\>
|
||||
|
||||
***
|
||||
|
||||
### getObserversCount()
|
||||
|
||||
```ts
|
||||
getObserversCount(): number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:560](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L560)
|
||||
|
||||
Returns the number of observers currently subscribed to this query.
|
||||
|
||||
#### Returns
|
||||
|
||||
`number`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
if (query.getObserversCount() === 0) {
|
||||
// no component is currently watching this query
|
||||
}
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### invalidate()
|
||||
|
||||
```ts
|
||||
invalidate(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:574](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L574)
|
||||
|
||||
Marks the query as invalidated, unless it is already invalidated. This
|
||||
updates `state.isInvalidated` and notifies observers, but does not by
|
||||
itself trigger a refetch.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
query.invalidate()
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### isActive()
|
||||
|
||||
```ts
|
||||
isActive(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:386](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L386)
|
||||
|
||||
Returns `true` if the query has at least one observer for which `enabled`
|
||||
does not resolve to `false`.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### isDisabled()
|
||||
|
||||
```ts
|
||||
isDisabled(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:400](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L400)
|
||||
|
||||
Returns `true` if the query is disabled, meaning it will not fetch
|
||||
automatically.
|
||||
- If the query has observers, it is disabled when none of them are active
|
||||
(see `isActive`).
|
||||
- If the query has no observers, it is disabled when its `queryFn` is
|
||||
`skipToken` or it has never been fetched.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### isFetched()
|
||||
|
||||
```ts
|
||||
isFetched(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:412](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L412)
|
||||
|
||||
Returns `true` if the query has been fetched, i.e. it has resolved with
|
||||
either data or an error at least once.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### isStale()
|
||||
|
||||
```ts
|
||||
isStale(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:447](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L447)
|
||||
|
||||
Returns `true` if the query is stale.
|
||||
- If the query has observers, defers to whether any observer's current
|
||||
result reports `isStale` (which accounts for each observer's own
|
||||
`staleTime` and `enabled` state).
|
||||
- If the query has no observers, it is considered stale when it has no
|
||||
data or has been invalidated.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### See
|
||||
|
||||
[Query#isStaleByTime](#isstalebytime)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
if (query.isStale()) {
|
||||
// refetch or otherwise treat the cached data as outdated
|
||||
}
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### isStaleByTime()
|
||||
|
||||
```ts
|
||||
isStaleByTime(staleTime): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:473](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L473)
|
||||
|
||||
Returns `true` if the query's data is stale relative to the given
|
||||
`staleTime` (defaults to `0`).
|
||||
- A query with no data is always stale.
|
||||
- `staleTime: 'static'` is never stale.
|
||||
- An invalidated query is always stale.
|
||||
- Otherwise, staleness is based on elapsed time since `dataUpdatedAt`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### staleTime
|
||||
|
||||
[`StaleTime`](../type-aliases/StaleTime.md) = `0`
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### See
|
||||
|
||||
[Query#isStale](#isstale)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const isStale = query.isStaleByTime(1000 * 60)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### isStatic()
|
||||
|
||||
```ts
|
||||
isStatic(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:420](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L420)
|
||||
|
||||
Returns `true` if the query has at least one observer configured with
|
||||
`staleTime: 'static'`, meaning it is treated as never stale.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### optionalRemove()
|
||||
|
||||
```ts
|
||||
protected optionalRemove(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:305](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L305)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Removable.optionalRemove
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### reset()
|
||||
|
||||
```ts
|
||||
reset(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:377](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L377)
|
||||
|
||||
Resets the query back to its initial state (the state it had when it was
|
||||
first created, e.g. any `initialData`), destroying it first to cancel any
|
||||
in-flight fetch.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### scheduleGc()
|
||||
|
||||
```ts
|
||||
protected scheduleGc(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:14](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L14)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.scheduleGc
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### setState()
|
||||
|
||||
```ts
|
||||
setState(state): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/query.ts:334](https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L334)
|
||||
|
||||
Merges the given partial state directly into this query's state, notifying observers. Used
|
||||
by persistence and broadcast plugins to restore a state snapshot, and by devtools to let a
|
||||
user manually trigger a loading/error state or edit the cached data.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### state
|
||||
|
||||
`Partial`\<[`QueryState`](../interfaces/QueryState.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### updateGcTime()
|
||||
|
||||
```ts
|
||||
protected updateGcTime(newGcTime): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/removable.ts:24](https://github.com/TanStack/query/blob/main/packages/query-core/src/removable.ts#L24)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### newGcTime
|
||||
|
||||
`number` | `undefined`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Removable.updateGcTime
|
||||
```
|
||||
506
docs/framework/vue/reference/classes/QueryCache.md
Normal file
506
docs/framework/vue/reference/classes/QueryCache.md
Normal file
@@ -0,0 +1,506 @@
|
||||
---
|
||||
id: QueryCache
|
||||
title: QueryCache
|
||||
---
|
||||
|
||||
Defined in: [packages/vue-query/src/queryCache.ts:16](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryCache.ts#L16)
|
||||
|
||||
Vue-aware subclass of `@tanstack/query-core`'s `QueryCache`. `find`/`findAll` also accept a
|
||||
MaybeRefDeep filters object, so `ref`s can be passed directly without unwrapping. Access it via
|
||||
`queryClient.getQueryCache()` — `QueryClient` constructs one of these by default.
|
||||
|
||||
## Extends
|
||||
|
||||
- `QueryCache`
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new QueryCache(config): QueryCache;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:126](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L126)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### config
|
||||
|
||||
[`QueryCacheConfig`](../interfaces/QueryCacheConfig.md) = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
`QueryCache`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### config
|
||||
|
||||
```ts
|
||||
config: QueryCacheConfig = {};
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:126](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L126)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.config
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<QueryCacheListener>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.listeners
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### build()
|
||||
|
||||
```ts
|
||||
build<TQueryFnData, TError, TData, TQueryKey>(
|
||||
client,
|
||||
options,
|
||||
state?): Query<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:147](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L147)
|
||||
|
||||
Returns the existing `Query` instance for the given options' `queryKey`/`queryHash`, or
|
||||
builds and adds a new one to the cache if none exists yet. Used by framework adapters and
|
||||
plugins (e.g. broadcast/persistence) that need to get-or-create a `Query` directly, bypassing
|
||||
the reactive `QueryObserver` machinery.
|
||||
|
||||
#### Type Parameters
|
||||
|
||||
##### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
##### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
##### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
##### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
##### options
|
||||
|
||||
[`WithRequired`](../type-aliases/WithRequired.md)\<`QueryOptions`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `never`\>, `"queryKey"`\>
|
||||
|
||||
##### state?
|
||||
|
||||
[`QueryState`](../interfaces/QueryState.md)\<`TData`, `TError`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
const query = queryCache.build(queryClient, {
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
})
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.build
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### clear()
|
||||
|
||||
```ts
|
||||
clear(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:232](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L232)
|
||||
|
||||
Removes all queries from the cache.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
queryCache.clear()
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.clear
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### find()
|
||||
|
||||
```ts
|
||||
find<TQueryFnData, TError, TData>(filters):
|
||||
| Query<TQueryFnData, TError, TData, readonly unknown[]>
|
||||
| undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryCache.ts:17](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryCache.ts#L17)
|
||||
|
||||
A slightly more advanced method that can be used to get an existing query instance from the
|
||||
cache. This instance not only contains all the state for the query, but all of the instances,
|
||||
and underlying guts of the query as well. If the query does not exist, `undefined` is
|
||||
returned.
|
||||
|
||||
This is not typically needed for most applications, but can come in handy when needing more
|
||||
information about a query in rare scenarios (e.g. looking at `query.state.dataUpdatedAt` to
|
||||
decide whether a query is fresh enough to be used as an initial value).
|
||||
|
||||
#### Type Parameters
|
||||
|
||||
##### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
##### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
##### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### filters
|
||||
|
||||
`MaybeRefDeep`\<[`WithRequired`](../type-aliases/WithRequired.md)\<[`QueryFilters`](../interfaces/QueryFilters.md)\<readonly `unknown`[]\>, `"queryKey"`\>\>
|
||||
|
||||
#### Returns
|
||||
|
||||
\| [`Query`](Query.md)\<`TQueryFnData`, `TError`, `TData`, readonly `unknown`[]\>
|
||||
\| `undefined`
|
||||
|
||||
#### See
|
||||
|
||||
[QueryCache#findAll](#findall)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
const query = queryCache.find({ queryKey: ['posts'] })
|
||||
```
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
QC.find
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### findAll()
|
||||
|
||||
```ts
|
||||
findAll(filters): Query<unknown, Error, unknown, readonly unknown[]>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryCache.ts:23](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryCache.ts#L23)
|
||||
|
||||
An even more advanced method that can be used to get existing query instances from the cache
|
||||
that partially match a query key. If no queries match, an empty array is returned.
|
||||
|
||||
This is not typically needed for most applications, but can come in handy when needing more
|
||||
information about queries in rare scenarios.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### filters
|
||||
|
||||
`MaybeRefDeep`\<[`QueryFilters`](../interfaces/QueryFilters.md)\<readonly `unknown`[]\>\> = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]
|
||||
|
||||
#### See
|
||||
|
||||
[QueryCache#find](#find)
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
const queries = queryCache.findAll({ queryKey: ['posts'] })
|
||||
```
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
QC.findAll
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### get()
|
||||
|
||||
```ts
|
||||
get<TQueryFnData, TError, TData, TQueryKey>(queryHash):
|
||||
| Query<TQueryFnData, TError, TData, TQueryKey>
|
||||
| undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:254](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L254)
|
||||
|
||||
Returns the `Query` instance stored under the given `queryHash`, or `undefined` if none
|
||||
exists. Unlike [QueryCache#find](#find), this looks up by the already-computed hash rather
|
||||
than by `QueryFilters`. Used by plugins (e.g. broadcast/hydration) that already have a hash
|
||||
to look up directly.
|
||||
|
||||
#### Type Parameters
|
||||
|
||||
##### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
##### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
##### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
##### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### queryHash
|
||||
|
||||
`string`
|
||||
|
||||
#### Returns
|
||||
|
||||
\| [`Query`](Query.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
\| `undefined`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
const queryHash = hashKey(['posts'])
|
||||
|
||||
const query = queryCache.get(queryHash)
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.get
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getAll()
|
||||
|
||||
```ts
|
||||
getAll(): Query<unknown, Error, unknown, readonly unknown[]>[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:277](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L277)
|
||||
|
||||
Returns all queries within the cache.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`unknown`, `Error`, `unknown`, readonly `unknown`[]\>[]
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
const queries = queryCache.getAll()
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.getAll
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:23](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L23)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:27](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L27)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### remove()
|
||||
|
||||
```ts
|
||||
remove(query): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryCache.ts:208](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryCache.ts#L208)
|
||||
|
||||
Destroys the given `Query` and removes it from the cache, notifying subscribers with a
|
||||
`'removed'` event. A no-op if the query is no longer the one currently stored under its hash
|
||||
(e.g. it was already replaced). Used by plugins (e.g. the broadcast client) that mirror
|
||||
removals across `QueryCache` instances.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### query
|
||||
|
||||
[`Query`](Query.md)\<`any`, `any`, `any`, `any`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
const query = queryCache.find({ queryKey: ['posts'] })
|
||||
|
||||
if (query) {
|
||||
queryCache.remove(query)
|
||||
}
|
||||
```
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.remove
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`QueryCacheListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
QC.subscribe
|
||||
```
|
||||
2079
docs/framework/vue/reference/classes/QueryClient.md
Normal file
2079
docs/framework/vue/reference/classes/QueryClient.md
Normal file
File diff suppressed because it is too large
Load Diff
555
docs/framework/vue/reference/classes/QueryObserver.md
Normal file
555
docs/framework/vue/reference/classes/QueryObserver.md
Normal file
@@ -0,0 +1,555 @@
|
||||
---
|
||||
id: QueryObserver
|
||||
title: QueryObserver
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:57](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L57)
|
||||
|
||||
A `QueryObserver` watches a single query in the `QueryCache` and computes a
|
||||
`QueryObserverResult` from its state, recomputing and notifying subscribers
|
||||
whenever the underlying query (or the observer's options) changes. It is
|
||||
the primitive that framework adapters (e.g. `useQuery`) build their hooks
|
||||
on top of, but it can also be used directly to observe and switch between
|
||||
queries outside of any framework.
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const observer = new QueryObserver(queryClient, {
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
})
|
||||
|
||||
const unsubscribe = observer.subscribe((result) => {
|
||||
console.log(result.data)
|
||||
})
|
||||
```
|
||||
|
||||
## Extends
|
||||
|
||||
- `Subscribable`\<`QueryObserverListener`\<`TData`, `TError`\>\>
|
||||
|
||||
## Extended by
|
||||
|
||||
- [`InfiniteQueryObserver`](InfiniteQueryObserver.md)
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryData
|
||||
|
||||
`TQueryData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
## Constructors
|
||||
|
||||
### Constructor
|
||||
|
||||
```ts
|
||||
new QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>(client, options): QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:87](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L87)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
##### options
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`QueryObserver`\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable<QueryObserverListener<TData, TError>>.constructor
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<QueryObserverListener<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.listeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### options
|
||||
|
||||
```ts
|
||||
options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:89](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L89)
|
||||
|
||||
## Methods
|
||||
|
||||
### bindMethods()
|
||||
|
||||
```ts
|
||||
protected bindMethods(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:106](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L106)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### createResult()
|
||||
|
||||
```ts
|
||||
protected createResult(query, options): QueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:559](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L559)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### query
|
||||
|
||||
[`Query`](Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
##### options
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
***
|
||||
|
||||
### destroy()
|
||||
|
||||
```ts
|
||||
destroy(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:161](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L161)
|
||||
|
||||
Stops observing the current query: clears all listeners, cancels the
|
||||
stale and refetch-interval timers, and removes this observer from the
|
||||
query it was observing.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### fetch()
|
||||
|
||||
```ts
|
||||
protected fetch(fetchOptions): Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:448](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L448)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### fetchOptions
|
||||
|
||||
`ObserverFetchOptions`
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
***
|
||||
|
||||
### fetchOptimistic()
|
||||
|
||||
```ts
|
||||
fetchOptimistic(options): Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:395](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L395)
|
||||
|
||||
Fetches a query defined by the given options without affecting this
|
||||
observer's own tracked query or result, and returns a promise that
|
||||
resolves with the `QueryObserverResult` for that fetch. This is useful
|
||||
for prefetching data that another observer (e.g. a query about to be
|
||||
navigated to) will need, ahead of time.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = await observer.fetchOptimistic({
|
||||
queryKey: ['posts', 2],
|
||||
queryFn: () => fetchPost(2),
|
||||
})
|
||||
console.log(result.data)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getCurrentQuery()
|
||||
|
||||
```ts
|
||||
getCurrentQuery(): Query<TQueryFnData, TError, TQueryData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:357](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L357)
|
||||
|
||||
Returns the `Query` instance this observer is currently observing.
|
||||
|
||||
#### Returns
|
||||
|
||||
[`Query`](Query.md)\<`TQueryFnData`, `TError`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
***
|
||||
|
||||
### getCurrentResult()
|
||||
|
||||
```ts
|
||||
getCurrentResult(): QueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:321](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L321)
|
||||
|
||||
Returns the most recently computed `QueryObserverResult` for the
|
||||
observed query. This is a point-in-time read; to be notified of updates
|
||||
as they happen, subscribe to the observer instead (its inherited
|
||||
`subscribe` method).
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = observer.getCurrentResult()
|
||||
console.log(result.status, result.data)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### getOptimisticResult()
|
||||
|
||||
```ts
|
||||
getOptimisticResult(options): QueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:272](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L272)
|
||||
|
||||
Computes the result the observer would produce for the given (already-defaulted) options
|
||||
right now, building the underlying `Query` if it doesn't exist yet, without waiting for a
|
||||
subscription callback. Called by framework adapters on every render (e.g. `useQuery`) so the
|
||||
returned value is available synchronously, ahead of `setOptions` triggering an actual fetch.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`DefaultedQueryObserverOptions`](../type-aliases/DefaultedQueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
***
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:110](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L110)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:124](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L124)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch(__namedParameters): Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:371](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L371)
|
||||
|
||||
Refetches the observed query and returns a promise that resolves with
|
||||
the resulting `QueryObserverResult`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### \_\_namedParameters
|
||||
|
||||
[`RefetchOptions`](../interfaces/RefetchOptions.md) = `{}`
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
const result = await observer.refetch({ cancelRefetch: false })
|
||||
console.log(result.data)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### setOptions()
|
||||
|
||||
```ts
|
||||
setOptions(options): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:182](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L182)
|
||||
|
||||
Updates the observer's options. This will re-resolve the query being
|
||||
observed (switching to a different query if the `queryKey` changed),
|
||||
trigger a fetch if the new options require one and the observer has
|
||||
subscribers, recompute the current result, and reschedule the stale and
|
||||
refetch-interval timers as needed.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options
|
||||
|
||||
[`QueryObserverOptions`](../interfaces/QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
observer.setOptions({ queryKey: ['posts', 1], queryFn: () => fetchPost(1) })
|
||||
// later: switch to a different query, reusing the same observer
|
||||
observer.setOptions({ queryKey: ['posts', 2], queryFn: () => fetchPost(2) })
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### shouldFetchOnReconnect()
|
||||
|
||||
```ts
|
||||
shouldFetchOnReconnect(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:135](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L135)
|
||||
|
||||
Returns whether the observed query is currently stale and configured
|
||||
(via the `refetchOnReconnect` option) to refetch when the network
|
||||
reconnects.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### shouldFetchOnWindowFocus()
|
||||
|
||||
```ts
|
||||
shouldFetchOnWindowFocus(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:148](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L148)
|
||||
|
||||
Returns whether the observed query is currently stale and configured
|
||||
(via the `refetchOnWindowFocus` option) to refetch when the window
|
||||
regains focus.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`QueryObserverListener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.subscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### trackProp()
|
||||
|
||||
```ts
|
||||
trackProp(key): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:350](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L350)
|
||||
|
||||
Records that the given `QueryObserverResult` property was read, so a subsequent update only
|
||||
notifies this observer if a tracked property actually changed. Normally called indirectly via
|
||||
[QueryObserver#trackResult](#trackresult)'s proxy; exposed directly for adapters that track property
|
||||
access themselves (e.g. through their own reactivity system) instead of via the proxy.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### key
|
||||
|
||||
`"error"` | `"data"` | `"isError"` | `"isPending"` | `"isLoading"` | `"isLoadingError"` | `"isRefetchError"` | `"isSuccess"` | `"isPlaceholderData"` | `"status"` | `"dataUpdatedAt"` | `"errorUpdatedAt"` | `"failureCount"` | `"failureReason"` | `"errorUpdateCount"` | `"isFetched"` | `"isFetchedAfterMount"` | `"isFetching"` | `"isInitialLoading"` | `"isPaused"` | `"isRefetching"` | `"isStale"` | `"isEnabled"` | `"refetch"` | `"fetchStatus"`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### trackResult()
|
||||
|
||||
```ts
|
||||
trackResult(result, onPropTracked?): QueryObserverResult<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:331](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L331)
|
||||
|
||||
Wraps a `QueryObserverResult` in a `Proxy` that records which properties are read, via
|
||||
[QueryObserver#trackProp](#trackprop) (and an optional `onPropTracked` callback). Used by framework
|
||||
adapters when `notifyOnChangeProps` is not set, to implement its default "only re-render on
|
||||
properties you actually read" behavior.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### result
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
##### onPropTracked?
|
||||
|
||||
(`key`) => `void`
|
||||
|
||||
#### Returns
|
||||
|
||||
[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>
|
||||
|
||||
***
|
||||
|
||||
### updateResult()
|
||||
|
||||
```ts
|
||||
updateResult(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/queryObserver.ts:735](https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L735)
|
||||
|
||||
Recomputes and stores the current result from the current query/options, notifying listeners
|
||||
if it changed. Framework adapters call this right after subscribing to make sure no query
|
||||
update was missed in the gap between creating the observer and subscribing to it.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
id: defaultShouldDehydrateMutation
|
||||
title: defaultShouldDehydrateMutation
|
||||
---
|
||||
|
||||
```ts
|
||||
function defaultShouldDehydrateMutation(mutation): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:177](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L177)
|
||||
|
||||
The default `shouldDehydrateMutation` predicate used by `dehydrate`. Only dehydrates mutations that are
|
||||
currently paused (e.g. paused by `networkMode` while offline).
|
||||
|
||||
## Parameters
|
||||
|
||||
### mutation
|
||||
|
||||
[`Mutation`](../classes/Mutation.md)
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
id: defaultShouldDehydrateQuery
|
||||
title: defaultShouldDehydrateQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function defaultShouldDehydrateQuery(query): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:185](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L185)
|
||||
|
||||
The default `shouldDehydrateQuery` predicate used by `dehydrate`. Only dehydrates queries whose status is
|
||||
`'success'`.
|
||||
|
||||
## Parameters
|
||||
|
||||
### query
|
||||
|
||||
[`Query`](../classes/Query.md)
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
43
docs/framework/vue/reference/functions/dehydrate.md
Normal file
43
docs/framework/vue/reference/functions/dehydrate.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: dehydrate
|
||||
title: dehydrate
|
||||
---
|
||||
|
||||
```ts
|
||||
function dehydrate(client, options): DehydratedState;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:207](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L207)
|
||||
|
||||
Dehydrates a `QueryClient`'s cache (queries and mutations) into a plain, serializable `DehydratedState`,
|
||||
typically to embed in server-rendered markup and later restore into a client-side `QueryClient` via `hydrate`.
|
||||
Which queries/mutations are included, and how their data/errors are transformed, is controlled by `options`,
|
||||
falling back to the client's `dehydrate` default options, and finally to `defaultShouldDehydrateQuery` /
|
||||
`defaultShouldDehydrateMutation`.
|
||||
|
||||
## Parameters
|
||||
|
||||
### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
### options
|
||||
|
||||
[`DehydrateOptions`](../interfaces/DehydrateOptions.md) = `{}`
|
||||
|
||||
## Returns
|
||||
|
||||
[`DehydratedState`](../interfaces/DehydratedState.md)
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
await queryClient.prefetchQuery({
|
||||
queryKey: ['posts'],
|
||||
queryFn: getPosts,
|
||||
})
|
||||
|
||||
const dehydratedState = dehydrate(queryClient)
|
||||
```
|
||||
43
docs/framework/vue/reference/functions/dehydrateQuery.md
Normal file
43
docs/framework/vue/reference/functions/dehydrateQuery.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: dehydrateQuery
|
||||
title: dehydrateQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function dehydrateQuery(
|
||||
query,
|
||||
serializeData?,
|
||||
shouldRedactErrors?): DehydratedQuery;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:148](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L148)
|
||||
|
||||
Dehydrates a single `Query` into a serializable `DehydratedQuery` snapshot. Note that most query config (e.g.
|
||||
`queryFn`, `staleTime`) is not dehydrated but instead meant to be configured again when consuming the
|
||||
de/rehydrated data, typically with `useQuery` on the client. If the query is still `pending`, its in-flight
|
||||
promise is dehydrated too so it can be resumed on the other side instead of re-fetched.
|
||||
|
||||
## Parameters
|
||||
|
||||
### query
|
||||
|
||||
[`Query`](../classes/Query.md)
|
||||
|
||||
The query to dehydrate.
|
||||
|
||||
### serializeData?
|
||||
|
||||
`TransformerFn`
|
||||
|
||||
Optional transform applied to `query.state.data` before it is included in the snapshot.
|
||||
|
||||
### shouldRedactErrors?
|
||||
|
||||
(`error`) => `boolean`
|
||||
|
||||
Optional predicate; if it returns `false` for the promise's rejection error, that
|
||||
error is kept as-is instead of being redacted.
|
||||
|
||||
## Returns
|
||||
|
||||
`DehydratedQuery`
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: experimental_streamedQuery
|
||||
title: experimental_streamedQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function experimental_streamedQuery<TQueryFnData, TData, TQueryKey>(streamFn): QueryFunction<TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/streamedQuery.ts:75](https://github.com/TanStack/query/blob/main/packages/query-core/src/streamedQuery.ts#L75)
|
||||
|
||||
This is a helper function to create a query function that streams data from an AsyncIterable.
|
||||
Data will be an Array of all the chunks received.
|
||||
The query will be in a 'pending' state until the first chunk of data is received, but will go to 'success' after that.
|
||||
The query will stay in fetchStatus 'fetching' until the stream ends.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`[]
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
## Parameters
|
||||
|
||||
### streamFn
|
||||
|
||||
`StreamedQueryParams`\<`TQueryFnData`, `TData`, `TQueryKey`\>
|
||||
|
||||
The function that returns an AsyncIterable to stream data from.
|
||||
|
||||
## Returns
|
||||
|
||||
[`QueryFunction`](../type-aliases/QueryFunction.md)\<`TData`, `TQueryKey`\>
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
await queryClient.query({
|
||||
queryKey: ['data'],
|
||||
queryFn: streamedQuery({
|
||||
streamFn: fetchDataInChunks,
|
||||
}),
|
||||
})
|
||||
```
|
||||
30
docs/framework/vue/reference/functions/hashKey.md
Normal file
30
docs/framework/vue/reference/functions/hashKey.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
id: hashKey
|
||||
title: hashKey
|
||||
---
|
||||
|
||||
```ts
|
||||
function hashKey(queryKey): string;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:284](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L284)
|
||||
|
||||
Default query & mutation keys hash function.
|
||||
Hashes the value into a stable hash.
|
||||
|
||||
## Parameters
|
||||
|
||||
### queryKey
|
||||
|
||||
readonly `unknown`[]
|
||||
|
||||
## Returns
|
||||
|
||||
`string`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
// Object keys are sorted, so key order doesn't affect the hash:
|
||||
hashKey(['todos', { page: 1, filter: 'done' }]) // === '["todos",{"filter":"done","page":1}]'
|
||||
```
|
||||
49
docs/framework/vue/reference/functions/hydrate.md
Normal file
49
docs/framework/vue/reference/functions/hydrate.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
id: hydrate
|
||||
title: hydrate
|
||||
---
|
||||
|
||||
```ts
|
||||
function hydrate(
|
||||
client,
|
||||
dehydratedState,
|
||||
options?): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:264](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L264)
|
||||
|
||||
Restores a `DehydratedState` (as produced by `dehydrate`) into a `QueryClient`'s cache, typically to seed the
|
||||
client with data already fetched on the server. `mutations` and `queries` are each optional on `dehydratedState`.
|
||||
Queries not yet in the cache are built from the dehydrated snapshot; queries that already exist are only updated
|
||||
when the dehydrated data is newer than what's already cached. Newly built queries have their `fetchStatus` reset
|
||||
to `'idle'` so they don't hydrate stuck in a fetching state. If a dehydrated query still had an in-flight
|
||||
promise, it is resumed via `query.fetch()` (reusing that promise as `initialPromise`) rather than re-invoking
|
||||
`queryFn`.
|
||||
|
||||
## Parameters
|
||||
|
||||
### client
|
||||
|
||||
`QueryClient`
|
||||
|
||||
### dehydratedState
|
||||
|
||||
`Partial`\<[`DehydratedState`](../interfaces/DehydratedState.md)\>
|
||||
|
||||
### options?
|
||||
|
||||
[`HydrateOptions`](../interfaces/HydrateOptions.md)
|
||||
|
||||
## Returns
|
||||
|
||||
`void`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
// dehydratedState was produced by `dehydrate` on the server
|
||||
// and sent to the client, e.g. embedded in server-rendered markup.
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
hydrate(queryClient, dehydratedState)
|
||||
```
|
||||
149
docs/framework/vue/reference/functions/infiniteQueryOptions.md
Normal file
149
docs/framework/vue/reference/functions/infiniteQueryOptions.md
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
id: infiniteQueryOptions
|
||||
title: infiniteQueryOptions
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/infiniteQueryOptions.ts:99](https://github.com/TanStack/query/blob/main/packages/vue-query/src/infiniteQueryOptions.ts#L99)
|
||||
|
||||
You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`.
|
||||
These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`.
|
||||
`options.queryKey` is required and is the query key to generate options for.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
The [UndefinedInitialDataInfiniteOptions](../type-aliases/UndefinedInitialDataInfiniteOptions.md) to use — everything you can pass to
|
||||
`useInfiniteQuery`.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & [`QueryKeyWithDataTag`](../type-aliases/QueryKeyWithDataTag.md)\<`TQueryKey`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>, `TError`\>
|
||||
|
||||
The same options object, typed so that `queryKey` carries the inferred data type.
|
||||
|
||||
### See
|
||||
|
||||
[useInfiniteQuery](useInfiniteQuery.md) to run an infinite query with these options.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const projectsOptions = infiniteQueryOptions({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
})
|
||||
|
||||
const { data, isError, error, fetchNextPage } = useInfiniteQuery(projectsOptions)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/infiniteQueryOptions.ts:153](https://github.com/TanStack/query/blob/main/packages/vue-query/src/infiniteQueryOptions.ts#L153)
|
||||
|
||||
You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`.
|
||||
These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`.
|
||||
`options.queryKey` is required and is the query key to generate options for.
|
||||
|
||||
This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
The [DefinedInitialDataInfiniteOptions](../type-aliases/DefinedInitialDataInfiniteOptions.md) to use — everything you can pass to
|
||||
`useInfiniteQuery`, with `initialData` set.
|
||||
|
||||
### Returns
|
||||
|
||||
[`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> & [`QueryKeyWithDataTag`](../type-aliases/QueryKeyWithDataTag.md)\<`TQueryKey`, [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>, `TError`\>
|
||||
|
||||
The same options object, typed so that `queryKey` carries the inferred data type.
|
||||
|
||||
### See
|
||||
|
||||
[useInfiniteQuery](useInfiniteQuery.md) to run an infinite query with these options.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const projectsOptions = infiniteQueryOptions({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
initialData: { pages: [], pageParams: [] },
|
||||
})
|
||||
|
||||
// `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
|
||||
// list stays visible alongside the error.
|
||||
const { data, isError, error } = useInfiniteQuery(projectsOptions)
|
||||
</script>
|
||||
```
|
||||
24
docs/framework/vue/reference/functions/isCancelledError.md
Normal file
24
docs/framework/vue/reference/functions/isCancelledError.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
id: isCancelledError
|
||||
title: isCancelledError
|
||||
---
|
||||
|
||||
```ts
|
||||
function isCancelledError(value): value is CancelledError;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/retryer.ts:90](https://github.com/TanStack/query/blob/main/packages/query-core/src/retryer.ts#L90)
|
||||
|
||||
## Parameters
|
||||
|
||||
### value
|
||||
|
||||
`any`
|
||||
|
||||
## Returns
|
||||
|
||||
`value is CancelledError`
|
||||
|
||||
## Deprecated
|
||||
|
||||
Use instanceof `CancelledError` instead.
|
||||
40
docs/framework/vue/reference/functions/keepPreviousData.md
Normal file
40
docs/framework/vue/reference/functions/keepPreviousData.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
id: keepPreviousData
|
||||
title: keepPreviousData
|
||||
---
|
||||
|
||||
```ts
|
||||
function keepPreviousData<T>(previousData): T | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:493](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L493)
|
||||
|
||||
Intended to be passed as a query's `placeholderData` option, for example
|
||||
`placeholderData: keepPreviousData`. Instead of resetting the query's data to `undefined` while a new
|
||||
query key is fetching, it keeps displaying the previously fetched data until the new data arrives.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### T
|
||||
|
||||
`T`
|
||||
|
||||
## Parameters
|
||||
|
||||
### previousData
|
||||
|
||||
`T` | `undefined`
|
||||
|
||||
## Returns
|
||||
|
||||
`T` \| `undefined`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
new QueryObserver(queryClient, {
|
||||
queryKey: ['posts', page],
|
||||
queryFn: () => fetchPosts(page),
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
```
|
||||
38
docs/framework/vue/reference/functions/matchMutation.md
Normal file
38
docs/framework/vue/reference/functions/matchMutation.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: matchMutation
|
||||
title: matchMutation
|
||||
---
|
||||
|
||||
```ts
|
||||
function matchMutation(filters, mutation): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:237](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L237)
|
||||
|
||||
Checks whether a mutation matches the given [MutationFilters](../interfaces/MutationFilters.md).
|
||||
Every filter that is specified must match; filters that are left unspecified are ignored.
|
||||
If a `mutationKey` filter is provided but the mutation has no `mutationKey` of its own, it does not match.
|
||||
|
||||
## Parameters
|
||||
|
||||
### filters
|
||||
|
||||
[`MutationFilters`](../interfaces/MutationFilters.md)
|
||||
|
||||
### mutation
|
||||
|
||||
[`Mutation`](../classes/Mutation.md)\<`any`, `any`\>
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const mutationCache = queryClient.getMutationCache()
|
||||
|
||||
const matchingMutations = mutationCache
|
||||
.getAll()
|
||||
.filter((mutation) => matchMutation({ mutationKey: ['addPost'] }, mutation))
|
||||
```
|
||||
37
docs/framework/vue/reference/functions/matchQuery.md
Normal file
37
docs/framework/vue/reference/functions/matchQuery.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
id: matchQuery
|
||||
title: matchQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function matchQuery(filters, query): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:175](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L175)
|
||||
|
||||
Checks whether a query matches the given [QueryFilters](../interfaces/QueryFilters.md).
|
||||
Every filter that is specified must match; filters that are left unspecified are ignored.
|
||||
|
||||
## Parameters
|
||||
|
||||
### filters
|
||||
|
||||
[`QueryFilters`](../interfaces/QueryFilters.md)
|
||||
|
||||
### query
|
||||
|
||||
[`Query`](../classes/Query.md)\<`any`, `any`, `any`, `any`\>
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const queryCache = queryClient.getQueryCache()
|
||||
|
||||
const matchingQueries = queryCache
|
||||
.getAll()
|
||||
.filter((query) => matchQuery({ queryKey: ['posts'] }, query))
|
||||
```
|
||||
299
docs/framework/vue/reference/functions/mutationOptions.md
Normal file
299
docs/framework/vue/reference/functions/mutationOptions.md
Normal file
@@ -0,0 +1,299 @@
|
||||
---
|
||||
id: mutationOptions
|
||||
title: mutationOptions
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationOptions.ts:34](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationOptions.ts#L34)
|
||||
|
||||
You can generally pass everything to `mutationOptions` that you can also pass to `useMutation`. A
|
||||
`mutationKey` is required on this overload so the mutation can be looked up later, e.g. with
|
||||
`useMutationState`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
#### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`WithRequired`](../type-aliases/WithRequired.md)\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
The mutation options to use, identical to what you'd pass to `useMutation`, with a
|
||||
required `mutationKey`.
|
||||
|
||||
### Returns
|
||||
|
||||
[`WithRequired`](../type-aliases/WithRequired.md)\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
The same options object, unchanged.
|
||||
|
||||
### See
|
||||
|
||||
[useMutation](useMutation.md) to run the mutation these options describe.
|
||||
|
||||
### Example
|
||||
|
||||
Looking the mutation up elsewhere via its `mutationKey`, e.g. for a global "saving…" indicator:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { mutationOptions, useMutationState } from '@tanstack/vue-query'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const createPostOptions = mutationOptions({
|
||||
mutationKey: ['posts', 'create'],
|
||||
mutationFn: createPost,
|
||||
})
|
||||
|
||||
// Call `useMutationState` once — it manages its own subscription — then derive from its result.
|
||||
const creatingPosts = useMutationState({
|
||||
filters: { mutationKey: createPostOptions.mutationKey, status: 'pending' },
|
||||
})
|
||||
const isCreatingPost = computed(() => creatingPosts.value.length > 0)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): () => WithRequired<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationOptions.ts:80](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationOptions.ts#L80)
|
||||
|
||||
Same as the plain-object overload with a required `mutationKey`, but for options that close over reactive
|
||||
state (`ref`s read inside the function body). Wrap them in a getter so `useMutation` and the other consumers
|
||||
always read the current values instead of the ones captured when the options were created.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
#### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
() => [`WithRequired`](../type-aliases/WithRequired.md)\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
A function returning the mutation options to use, with a required `mutationKey`,
|
||||
re-evaluated on demand.
|
||||
|
||||
### Returns
|
||||
|
||||
A function that returns the same options object, unchanged.
|
||||
|
||||
```ts
|
||||
(): WithRequired<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
#### Returns
|
||||
|
||||
[`WithRequired`](../type-aliases/WithRequired.md)\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
### See
|
||||
|
||||
[useMutation](useMutation.md) to run the mutation these options describe.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { mutationOptions, useMutation } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ userId: number }>()
|
||||
|
||||
const createPostOptions = mutationOptions(() => ({
|
||||
mutationKey: ['posts', 'create'],
|
||||
// Reacts to changes on `props.userId`, unlike the plain-object overload.
|
||||
mutationFn: (title: string) => createPost({ title, userId: props.userId }),
|
||||
}))
|
||||
|
||||
const mutation = useMutation(createPostOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="mutation.mutate('Hello')">Create</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): Omit<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationOptions.ts:124](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationOptions.ts#L124)
|
||||
|
||||
You can generally pass everything to `mutationOptions` that you can also pass to `useMutation`. No
|
||||
`mutationKey` is required on this overload — use this when you don't need to target the mutation via a
|
||||
`mutationKey` filter later (e.g. with `useMutationState`); it can still be observed through other filters,
|
||||
such as `status`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
#### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
`Omit`\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
The mutation options to use, identical to what you'd pass to `useMutation`, without a
|
||||
`mutationKey`.
|
||||
|
||||
### Returns
|
||||
|
||||
`Omit`\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
The same options object, unchanged.
|
||||
|
||||
### See
|
||||
|
||||
[useMutation](useMutation.md) to run the mutation these options describe.
|
||||
|
||||
### Remarks
|
||||
|
||||
See the other overload's example for looking a mutation up via `useMutationState`.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { mutationOptions, useMutation } from '@tanstack/vue-query'
|
||||
|
||||
const createPostOptions = mutationOptions({
|
||||
mutationFn: createPost,
|
||||
})
|
||||
|
||||
const mutation = useMutation(createPostOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="mutation.mutate({ title: 'Hello' })">Create</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): () => Omit<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/mutationOptions.ts:169](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationOptions.ts#L169)
|
||||
|
||||
Same as the plain-object overload without a `mutationKey`, but for options that close over reactive state
|
||||
(`ref`s read inside the function body). Wrap them in a getter so `useMutation` and the other consumers
|
||||
always read the current values instead of the ones captured when the options were created.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
#### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
() => `Omit`\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
A function returning the mutation options to use, without a `mutationKey`, re-evaluated on
|
||||
demand.
|
||||
|
||||
### Returns
|
||||
|
||||
A function that returns the same options object, unchanged.
|
||||
|
||||
```ts
|
||||
(): Omit<MutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
|
||||
```
|
||||
|
||||
#### Returns
|
||||
|
||||
`Omit`\<[`MutationOptions`](../type-aliases/MutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
|
||||
|
||||
### See
|
||||
|
||||
[useMutation](useMutation.md) to run the mutation these options describe.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { mutationOptions, useMutation } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ userId: number }>()
|
||||
|
||||
const createPostOptions = mutationOptions(() => ({
|
||||
// Reacts to changes on `props.userId`, unlike the plain-object overload.
|
||||
mutationFn: (title: string) => createPost({ title, userId: props.userId }),
|
||||
}))
|
||||
|
||||
const mutation = useMutation(createPostOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="mutation.mutate('Hello')">Create</button>
|
||||
</template>
|
||||
```
|
||||
32
docs/framework/vue/reference/functions/noop.md
Normal file
32
docs/framework/vue/reference/functions/noop.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
id: noop
|
||||
title: noop
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function noop(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:119](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L119)
|
||||
|
||||
A function that does nothing.
|
||||
|
||||
### Returns
|
||||
|
||||
`void`
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function noop(): undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:120](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L120)
|
||||
|
||||
A function that does nothing.
|
||||
|
||||
### Returns
|
||||
|
||||
`undefined`
|
||||
26
docs/framework/vue/reference/functions/partialMatchKey.md
Normal file
26
docs/framework/vue/reference/functions/partialMatchKey.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
id: partialMatchKey
|
||||
title: partialMatchKey
|
||||
---
|
||||
|
||||
```ts
|
||||
function partialMatchKey(a, b): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:300](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L300)
|
||||
|
||||
Checks if key `b` partially matches with key `a`.
|
||||
|
||||
## Parameters
|
||||
|
||||
### a
|
||||
|
||||
readonly `unknown`[]
|
||||
|
||||
### b
|
||||
|
||||
readonly `unknown`[]
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
310
docs/framework/vue/reference/functions/queryOptions.md
Normal file
310
docs/framework/vue/reference/functions/queryOptions.md
Normal file
@@ -0,0 +1,310 @@
|
||||
---
|
||||
id: queryOptions
|
||||
title: queryOptions
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): DefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryOptions.ts:244](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryOptions.ts#L244)
|
||||
|
||||
You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can
|
||||
be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and
|
||||
is the query key to generate options for.
|
||||
|
||||
This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`DefinedInitialQueryOptions`](../type-aliases/DefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The [DefinedInitialQueryOptions](../type-aliases/DefinedInitialQueryOptions.md) to use — everything you can pass to `useQuery`, with
|
||||
`initialData` set.
|
||||
|
||||
### Returns
|
||||
|
||||
[`DefinedInitialQueryOptionsWithDataTag`](../type-aliases/DefinedInitialQueryOptionsWithDataTag.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The same options object, typed so that `queryKey` carries the inferred data type.
|
||||
|
||||
### See
|
||||
|
||||
[useQuery](useQuery.md) to run a query with these options.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { queryOptions, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const postsOptions = queryOptions({
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
initialData: [],
|
||||
})
|
||||
|
||||
// `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
|
||||
// so the list stays visible alongside the error.
|
||||
const { data, isError, error } = useQuery(postsOptions)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): () => DefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryOptions.ts:281](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryOptions.ts#L281)
|
||||
|
||||
Same as the plain-object overload, but for options that close over reactive state (`ref`s read inside the
|
||||
function body). Wrap them in a getter so `queryClient` methods like `invalidateQueries`/`fetchQuery` always
|
||||
read the current values instead of the ones captured when the options were created.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
() => [`DefinedInitialQueryOptions`](../type-aliases/DefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
A function returning the [DefinedInitialQueryOptions](../type-aliases/DefinedInitialQueryOptions.md) to use, re-evaluated on demand.
|
||||
|
||||
### Returns
|
||||
|
||||
A function that returns the same options object, typed so that `queryKey` carries the inferred data
|
||||
type.
|
||||
|
||||
```ts
|
||||
(): DefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
#### Returns
|
||||
|
||||
[`DefinedInitialQueryOptionsWithDataTag`](../type-aliases/DefinedInitialQueryOptionsWithDataTag.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
### See
|
||||
|
||||
[useQuery](useQuery.md) to run a query with these options.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { queryOptions, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const postId = ref(1)
|
||||
const postOptions = queryOptions(() => ({
|
||||
queryKey: ['post', postId.value],
|
||||
queryFn: () => fetchPost(postId.value),
|
||||
initialData: { id: postId.value, title: '' },
|
||||
}))
|
||||
|
||||
// Pass the getter itself, not `postOptions()`, so the query keeps reacting to `postId` changes.
|
||||
const { data } = useQuery(postOptions)
|
||||
</script>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryOptions.ts:326](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryOptions.ts#L326)
|
||||
|
||||
You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can
|
||||
be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and
|
||||
is the query key to generate options for.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`UndefinedInitialQueryOptions`](../type-aliases/UndefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The [UndefinedInitialQueryOptions](../type-aliases/UndefinedInitialQueryOptions.md) to use — everything you can pass to `useQuery`.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UndefinedInitialQueryOptionsWithDataTag`](../type-aliases/UndefinedInitialQueryOptionsWithDataTag.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The same options object, typed so that `queryKey` carries the inferred data type.
|
||||
|
||||
### See
|
||||
|
||||
[useQuery](useQuery.md) to run a query with these options.
|
||||
|
||||
### Example
|
||||
|
||||
A parameterized factory, so the same options object can be reused per `id`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { queryOptions, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
function postOptions(id: string) {
|
||||
return queryOptions({
|
||||
queryKey: ['post', id],
|
||||
queryFn: () => fetchPost(id),
|
||||
})
|
||||
}
|
||||
|
||||
const { data, isPending, isError, error } = useQuery(postOptions('1'))
|
||||
</script>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): () => UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/queryOptions.ts:392](https://github.com/TanStack/query/blob/main/packages/vue-query/src/queryOptions.ts#L392)
|
||||
|
||||
Same as the plain-object overload, but for options that close over reactive state (`ref`s read inside the
|
||||
function body). Wrap them in a getter so the `queryKey` — and anything else derived from a `ref` — reacts
|
||||
to changes, and so `queryClient` methods like `invalidateQueries`/`fetchQuery` always read the current
|
||||
values instead of the ones captured when the options were created.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
() => [`UndefinedInitialQueryOptions`](../type-aliases/UndefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
A function returning the [UndefinedInitialQueryOptions](../type-aliases/UndefinedInitialQueryOptions.md) to use, re-evaluated on
|
||||
demand.
|
||||
|
||||
### Returns
|
||||
|
||||
A function that returns the same options object, typed so that `queryKey` carries the inferred
|
||||
data type.
|
||||
|
||||
```ts
|
||||
(): UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
#### Returns
|
||||
|
||||
[`UndefinedInitialQueryOptionsWithDataTag`](../type-aliases/UndefinedInitialQueryOptionsWithDataTag.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
### See
|
||||
|
||||
[useQuery](useQuery.md) to run a query with these options.
|
||||
|
||||
### Examples
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { queryOptions, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const postId = ref(1)
|
||||
const postOptions = queryOptions(() => ({
|
||||
queryKey: ['post', postId.value],
|
||||
queryFn: () => fetchPost(postId.value),
|
||||
}))
|
||||
|
||||
// Pass the getter itself, not `postOptions()`, so the query keeps reacting to `postId` changes.
|
||||
const { data } = useQuery(postOptions)
|
||||
const queryClient = useQueryClient()
|
||||
// Here, call `postOptions()` so `invalidateQueries` reads the current `queryKey` right away.
|
||||
queryClient.invalidateQueries(postOptions())
|
||||
</script>
|
||||
```
|
||||
|
||||
A parameterized factory that disables the query, type safe, until `postId` is set. The whole-options getter
|
||||
re-evaluates `queryFn` on every change to `postId`. `queryFn` can also be a `computed`, but never a bare
|
||||
getter, since a function there is the query function itself:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { queryOptions, skipToken, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
function postOptions(postId: number | undefined) {
|
||||
return queryOptions(() => ({
|
||||
queryKey: ['post', postId],
|
||||
queryFn: postId != null ? () => fetchPost(postId) : skipToken,
|
||||
}))
|
||||
}
|
||||
|
||||
const props = defineProps<{ postId: number | undefined }>()
|
||||
const { data, isLoading, isError, error } = useQuery(postOptions(props.postId))
|
||||
</script>
|
||||
```
|
||||
41
docs/framework/vue/reference/functions/replaceEqualDeep.md
Normal file
41
docs/framework/vue/reference/functions/replaceEqualDeep.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
id: replaceEqualDeep
|
||||
title: replaceEqualDeep
|
||||
---
|
||||
|
||||
```ts
|
||||
function replaceEqualDeep<T>(
|
||||
a,
|
||||
b,
|
||||
depth?): T;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:339](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L339)
|
||||
|
||||
This function returns `a` if `b` is deeply equal.
|
||||
If not, it will replace any deeply equal children of `b` with those of `a`.
|
||||
This can be used for structural sharing between JSON values for example.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### T
|
||||
|
||||
`T`
|
||||
|
||||
## Parameters
|
||||
|
||||
### a
|
||||
|
||||
`unknown`
|
||||
|
||||
### b
|
||||
|
||||
`T`
|
||||
|
||||
### depth?
|
||||
|
||||
`number`
|
||||
|
||||
## Returns
|
||||
|
||||
`T`
|
||||
45
docs/framework/vue/reference/functions/shouldThrowError.md
Normal file
45
docs/framework/vue/reference/functions/shouldThrowError.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
id: shouldThrowError
|
||||
title: shouldThrowError
|
||||
---
|
||||
|
||||
```ts
|
||||
function shouldThrowError<T>(throwOnError, params): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/utils.ts:576](https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L576)
|
||||
|
||||
Resolves a `throwOnError` option to a boolean.
|
||||
If `throwOnError` is a function, it is called with `params` (e.g. the error and, depending on the caller,
|
||||
additional context such as the query or mutation) and its result is returned, allowing the throwing
|
||||
behavior to be decided per error. Otherwise, `throwOnError` itself is coerced to a boolean (`undefined`
|
||||
resolves to `false`).
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### T
|
||||
|
||||
`T` *extends* (...`args`) => `boolean`
|
||||
|
||||
## Parameters
|
||||
|
||||
### throwOnError
|
||||
|
||||
`boolean` | `T` | `undefined`
|
||||
|
||||
### params
|
||||
|
||||
`Parameters`\<`T`\>
|
||||
|
||||
## Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
## Example
|
||||
|
||||
```ts
|
||||
const throwOnError =
|
||||
query.state.error && typeof options.throwOnError === 'function'
|
||||
? shouldThrowError(options.throwOnError, [query.state.error, query])
|
||||
: options.throwOnError
|
||||
```
|
||||
386
docs/framework/vue/reference/functions/useInfiniteQuery.md
Normal file
386
docs/framework/vue/reference/functions/useInfiniteQuery.md
Normal file
@@ -0,0 +1,386 @@
|
||||
---
|
||||
id: useInfiniteQuery
|
||||
title: useInfiniteQuery
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useInfiniteQuery.ts:117](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useInfiniteQuery.ts#L117)
|
||||
|
||||
The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
||||
`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
||||
|
||||
This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` for the array itself, or `ref`s and reactive getters as
|
||||
individual entries — the array itself can't be a bare getter.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
`MaybeRefOrGetter`\<[`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>
|
||||
|
||||
The [DefinedInitialDataInfiniteOptions](../type-aliases/DefinedInitialDataInfiniteOptions.md) to use — everything you can pass to
|
||||
`useInfiniteQuery`, with `initialData` set.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseInfiniteQueryReturnType`](../type-aliases/UseInfiniteQueryReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
||||
`hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.value.pages` and
|
||||
`data.value.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
||||
`InfiniteData<TQueryFnData>` shape.
|
||||
|
||||
### Remarks
|
||||
|
||||
Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
||||
refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
||||
actions, or add conditions like `hasNextPage && !isFetching`.
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
// `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
|
||||
// list stays visible alongside the error.
|
||||
const { data, isError, error } = useInfiniteQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
initialData: { pages: [], pageParams: [] },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isError">Error: {{ error.message }}</span>
|
||||
<ul>
|
||||
<template v-for="page in data.pages" :key="page.nextId">
|
||||
<li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useInfiniteQuery.ts:251](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useInfiniteQuery.ts#L251)
|
||||
|
||||
The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
|
||||
`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` for the array itself, or `ref`s and reactive getters as
|
||||
individual entries — the array itself can't be a bare getter.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
`MaybeRefOrGetter`\<[`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>
|
||||
|
||||
The [UndefinedInitialDataInfiniteOptions](../type-aliases/UndefinedInitialDataInfiniteOptions.md) to use — everything you can pass to
|
||||
`useInfiniteQuery`.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseInfiniteQueryReturnType`](../type-aliases/UseInfiniteQueryReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
||||
`hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.value.pages` and
|
||||
`data.value.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
|
||||
`InfiniteData<TQueryFnData>` shape.
|
||||
|
||||
### Remarks
|
||||
|
||||
Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
|
||||
refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
|
||||
actions, or add conditions like `hasNextPage && !isFetching`.
|
||||
|
||||
### Examples
|
||||
|
||||
Fetching the next page from a "Load More" button click:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const {
|
||||
data,
|
||||
isPending,
|
||||
isError,
|
||||
error,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetching,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<template v-else>
|
||||
<ul>
|
||||
<template v-for="page in data.pages" :key="page.nextId">
|
||||
<li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
<button @click="fetchNextPage()" :disabled="!hasNextPage || isFetching">
|
||||
{{ isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'Nothing more to load' }}
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
```
|
||||
|
||||
Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
|
||||
sentinel element after the list:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { onUnmounted, ref, watch } from 'vue'
|
||||
import { useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const {
|
||||
data,
|
||||
isPending,
|
||||
isError,
|
||||
error,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetching,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
})
|
||||
|
||||
const sentinel = ref<HTMLElement>()
|
||||
let observer: IntersectionObserver | undefined
|
||||
|
||||
watch(sentinel, (el) => {
|
||||
observer?.disconnect()
|
||||
if (el == null) return
|
||||
|
||||
observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry?.isIntersecting && hasNextPage.value && !isFetching.value) {
|
||||
fetchNextPage()
|
||||
}
|
||||
})
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
onUnmounted(() => observer?.disconnect())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<template v-else>
|
||||
<ul>
|
||||
<template v-for="page in data.pages" :key="page.nextId">
|
||||
<li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
<div ref="sentinel">{{ isFetchingNextPage ? 'Loading more...' : '' }}</div>
|
||||
</template>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useInfiniteQuery.ts:347](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useInfiniteQuery.ts#L347)
|
||||
|
||||
Fallback overload for options whose `initialData` presence isn't statically known — for example, a
|
||||
`ref`/reactive object built up conditionally, rather than a plain object literal. Prefer one of the other
|
||||
overloads when possible, since they infer whether `data` can be `undefined` from `initialData` directly.
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` for the array itself, or `ref`s and reactive getters as
|
||||
individual entries — the array itself can't be a bare getter.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
#### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
`MaybeRefOrGetter`\<[`UseInfiniteQueryOptions`](../type-aliases/UseInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>
|
||||
|
||||
A `ref`, plain value, or reactive getter resolving to the [UseInfiniteQueryOptions](../type-aliases/UseInfiniteQueryOptions.md) to
|
||||
use.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseInfiniteQueryReturnType`](../type-aliases/UseInfiniteQueryReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
|
||||
`hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`.
|
||||
|
||||
### Examples
|
||||
|
||||
Passing a whole-options getter so `maxPages` reacts to a setting stored elsewhere, not just `queryKey`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ projectId: number; maxPages: number }>()
|
||||
|
||||
const { data } = useInfiniteQuery(() => ({
|
||||
queryKey: ['project', props.projectId, 'issues'],
|
||||
queryFn: ({ pageParam }) => fetchIssues(props.projectId, pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
maxPages: props.maxPages,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-for="page in data?.pages" :key="page.nextId">
|
||||
<li v-for="issue in page.issues" :key="issue.id">{{ issue.title }}</li>
|
||||
</template>
|
||||
</template>
|
||||
```
|
||||
|
||||
A query that's disabled, type-safe, until `postId` is set — pass `skipToken` as `queryFn` instead of
|
||||
setting `enabled: false`. This requires a whole-options getter: `queryFn` isn't itself reactive, so the
|
||||
getter is what re-evaluates it on every change to `props.postId`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { skipToken, useInfiniteQuery } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ postId: string | undefined }>()
|
||||
|
||||
// Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
|
||||
const { data, isLoading, isError, error } = useInfiniteQuery(() => {
|
||||
const postId = props.postId
|
||||
return {
|
||||
queryKey: ['post', postId, 'comments'],
|
||||
queryFn:
|
||||
postId != null
|
||||
? ({ pageParam }) => fetchComments(postId, pageParam)
|
||||
: skipToken,
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="props.postId == null">Select a post</span>
|
||||
<span v-else-if="isLoading">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<ul v-else>
|
||||
<template v-for="page in data.pages" :key="page.nextId">
|
||||
<li v-for="comment in page.comments" :key="comment.id">{{ comment.text }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
66
docs/framework/vue/reference/functions/useIsFetching.md
Normal file
66
docs/framework/vue/reference/functions/useIsFetching.md
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: useIsFetching
|
||||
title: useIsFetching
|
||||
---
|
||||
|
||||
```ts
|
||||
function useIsFetching(fetchingFilters, queryClient?): Ref<number>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useIsFetching.ts:54](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useIsFetching.ts#L54)
|
||||
|
||||
The `useIsFetching` composable returns a `ref` to the `number` of the queries that your application is
|
||||
loading or fetching in the background (useful for app-wide loading indicators).
|
||||
|
||||
`fetchingFilters` may be a plain object, `MaybeRefDeep`, or a reactive getter (`() => ({ ... })`) — pass a
|
||||
getter if the filters themselves depend on other reactive state.
|
||||
|
||||
## Parameters
|
||||
|
||||
### fetchingFilters
|
||||
|
||||
[`UseIsFetchingFilters`](../type-aliases/UseIsFetchingFilters.md) = `{}`
|
||||
|
||||
The [QueryFilters](../interfaces/QueryFilters.md) to narrow down the matched queries.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`Ref`\<`number`\>
|
||||
|
||||
A `ref` to the `number` of the queries that your application is currently loading or fetching in
|
||||
the background.
|
||||
|
||||
## Examples
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useIsFetching } from '@tanstack/vue-query'
|
||||
|
||||
// How many queries matching the posts prefix are fetching?
|
||||
const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isFetchingPosts">Refreshing posts...</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
A global loading indicator for any query fetching in the background, not just the ones on screen:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useIsFetching } from '@tanstack/vue-query'
|
||||
|
||||
const isFetching = useIsFetching()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isFetching">Queries are fetching in the background...</div>
|
||||
</template>
|
||||
```
|
||||
52
docs/framework/vue/reference/functions/useIsMutating.md
Normal file
52
docs/framework/vue/reference/functions/useIsMutating.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: useIsMutating
|
||||
title: useIsMutating
|
||||
---
|
||||
|
||||
```ts
|
||||
function useIsMutating(filters, queryClient?): Ref<number>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useMutationState.ts:53](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useMutationState.ts#L53)
|
||||
|
||||
The `useIsMutating` composable returns a `ref` to the `number` of mutations that your application currently
|
||||
has `pending` (useful for app-wide loading indicators).
|
||||
|
||||
`filters` may be a plain object, `MaybeRefDeep`, or a reactive getter (`() => ({ ... })`) — pass a getter if
|
||||
the filters themselves depend on other reactive state.
|
||||
|
||||
## Parameters
|
||||
|
||||
### filters
|
||||
|
||||
[`UseIsMutatingFilters`](../type-aliases/UseIsMutatingFilters.md) = `{}`
|
||||
|
||||
The [MutationFilters](../interfaces/MutationFilters.md) to narrow down the matched mutations.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`Ref`\<`number`\>
|
||||
|
||||
A `ref` to the `number` of the mutations that your application currently has `pending`.
|
||||
|
||||
## Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useIsMutating } from '@tanstack/vue-query'
|
||||
|
||||
// How many mutations matching the posts prefix are in progress?
|
||||
const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isMutatingPosts">Saving posts...</span>
|
||||
</template>
|
||||
```
|
||||
204
docs/framework/vue/reference/functions/useMutation.md
Normal file
204
docs/framework/vue/reference/functions/useMutation.md
Normal file
@@ -0,0 +1,204 @@
|
||||
---
|
||||
id: useMutation
|
||||
title: useMutation
|
||||
---
|
||||
|
||||
```ts
|
||||
function useMutation<TData, TError, TVariables, TOnMutateResult>(options, queryClient?): UseMutationReturnType<TData, TError, TVariables, TOnMutateResult>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useMutation.ts:231](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useMutation.ts#L231)
|
||||
|
||||
Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
|
||||
`useMutation` is the composable for that.
|
||||
|
||||
`options` may be a plain object, a `ref`, or a reactive getter (`() => ({ ... })`) — pass a getter
|
||||
if the options themselves depend on other reactive state.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
### TVariables
|
||||
|
||||
`TVariables` = `void`
|
||||
|
||||
### TOnMutateResult
|
||||
|
||||
`TOnMutateResult` = `unknown`
|
||||
|
||||
## Parameters
|
||||
|
||||
### options
|
||||
|
||||
[`UseMutationOptions`](../type-aliases/UseMutationOptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
The [UseMutationOptions](../type-aliases/UseMutationOptions.md) to use — everything you can pass to `useMutation`.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
[`UseMutationReturnType`](../type-aliases/UseMutationReturnType.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
|
||||
|
||||
`mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
|
||||
argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
|
||||
mutation definition. Hook-level callbacks (passed to `options`) fire for every mutation; per-call
|
||||
callbacks fire only for the latest call you've made.
|
||||
|
||||
## See
|
||||
|
||||
[mutationOptions](mutationOptions.md) to share these options across multiple `useMutation` call sites, or to look
|
||||
the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).
|
||||
|
||||
## Examples
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
||||
})
|
||||
|
||||
function onAdd() {
|
||||
addMutation.mutate('Item', {
|
||||
onError: (error) => console.error('Failed to add item:', error),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="onAdd">Add</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
Rendering the mutation's own state, rather than just firing it off:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="addMutation.isPending.value">Adding todo...</div>
|
||||
<div v-else>
|
||||
<div v-if="addMutation.isError.value">An error occurred: {{ addMutation.error.value.message }}</div>
|
||||
<button @click="addMutation.mutate('Item')">Add</button>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Optimistic update via `onMutate`, rolling back on `onError`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onMutate: async (newTodo: string) => {
|
||||
await queryClient.cancelQueries({ queryKey: ['todos'] })
|
||||
const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
|
||||
|
||||
queryClient.setQueryData<Array<string>>(['todos'], (old) => [
|
||||
...(old ?? []),
|
||||
newTodo,
|
||||
])
|
||||
|
||||
// Passed to `onError` as `onMutateResult` if the mutation fails.
|
||||
return { previousTodos }
|
||||
},
|
||||
onError: (_err, _newTodo, onMutateResult) => {
|
||||
queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="addMutation.mutate('Item')">Add</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
|
||||
promise per call instead, so you can wait for all of them when they succeed:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
||||
})
|
||||
|
||||
async function handleAddAll(todos: Array<string>) {
|
||||
try {
|
||||
await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
|
||||
} catch (error) {
|
||||
console.error('Failed to add todos:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])">Add all</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
If some of the mutations above can fail independently of the others, and you want to know which ones
|
||||
did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
|
||||
`Promise.allSettled`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: addTodo,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
||||
})
|
||||
|
||||
async function handleAddAll(todos: Array<string>) {
|
||||
const addResults = await Promise.allSettled(
|
||||
todos.map((todo) => addMutation.mutateAsync(todo)),
|
||||
)
|
||||
|
||||
addResults.forEach((addResult, index) => {
|
||||
if (addResult.status === 'rejected') {
|
||||
console.error(`Failed to add "${todos[index]}":`, addResult.reason)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])">Add all</button>
|
||||
</template>
|
||||
```
|
||||
111
docs/framework/vue/reference/functions/useMutationState.md
Normal file
111
docs/framework/vue/reference/functions/useMutationState.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: useMutationState
|
||||
title: useMutationState
|
||||
---
|
||||
|
||||
```ts
|
||||
function useMutationState<TResult, TMutation>(options, queryClient?): Readonly<Ref<TResult[]>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useMutationState.ts:196](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useMutationState.ts#L196)
|
||||
|
||||
`useMutationState` is a composable that gives you access to all mutations in the `MutationCache`. You can
|
||||
pass `filters` ([MutationFilters](../interfaces/MutationFilters.md)) to narrow down your mutations, and `select` to transform the
|
||||
mutation state.
|
||||
|
||||
`options` may be a plain object or a reactive getter (`() => ({ ... })`) — pass a getter if the filters
|
||||
themselves depend on other reactive state.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TResult
|
||||
|
||||
`TResult` = [`MutationState`](../interfaces/MutationState.md)\<`unknown`, `Error`, `unknown`, `unknown`\>
|
||||
|
||||
### TMutation
|
||||
|
||||
`TMutation` *extends* [`Mutation`](../classes/Mutation.md)\<`any`, `any`, `any`, `any`\> = `MutationTypeFromResult`\<`TResult`\>
|
||||
|
||||
## Parameters
|
||||
|
||||
### options
|
||||
|
||||
The `filters` to narrow down matched mutations, and an optional `select` to transform the
|
||||
mutation state.
|
||||
|
||||
[`MutationStateOptions`](../type-aliases/MutationStateOptions.md)\<`TResult`, `TMutation`\> | () => [`MutationStateOptions`](../type-aliases/MutationStateOptions.md)\<`TResult`, `TMutation`\>
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`Readonly`\<`Ref`\<`TResult`[]\>\>
|
||||
|
||||
A `ref` to an Array of whatever `select` returns for each matching mutation.
|
||||
|
||||
## Examples
|
||||
|
||||
Get all variables of all running mutations:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutationState } from '@tanstack/vue-query'
|
||||
|
||||
const pendingVariables = useMutationState({
|
||||
filters: { status: 'pending' },
|
||||
select: (mutation) => mutation.state.variables,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>{{ pendingVariables.length }} posts saving...</template>
|
||||
```
|
||||
|
||||
Get all data for specific mutations via the `mutationKey`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useMutation, useMutationState } from '@tanstack/vue-query'
|
||||
|
||||
const mutationKey = ['posts']
|
||||
|
||||
// Some mutation that we want to get the state for
|
||||
const mutation = useMutation({
|
||||
mutationKey,
|
||||
mutationFn: createPosts,
|
||||
})
|
||||
|
||||
const savedPosts = useMutationState({
|
||||
// this mutation key needs to match the mutation key of the given mutation (see above)
|
||||
filters: { mutationKey, status: 'success' },
|
||||
select: (mutation) => mutation.state.data,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="mutation.mutate(['New Post'])">
|
||||
Create post ({{ savedPosts.length }} saved so far)
|
||||
</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new
|
||||
entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the
|
||||
last item that `useMutationState` returns to get the latest successful invocation:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useMutationState } from '@tanstack/vue-query'
|
||||
|
||||
const savedPosts = useMutationState({
|
||||
filters: { mutationKey: ['posts'], status: 'success' },
|
||||
select: (mutation) => mutation.state.data,
|
||||
})
|
||||
|
||||
const latestSavedPost = computed(() => savedPosts.value[savedPosts.value.length - 1])
|
||||
</script>
|
||||
|
||||
<template>{{ latestSavedPost ? 'Saved' : 'Nothing saved yet' }}</template>
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: usePrefetchInfiniteQuery
|
||||
title: usePrefetchInfiniteQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function usePrefetchInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/usePrefetchInfiniteQuery.ts:94](https://github.com/TanStack/query/blob/main/packages/vue-query/src/usePrefetchInfiniteQuery.ts#L94)
|
||||
|
||||
`usePrefetchInfiniteQuery` does not return anything — it fires a prefetch as a reactive side effect, useful
|
||||
for kicking off a fetch ahead of the component that will actually render the data with `useInfiniteQuery`.
|
||||
You can pass everything to `usePrefetchInfiniteQuery` that you can pass to `queryClient.infiniteQuery`,
|
||||
though `queryKey`, `initialPageParam`, and `getNextPageParam` are always required, and `queryFn` is required
|
||||
unless a default query function has been defined.
|
||||
|
||||
`getNextPageParam` receives both the last page of the infinite list of data and the full array of all pages,
|
||||
as well as pageParam information, and should return a single variable that will be passed to your query
|
||||
function as `context.pageParam`. Return `undefined` or `null` to indicate there is no next page available.
|
||||
|
||||
The prefetch is skipped if the query already has any cached state — including a `pending`/`error` state left
|
||||
over from a previous attempt — so it won't refetch data that's already there or already in flight. It
|
||||
re-runs whenever a reactive dependency in `options` (built with `infiniteQueryOptions`, for example) changes.
|
||||
|
||||
Fire this during render, before a suspense boundary that wraps a component using `useInfiniteQuery`'s
|
||||
`suspense()` — see the [Suspense guide](https://tanstack.com/query/latest/docs/framework/vue/guides/suspense).
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\>
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
## Parameters
|
||||
|
||||
### options
|
||||
|
||||
`MaybeRefOrGetter`\<`MaybeRefDeep`\<[`UsePrefetchInfiniteQueryOptions`](../type-aliases/UsePrefetchInfiniteQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>\>\>
|
||||
|
||||
A `ref`, plain value, or reactive getter resolving to the
|
||||
[UsePrefetchInfiniteQueryOptions](../type-aliases/UsePrefetchInfiniteQueryOptions.md) to use — everything you can pass to `queryClient.infiniteQuery`.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`void`
|
||||
|
||||
`void` — nothing is returned.
|
||||
|
||||
## Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { infiniteQueryOptions, usePrefetchInfiniteQuery } from '@tanstack/vue-query'
|
||||
import Projects from './Projects.vue'
|
||||
|
||||
const projectsOptions = infiniteQueryOptions({
|
||||
queryKey: ['projects'],
|
||||
queryFn: ({ pageParam }) => fetchProjects(pageParam),
|
||||
initialPageParam: 0,
|
||||
getNextPageParam: (lastPage) => lastPage.nextId,
|
||||
})
|
||||
|
||||
// Fire the prefetch as soon as this component runs, before `Projects` mounts and calls `useInfiniteQuery`.
|
||||
usePrefetchInfiniteQuery(projectsOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Projects />
|
||||
</template>
|
||||
```
|
||||
85
docs/framework/vue/reference/functions/usePrefetchQuery.md
Normal file
85
docs/framework/vue/reference/functions/usePrefetchQuery.md
Normal file
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: usePrefetchQuery
|
||||
title: usePrefetchQuery
|
||||
---
|
||||
|
||||
```ts
|
||||
function usePrefetchQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey>(options, queryClient?): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/usePrefetchQuery.ts:86](https://github.com/TanStack/query/blob/main/packages/vue-query/src/usePrefetchQuery.ts#L86)
|
||||
|
||||
`usePrefetchQuery` does not return anything — it fires a prefetch as a reactive side effect, useful for
|
||||
kicking off a fetch ahead of the component that will actually render the data with `useQuery`. You can pass
|
||||
everything to `usePrefetchQuery` that you can pass to `queryClient.query`, though `queryKey` is always
|
||||
required, and `queryFn` is required unless a default query function has been defined.
|
||||
|
||||
The prefetch is skipped if the query already has any cached state — including a `pending`/`error` state left
|
||||
over from a previous attempt — so it won't refetch data that's already there or already in flight. It
|
||||
re-runs whenever a reactive dependency in `options` (built with `queryOptions`, for example) changes.
|
||||
|
||||
Fire this during render, before a suspense boundary that wraps a component using `useQuery`'s `suspense()`
|
||||
— see the [Suspense guide](https://tanstack.com/query/latest/docs/framework/vue/guides/suspense).
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryData
|
||||
|
||||
`TQueryData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
## Parameters
|
||||
|
||||
### options
|
||||
|
||||
`MaybeRefOrGetter`\<`MaybeRefDeep`\<[`UsePrefetchQueryOptions`](../type-aliases/UsePrefetchQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryData`, `TQueryKey`\>\>\>
|
||||
|
||||
A `ref`, plain value, or reactive getter resolving to the [UsePrefetchQueryOptions](../type-aliases/UsePrefetchQueryOptions.md) to
|
||||
use — everything you can pass to `queryClient.query`.
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`void`
|
||||
|
||||
`void` — nothing is returned.
|
||||
|
||||
## Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { usePrefetchQuery } from '@tanstack/vue-query'
|
||||
import Posts from './Posts.vue'
|
||||
|
||||
// Fire the prefetch as soon as this component runs, before `Posts` mounts and calls `useQuery`.
|
||||
usePrefetchQuery({
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Posts />
|
||||
</template>
|
||||
```
|
||||
156
docs/framework/vue/reference/functions/useQueries.md
Normal file
156
docs/framework/vue/reference/functions/useQueries.md
Normal file
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: useQueries
|
||||
title: useQueries
|
||||
---
|
||||
|
||||
```ts
|
||||
function useQueries<T, TCombinedResult>(__namedParameters, queryClient?): Readonly<Ref<TCombinedResult>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useQueries.ts:357](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useQueries.ts#L357)
|
||||
|
||||
The `useQueries` composable can be used to fetch a variable number of queries.
|
||||
|
||||
The `queries` option accepts an array of query option objects mostly identical to `useQuery`'s. It may be a
|
||||
plain array, a `ref`/reactive array (each entry tracked individually), or a getter function — pass a getter
|
||||
if the array itself (its length, or which queries are in it) depends on other reactive state.
|
||||
|
||||
Having the same query key more than once in the array of query objects may cause some data to be shared
|
||||
between queries. To avoid this, consider de-duplicating the queries and map the results back to the desired
|
||||
structure.
|
||||
|
||||
The `combine` option can be used to combine the results of the queries into a single value. The result will
|
||||
be structurally shared to be as referentially stable as possible.
|
||||
|
||||
`placeholderData` is supported here too, but unlike `useQuery`, it doesn't receive information from
|
||||
previously rendered queries, because the number of queries can differ between renders.
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### T
|
||||
|
||||
`T` *extends* `any`[]
|
||||
|
||||
### TCombinedResult
|
||||
|
||||
`TCombinedResult` = `T` *extends* \[\] ? \[\] : `T` *extends* \[`Head`\] ? \[`GetUseQueryResult`\<`Head`\>\] : `T` *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseQueryResult`\<`Head`\>, `GetUseQueryResult`\<`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...Tails[]`\] *extends* \[\] ? \[\] : \[`...Tails[]`\] *extends* \[`Head`\] ? \[`GetUseQueryResult`\<`Head`\>, `GetUseQueryResult`\<`Head`\>, `GetUseQueryResult`\<`Head`\>\] : \[`...Tails[]`\] *extends* \[`Head`, `...Tails[]`\] ? \[`...(...)[]`\] *extends* \[\] ? \[\] : ... *extends* ... ? ... : ... : \[`...{ [K in (...)]: (...) }[]`\] : \[...\{ \[K in string \| number \| symbol\]: GetUseQueryResult\<Tails\[K\<(...)\>\]\> \}\[\]\] : \{ \[K in string \| number \| symbol\]: GetUseQueryResult\<T\[K\<K\>\]\> \}
|
||||
|
||||
## Parameters
|
||||
|
||||
### \_\_namedParameters
|
||||
|
||||
`ShallowOption` & `object`
|
||||
|
||||
### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
## Returns
|
||||
|
||||
`Readonly`\<`Ref`\<`TCombinedResult`\>\>
|
||||
|
||||
A `ref` to the combined result. Without `combine`, this is an array with all the query results, in
|
||||
the same order as the input. When `combine` is provided, this is the value returned by `combine` instead.
|
||||
|
||||
## Examples
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQueries } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ ids: Array<number> }>()
|
||||
|
||||
const postQueries = useQueries({
|
||||
queries: () =>
|
||||
props.ids.map((id) => ({
|
||||
queryKey: ['post', id],
|
||||
queryFn: () => fetchPost(id),
|
||||
staleTime: Infinity,
|
||||
})),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="(query, index) in postQueries" :key="props.ids[index]">
|
||||
<span v-if="query.isPending">Loading...</span>
|
||||
<span v-else-if="query.isError">Error: {{ query.error.message }}</span>
|
||||
<span v-else>{{ query.data.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
Combining results into a single value:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQueries } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ ids: Array<number> }>()
|
||||
|
||||
const combined = useQueries({
|
||||
queries: () =>
|
||||
props.ids.map((id) => ({
|
||||
queryKey: ['post', id],
|
||||
queryFn: () => fetchPost(id),
|
||||
})),
|
||||
combine: (postQueries) => ({
|
||||
data: postQueries.map((query) => query.data),
|
||||
isPending: postQueries.some((query) => query.isPending),
|
||||
isError: postQueries.some((query) => query.isError),
|
||||
}),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="combined.isPending">Loading...</span>
|
||||
<span v-else-if="combined.isError">Error!</span>
|
||||
<ul v-else>
|
||||
<li v-for="post in combined.data" :key="post.id">{{ post.title }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
Typing `select` via [queryOptions](queryOptions.md). Note that spreading a `queryOptions` result and overriding
|
||||
`select` inline still falls back to `unknown` — wrap the spread in `queryOptions` again so the override is
|
||||
resolved before it reaches `useQueries`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { queryOptions, useQueries } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ id: number }>()
|
||||
|
||||
const postOptions = (id: number) =>
|
||||
queryOptions({
|
||||
queryKey: ['post', id],
|
||||
queryFn: () => fetchPost(id),
|
||||
})
|
||||
|
||||
const [{ data: broken }] = useQueries({
|
||||
queries: () => [
|
||||
{
|
||||
...postOptions(props.id),
|
||||
// ❌ `data` is `unknown` here
|
||||
select: (data) => data.title,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const [{ data: fixed }] = useQueries({
|
||||
queries: () => [
|
||||
queryOptions({
|
||||
...postOptions(props.id),
|
||||
// ✅ `data` is `Post`
|
||||
select: (data) => data.title,
|
||||
}),
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ fixed }}</h1>
|
||||
</template>
|
||||
```
|
||||
359
docs/framework/vue/reference/functions/useQuery.md
Normal file
359
docs/framework/vue/reference/functions/useQuery.md
Normal file
@@ -0,0 +1,359 @@
|
||||
---
|
||||
id: useQuery
|
||||
title: useQuery
|
||||
---
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryDefinedReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useQuery.ts:65](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useQuery.ts#L65)
|
||||
|
||||
This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` or a reactive getter for the array itself, or `ref`s and
|
||||
reactive getters as individual entries. Other options are read once when passed as a plain value, and stay
|
||||
reactive when passed as a `ref` or a `computed`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`DefinedInitialQueryOptions`](../type-aliases/DefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The [DefinedInitialQueryOptions](../type-aliases/DefinedInitialQueryOptions.md) to use — everything you can pass to `useQuery`, with
|
||||
`initialData` set.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseQueryDefinedReturnType`](../type-aliases/UseQueryDefinedReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The current query result, typed so that `data` is never `undefined` (`status` never resolves to
|
||||
`pending` in this overload's type, since `initialData` guarantees data upfront).
|
||||
|
||||
### Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
// `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
|
||||
// so the list stays visible alongside the error.
|
||||
const { data, isError, error } = useQuery({
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
initialData: [],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isError">Error: {{ error.message }}</span>
|
||||
<ul>
|
||||
<li v-for="post in data" :key="post.id">{{ post.title }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useQuery.ts:206](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useQuery.ts#L206)
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` or a reactive getter for the array itself, or `ref`s and
|
||||
reactive getters as individual entries. Other options are read once when passed as a plain value, and stay
|
||||
reactive when passed as a `ref` or a `computed`.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
[`UndefinedInitialQueryOptions`](../type-aliases/UndefinedInitialQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>
|
||||
|
||||
The [UndefinedInitialQueryOptions](../type-aliases/UndefinedInitialQueryOptions.md) to use — everything you can pass to `useQuery`.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseQueryReturnType`](../type-aliases/UseQueryReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The current query result. `status` is `pending` if there is no cached data to display, `error` if
|
||||
the last fetch attempt failed, or `success` if the query has data to display.
|
||||
|
||||
### Examples
|
||||
|
||||
A query key built from a reactive `ref` — the query refetches whenever `postId` changes:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const postId = ref(1)
|
||||
const { status, data, error } = useQuery({
|
||||
queryKey: ['post', postId],
|
||||
queryFn: () => fetchPost(postId.value),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="status === 'pending'">Loading...</span>
|
||||
<span v-else-if="status === 'error'">Error: {{ error.message }}</span>
|
||||
<h1 v-else>{{ data.title }}</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
`select` derives whatever `data` a component needs from the cached value, without changing what's
|
||||
actually stored in the cache — the cache still holds the full `Post[]`, but `data` here is a `number`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const { data, isPending, isError, error } = useQuery({
|
||||
queryKey: ['posts'],
|
||||
queryFn: fetchPosts,
|
||||
select: (posts) => posts.length,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isPending">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<span v-else>{{ data }} posts</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
|
||||
loading state doesn't show while the query is disabled:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ postId: number | undefined }>()
|
||||
|
||||
const { data, isLoading, isError, error } = useQuery({
|
||||
queryKey: ['post', props.postId],
|
||||
queryFn: () => fetchPost(props.postId!),
|
||||
enabled: () => props.postId != null,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="props.postId == null">Select a post</span>
|
||||
<span v-else-if="isLoading">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<h1 v-else>{{ data?.title }}</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
Seeding a detail query from an already-cached list, to skip the loading state:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ postId: number }>()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data, isError, error } = useQuery({
|
||||
queryKey: ['post', props.postId],
|
||||
queryFn: () => fetchPost(props.postId),
|
||||
initialData: () =>
|
||||
queryClient
|
||||
.getQueryData<Array<Post>>(['posts'])
|
||||
?.find((post) => post.id === props.postId),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isError">Error: {{ error.message }}</span>
|
||||
<h1 v-else>{{ data?.title }}</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
Paginated data, keeping the previous page's data visible while the next page loads:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { keepPreviousData, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const page = ref(0)
|
||||
|
||||
const { data, isPlaceholderData, isError, error } = useQuery({
|
||||
queryKey: ['posts', page],
|
||||
queryFn: () => fetchPosts(page.value),
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="isError">Error: {{ error.message }}</span>
|
||||
<template v-else>
|
||||
<ul>
|
||||
<li v-for="post in data" :key="post.id">{{ post.title }}</li>
|
||||
</ul>
|
||||
<button :disabled="isPlaceholderData" @click="page++">Next Page</button>
|
||||
</template>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Call Signature
|
||||
|
||||
```ts
|
||||
function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryReturnType<TData, TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useQuery.ts:282](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useQuery.ts#L282)
|
||||
|
||||
Fallback overload for options whose `initialData` presence isn't statically known — for example, a
|
||||
`ref`/reactive object built up conditionally, rather than a plain object literal. Prefer one of the other
|
||||
overloads when possible, since they infer whether `data` can be `undefined` from `initialData` directly.
|
||||
|
||||
`enabled` tracks reactive dependencies automatically as a `ref`, a plain value, or a reactive getter
|
||||
(`() => ...`). `queryKey` reacts through a `ref` or a reactive getter for the array itself, or `ref`s and
|
||||
reactive getters as individual entries.
|
||||
|
||||
When `options` itself is a reactive getter, the whole object is re-evaluated on every change to its
|
||||
dependencies, so any option inside it — not just `queryKey` and `enabled` — can change over time.
|
||||
|
||||
### Type Parameters
|
||||
|
||||
#### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
#### TError
|
||||
|
||||
`TError` = `Error`
|
||||
|
||||
#### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
#### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[]
|
||||
|
||||
### Parameters
|
||||
|
||||
#### options
|
||||
|
||||
`MaybeRefOrGetter`\<[`UseQueryOptions`](../type-aliases/UseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryFnData`, `TQueryKey`\>\>
|
||||
|
||||
A `ref`, plain value, or reactive getter resolving to the [UseQueryOptions](../type-aliases/UseQueryOptions.md) to use.
|
||||
|
||||
#### queryClient?
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
Use this to use a custom `QueryClient`. Otherwise, the one provided by `VueQueryPlugin`
|
||||
will be used.
|
||||
|
||||
### Returns
|
||||
|
||||
[`UseQueryReturnType`](../type-aliases/UseQueryReturnType.md)\<`TData`, `TError`\>
|
||||
|
||||
The current query result, with `data` typed as possibly `undefined`.
|
||||
|
||||
### Examples
|
||||
|
||||
Passing a whole-options getter so `staleTime` reacts to a setting stored elsewhere, not just `queryKey`:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ id: number; staleTime: number }>()
|
||||
|
||||
const { data } = useQuery(() => ({
|
||||
queryKey: ['post', props.id],
|
||||
queryFn: () => fetchPost(props.id),
|
||||
staleTime: props.staleTime,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 v-if="data">{{ data.title }}</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
`skipToken` disables the query in a type-safe way, without a non-null assertion on `props.postId` —
|
||||
`queryFn` is only ever called when it's defined. The whole-options getter re-evaluates `queryFn` on every
|
||||
change to `props.postId`. `queryFn` can also be a `computed`, but never a bare getter, since a function
|
||||
there is the query function itself. `refetch` doesn't work while `queryFn` is `skipToken` — use
|
||||
`enabled: false` instead if you need to trigger the query manually:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { skipToken, useQuery } from '@tanstack/vue-query'
|
||||
|
||||
const props = defineProps<{ postId: number | undefined }>()
|
||||
|
||||
const { data, isLoading, isError, error } = useQuery(() => {
|
||||
const postId = props.postId
|
||||
return {
|
||||
queryKey: ['post', postId],
|
||||
queryFn: postId != null ? () => fetchPost(postId) : skipToken,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="props.postId == null">Select a post</span>
|
||||
<span v-else-if="isLoading">Loading...</span>
|
||||
<span v-else-if="isError">Error: {{ error.message }}</span>
|
||||
<h1 v-else>{{ data?.title }}</h1>
|
||||
</template>
|
||||
```
|
||||
44
docs/framework/vue/reference/functions/useQueryClient.md
Normal file
44
docs/framework/vue/reference/functions/useQueryClient.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: useQueryClient
|
||||
title: useQueryClient
|
||||
---
|
||||
|
||||
```ts
|
||||
function useQueryClient(id): QueryClient;
|
||||
```
|
||||
|
||||
Defined in: [packages/vue-query/src/useQueryClient.ts:27](https://github.com/TanStack/query/blob/main/packages/vue-query/src/useQueryClient.ts#L27)
|
||||
|
||||
Retrieves the `QueryClient` installed by `VueQueryPlugin`, via Vue's `inject`. Must be called inside
|
||||
`setup()` or another function that supports an injection context.
|
||||
|
||||
## Parameters
|
||||
|
||||
### id
|
||||
|
||||
`string` = `''`
|
||||
|
||||
The `queryClientKey` passed to `VueQueryPlugin` — only needed when multiple `QueryClient`s are
|
||||
installed in the same app.
|
||||
|
||||
## Returns
|
||||
|
||||
[`QueryClient`](../classes/QueryClient.md)
|
||||
|
||||
## Throws
|
||||
|
||||
If called outside an injection context, or if no `QueryClient` was installed via `VueQueryPlugin`.
|
||||
|
||||
## Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
function invalidate() {
|
||||
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
||||
}
|
||||
</script>
|
||||
```
|
||||
207
docs/framework/vue/reference/index.md
Normal file
207
docs/framework/vue/reference/index.md
Normal file
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: "@tanstack/vue-query"
|
||||
title: "@tanstack/vue-query"
|
||||
---
|
||||
|
||||
## Classes
|
||||
|
||||
- [CancelledError](classes/CancelledError.md)
|
||||
- [InfiniteQueryObserver](classes/InfiniteQueryObserver.md)
|
||||
- [Mutation](classes/Mutation.md)
|
||||
- [MutationCache](classes/MutationCache.md)
|
||||
- [MutationObserver](classes/MutationObserver.md)
|
||||
- [QueriesObserver](classes/QueriesObserver.md)
|
||||
- [Query](classes/Query.md)
|
||||
- [QueryCache](classes/QueryCache.md)
|
||||
- [QueryClient](classes/QueryClient.md)
|
||||
- [QueryObserver](classes/QueryObserver.md)
|
||||
|
||||
## Interfaces
|
||||
|
||||
- [CancelOptions](interfaces/CancelOptions.md)
|
||||
- [DefaultOptions](interfaces/DefaultOptions.md)
|
||||
- [DehydratedState](interfaces/DehydratedState.md)
|
||||
- [DehydrateOptions](interfaces/DehydrateOptions.md)
|
||||
- [~~EnsureQueryDataOptions~~](interfaces/EnsureQueryDataOptions.md)
|
||||
- [FetchNextPageOptions](interfaces/FetchNextPageOptions.md)
|
||||
- [FetchPreviousPageOptions](interfaces/FetchPreviousPageOptions.md)
|
||||
- [~~FetchQueryOptions~~](interfaces/FetchQueryOptions.md)
|
||||
- [FocusManager](interfaces/FocusManager.md)
|
||||
- [HydrateOptions](interfaces/HydrateOptions.md)
|
||||
- [InfiniteData](interfaces/InfiniteData.md)
|
||||
- [InfiniteQueryObserverBaseResult](interfaces/InfiniteQueryObserverBaseResult.md)
|
||||
- [InfiniteQueryObserverLoadingErrorResult](interfaces/InfiniteQueryObserverLoadingErrorResult.md)
|
||||
- [InfiniteQueryObserverLoadingResult](interfaces/InfiniteQueryObserverLoadingResult.md)
|
||||
- [InfiniteQueryObserverOptions](interfaces/InfiniteQueryObserverOptions.md)
|
||||
- [InfiniteQueryObserverPendingResult](interfaces/InfiniteQueryObserverPendingResult.md)
|
||||
- [InfiniteQueryObserverPlaceholderResult](interfaces/InfiniteQueryObserverPlaceholderResult.md)
|
||||
- [InfiniteQueryObserverRefetchErrorResult](interfaces/InfiniteQueryObserverRefetchErrorResult.md)
|
||||
- [InfiniteQueryObserverSuccessResult](interfaces/InfiniteQueryObserverSuccessResult.md)
|
||||
- [InfiniteQueryPageParamsOptions](interfaces/InfiniteQueryPageParamsOptions.md)
|
||||
- [InitialPageParam](interfaces/InitialPageParam.md)
|
||||
- [InvalidateOptions](interfaces/InvalidateOptions.md)
|
||||
- [InvalidateQueryFilters](interfaces/InvalidateQueryFilters.md)
|
||||
- [MutateOptions](interfaces/MutateOptions.md)
|
||||
- [MutationCacheConfig](interfaces/MutationCacheConfig.md)
|
||||
- [MutationFilters](interfaces/MutationFilters.md)
|
||||
- [MutationObserverBaseResult](interfaces/MutationObserverBaseResult.md)
|
||||
- [MutationObserverErrorResult](interfaces/MutationObserverErrorResult.md)
|
||||
- [MutationObserverIdleResult](interfaces/MutationObserverIdleResult.md)
|
||||
- [MutationObserverLoadingResult](interfaces/MutationObserverLoadingResult.md)
|
||||
- [MutationObserverOptions](interfaces/MutationObserverOptions.md)
|
||||
- [MutationObserverSuccessResult](interfaces/MutationObserverSuccessResult.md)
|
||||
- [MutationState](interfaces/MutationState.md)
|
||||
- [NotifyEvent](interfaces/NotifyEvent.md)
|
||||
- [OnlineManager](interfaces/OnlineManager.md)
|
||||
- [QueriesObserverOptions](interfaces/QueriesObserverOptions.md)
|
||||
- [QueryCacheConfig](interfaces/QueryCacheConfig.md)
|
||||
- [QueryClientConfig](interfaces/QueryClientConfig.md)
|
||||
- [QueryExecuteOptions](interfaces/QueryExecuteOptions.md)
|
||||
- [QueryFilters](interfaces/QueryFilters.md)
|
||||
- [QueryObserverBaseResult](interfaces/QueryObserverBaseResult.md)
|
||||
- [QueryObserverLoadingErrorResult](interfaces/QueryObserverLoadingErrorResult.md)
|
||||
- [QueryObserverLoadingResult](interfaces/QueryObserverLoadingResult.md)
|
||||
- [QueryObserverOptions](interfaces/QueryObserverOptions.md)
|
||||
- [QueryObserverPendingResult](interfaces/QueryObserverPendingResult.md)
|
||||
- [QueryObserverPlaceholderResult](interfaces/QueryObserverPlaceholderResult.md)
|
||||
- [QueryObserverRefetchErrorResult](interfaces/QueryObserverRefetchErrorResult.md)
|
||||
- [QueryObserverSuccessResult](interfaces/QueryObserverSuccessResult.md)
|
||||
- [QueryState](interfaces/QueryState.md)
|
||||
- [RefetchOptions](interfaces/RefetchOptions.md)
|
||||
- [RefetchQueryFilters](interfaces/RefetchQueryFilters.md)
|
||||
- [Register](interfaces/Register.md)
|
||||
- [ResetOptions](interfaces/ResetOptions.md)
|
||||
- [ResultOptions](interfaces/ResultOptions.md)
|
||||
- [SetDataOptions](interfaces/SetDataOptions.md)
|
||||
- [TimeoutManager](interfaces/TimeoutManager.md)
|
||||
|
||||
## Type Aliases
|
||||
|
||||
- [AnyDataTag](type-aliases/AnyDataTag.md)
|
||||
- [DataTag](type-aliases/DataTag.md)
|
||||
- [dataTagErrorSymbol](type-aliases/dataTagErrorSymbol.md)
|
||||
- [dataTagSymbol](type-aliases/dataTagSymbol.md)
|
||||
- [DefaultedInfiniteQueryObserverOptions](type-aliases/DefaultedInfiniteQueryObserverOptions.md)
|
||||
- [DefaultedQueryObserverOptions](type-aliases/DefaultedQueryObserverOptions.md)
|
||||
- [DefaultError](type-aliases/DefaultError.md)
|
||||
- [DefinedInfiniteQueryObserverResult](type-aliases/DefinedInfiniteQueryObserverResult.md)
|
||||
- [DefinedInitialDataInfiniteOptions](type-aliases/DefinedInitialDataInfiniteOptions.md)
|
||||
- [DefinedInitialQueryOptions](type-aliases/DefinedInitialQueryOptions.md)
|
||||
- [DefinedInitialQueryOptionsWithDataTag](type-aliases/DefinedInitialQueryOptionsWithDataTag.md)
|
||||
- [DefinedQueryObserverResult](type-aliases/DefinedQueryObserverResult.md)
|
||||
- [DistributiveOmit](type-aliases/DistributiveOmit.md)
|
||||
- [~~EnsureInfiniteQueryDataOptions~~](type-aliases/EnsureInfiniteQueryDataOptions.md)
|
||||
- [~~FetchInfiniteQueryOptions~~](type-aliases/FetchInfiniteQueryOptions.md)
|
||||
- [FetchStatus](type-aliases/FetchStatus.md)
|
||||
- [GetNextPageParamFunction](type-aliases/GetNextPageParamFunction.md)
|
||||
- [GetPreviousPageParamFunction](type-aliases/GetPreviousPageParamFunction.md)
|
||||
- [InferDataFromTag](type-aliases/InferDataFromTag.md)
|
||||
- [InferErrorFromTag](type-aliases/InferErrorFromTag.md)
|
||||
- [InfiniteQueryExecuteOptions](type-aliases/InfiniteQueryExecuteOptions.md)
|
||||
- [InfiniteQueryObserverResult](type-aliases/InfiniteQueryObserverResult.md)
|
||||
- [InitialDataFunction](type-aliases/InitialDataFunction.md)
|
||||
- [ManagedTimerId](type-aliases/ManagedTimerId.md)
|
||||
- [MutateFunction](type-aliases/MutateFunction.md)
|
||||
- [MutateFunctionRest](type-aliases/MutateFunctionRest.md)
|
||||
- [MutationCacheNotifyEvent](type-aliases/MutationCacheNotifyEvent.md)
|
||||
- [MutationFunction](type-aliases/MutationFunction.md)
|
||||
- [MutationFunctionContext](type-aliases/MutationFunctionContext.md)
|
||||
- [MutationKey](type-aliases/MutationKey.md)
|
||||
- [MutationMeta](type-aliases/MutationMeta.md)
|
||||
- [MutationObserverResult](type-aliases/MutationObserverResult.md)
|
||||
- [MutationOptions](type-aliases/MutationOptions.md)
|
||||
- [MutationScope](type-aliases/MutationScope.md)
|
||||
- [MutationStateOptions](type-aliases/MutationStateOptions.md)
|
||||
- [MutationStatus](type-aliases/MutationStatus.md)
|
||||
- [NetworkMode](type-aliases/NetworkMode.md)
|
||||
- [NonUndefinedGuard](type-aliases/NonUndefinedGuard.md)
|
||||
- [NotifyEventType](type-aliases/NotifyEventType.md)
|
||||
- [NotifyOnChangeProps](type-aliases/NotifyOnChangeProps.md)
|
||||
- [OmitKeyof](type-aliases/OmitKeyof.md)
|
||||
- [Override](type-aliases/Override.md)
|
||||
- [PlaceholderDataFunction](type-aliases/PlaceholderDataFunction.md)
|
||||
- [QueriesPlaceholderDataFunction](type-aliases/QueriesPlaceholderDataFunction.md)
|
||||
- [QueryBooleanOption](type-aliases/QueryBooleanOption.md)
|
||||
- [QueryCacheNotifyEvent](type-aliases/QueryCacheNotifyEvent.md)
|
||||
- [QueryFunction](type-aliases/QueryFunction.md)
|
||||
- [QueryFunctionContext](type-aliases/QueryFunctionContext.md)
|
||||
- [QueryKey](type-aliases/QueryKey.md)
|
||||
- [QueryKeyHashFunction](type-aliases/QueryKeyHashFunction.md)
|
||||
- [QueryKeyWithDataTag](type-aliases/QueryKeyWithDataTag.md)
|
||||
- [QueryMeta](type-aliases/QueryMeta.md)
|
||||
- [QueryObserverResult](type-aliases/QueryObserverResult.md)
|
||||
- [QueryOptions](type-aliases/QueryOptions.md)
|
||||
- [QueryPersister](type-aliases/QueryPersister.md)
|
||||
- [QueryStatus](type-aliases/QueryStatus.md)
|
||||
- [SkipToken](type-aliases/SkipToken.md)
|
||||
- [StaleTime](type-aliases/StaleTime.md)
|
||||
- [StaleTimeFunction](type-aliases/StaleTimeFunction.md)
|
||||
- [ThrowOnError](type-aliases/ThrowOnError.md)
|
||||
- [TimeoutCallback](type-aliases/TimeoutCallback.md)
|
||||
- [TimeoutProvider](type-aliases/TimeoutProvider.md)
|
||||
- [UndefinedInitialDataInfiniteOptions](type-aliases/UndefinedInitialDataInfiniteOptions.md)
|
||||
- [UndefinedInitialQueryOptions](type-aliases/UndefinedInitialQueryOptions.md)
|
||||
- [UndefinedInitialQueryOptionsWithDataTag](type-aliases/UndefinedInitialQueryOptionsWithDataTag.md)
|
||||
- [UnsetMarker](type-aliases/UnsetMarker.md)
|
||||
- [Updater](type-aliases/Updater.md)
|
||||
- [UseInfiniteQueryOptions](type-aliases/UseInfiniteQueryOptions.md)
|
||||
- [UseInfiniteQueryReturnType](type-aliases/UseInfiniteQueryReturnType.md)
|
||||
- [UseIsFetchingFilters](type-aliases/UseIsFetchingFilters.md)
|
||||
- [UseIsMutatingFilters](type-aliases/UseIsMutatingFilters.md)
|
||||
- [UseMutationOptions](type-aliases/UseMutationOptions.md)
|
||||
- [UseMutationReturnType](type-aliases/UseMutationReturnType.md)
|
||||
- [UsePrefetchInfiniteQueryOptions](type-aliases/UsePrefetchInfiniteQueryOptions.md)
|
||||
- [UsePrefetchQueryOptions](type-aliases/UsePrefetchQueryOptions.md)
|
||||
- [UseQueriesOptions](type-aliases/UseQueriesOptions.md)
|
||||
- [UseQueriesResults](type-aliases/UseQueriesResults.md)
|
||||
- [UseQueryDefinedReturnType](type-aliases/UseQueryDefinedReturnType.md)
|
||||
- [UseQueryOptions](type-aliases/UseQueryOptions.md)
|
||||
- [UseQueryReturnType](type-aliases/UseQueryReturnType.md)
|
||||
- [VueQueryPluginOptions](type-aliases/VueQueryPluginOptions.md)
|
||||
- [WithRequired](type-aliases/WithRequired.md)
|
||||
|
||||
## Variables
|
||||
|
||||
- [dataTagErrorSymbol](variables/dataTagErrorSymbol.md)
|
||||
- [dataTagSymbol](variables/dataTagSymbol.md)
|
||||
- [defaultScheduler](variables/defaultScheduler.md)
|
||||
- [environmentManager](variables/environmentManager.md)
|
||||
- [focusManager](variables/focusManager.md)
|
||||
- [~~isServer~~](variables/isServer.md)
|
||||
- [notifyManager](variables/notifyManager.md)
|
||||
- [onlineManager](variables/onlineManager.md)
|
||||
- [skipToken](variables/skipToken.md)
|
||||
- [timeoutManager](variables/timeoutManager.md)
|
||||
- [unsetMarker](variables/unsetMarker.md)
|
||||
- [VueQueryPlugin](variables/VueQueryPlugin.md)
|
||||
|
||||
## Functions
|
||||
|
||||
- [defaultShouldDehydrateMutation](functions/defaultShouldDehydrateMutation.md)
|
||||
- [defaultShouldDehydrateQuery](functions/defaultShouldDehydrateQuery.md)
|
||||
- [dehydrate](functions/dehydrate.md)
|
||||
- [dehydrateQuery](functions/dehydrateQuery.md)
|
||||
- [experimental\_streamedQuery](functions/experimental_streamedQuery.md)
|
||||
- [hashKey](functions/hashKey.md)
|
||||
- [hydrate](functions/hydrate.md)
|
||||
- [infiniteQueryOptions](functions/infiniteQueryOptions.md)
|
||||
- [~~isCancelledError~~](functions/isCancelledError.md)
|
||||
- [keepPreviousData](functions/keepPreviousData.md)
|
||||
- [matchMutation](functions/matchMutation.md)
|
||||
- [matchQuery](functions/matchQuery.md)
|
||||
- [mutationOptions](functions/mutationOptions.md)
|
||||
- [noop](functions/noop.md)
|
||||
- [partialMatchKey](functions/partialMatchKey.md)
|
||||
- [queryOptions](functions/queryOptions.md)
|
||||
- [replaceEqualDeep](functions/replaceEqualDeep.md)
|
||||
- [shouldThrowError](functions/shouldThrowError.md)
|
||||
- [useInfiniteQuery](functions/useInfiniteQuery.md)
|
||||
- [useIsFetching](functions/useIsFetching.md)
|
||||
- [useIsMutating](functions/useIsMutating.md)
|
||||
- [useMutation](functions/useMutation.md)
|
||||
- [useMutationState](functions/useMutationState.md)
|
||||
- [usePrefetchInfiniteQuery](functions/usePrefetchInfiniteQuery.md)
|
||||
- [usePrefetchQuery](functions/usePrefetchQuery.md)
|
||||
- [useQueries](functions/useQueries.md)
|
||||
- [useQuery](functions/useQuery.md)
|
||||
- [useQueryClient](functions/useQueryClient.md)
|
||||
26
docs/framework/vue/reference/interfaces/CancelOptions.md
Normal file
26
docs/framework/vue/reference/interfaces/CancelOptions.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
id: CancelOptions
|
||||
title: CancelOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1521](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1521)
|
||||
|
||||
## Properties
|
||||
|
||||
### revert?
|
||||
|
||||
```ts
|
||||
optional revert: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1522](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1522)
|
||||
|
||||
***
|
||||
|
||||
### silent?
|
||||
|
||||
```ts
|
||||
optional silent: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1523](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1523)
|
||||
84
docs/framework/vue/reference/interfaces/DefaultOptions.md
Normal file
84
docs/framework/vue/reference/interfaces/DefaultOptions.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: DefaultOptions
|
||||
title: DefaultOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1507](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1507)
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### dehydrate?
|
||||
|
||||
```ts
|
||||
optional dehydrate: DehydrateOptions;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1518](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1518)
|
||||
|
||||
Default options used when dehydrating the client's caches; see [DehydrateOptions](DehydrateOptions.md).
|
||||
|
||||
***
|
||||
|
||||
### hydrate?
|
||||
|
||||
```ts
|
||||
optional hydrate: object;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1516](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1516)
|
||||
|
||||
Default options used when hydrating queries; see [HydrateOptions](HydrateOptions.md).
|
||||
|
||||
#### deserializeData?
|
||||
|
||||
```ts
|
||||
optional deserializeData: TransformerFn;
|
||||
```
|
||||
|
||||
Transforms a query's `data` after it is read from the dehydrated state, reversing `serializeData`.
|
||||
|
||||
#### mutations?
|
||||
|
||||
```ts
|
||||
optional mutations: MutationOptions<unknown, Error, unknown, unknown>;
|
||||
```
|
||||
|
||||
Default options merged into every mutation restored from the dehydrated state.
|
||||
|
||||
#### queries?
|
||||
|
||||
```ts
|
||||
optional queries: QueryOptions<unknown, Error, unknown, readonly unknown[], never>;
|
||||
```
|
||||
|
||||
Default options merged into every query restored from the dehydrated state.
|
||||
|
||||
***
|
||||
|
||||
### mutations?
|
||||
|
||||
```ts
|
||||
optional mutations: MutationObserverOptions<unknown, TError, unknown, unknown>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1514](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1514)
|
||||
|
||||
Default options applied to every mutation, unless overridden per-mutation.
|
||||
|
||||
***
|
||||
|
||||
### queries?
|
||||
|
||||
```ts
|
||||
optional queries: OmitKeyof<QueryObserverOptions<unknown, TError, unknown, unknown, readonly unknown[], never>, "queryKey" | "suspense", "strictly">;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1509](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1509)
|
||||
|
||||
Default options applied to every query, unless overridden per-query.
|
||||
89
docs/framework/vue/reference/interfaces/DehydrateOptions.md
Normal file
89
docs/framework/vue/reference/interfaces/DehydrateOptions.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: DehydrateOptions
|
||||
title: DehydrateOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:42](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L42)
|
||||
|
||||
Options for `dehydrate`, controlling which queries/mutations are included in the resulting `DehydratedState` and
|
||||
how their data/errors are transformed before being serialized (e.g. for embedding in server-rendered markup).
|
||||
|
||||
## Properties
|
||||
|
||||
### serializeData?
|
||||
|
||||
```ts
|
||||
optional serializeData: TransformerFn;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:44](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L44)
|
||||
|
||||
Transforms a query's `data` before it is dehydrated. Useful for non-JSON-serializable data.
|
||||
|
||||
***
|
||||
|
||||
### shouldDehydrateMutation()?
|
||||
|
||||
```ts
|
||||
optional shouldDehydrateMutation: (mutation) => boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:46](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L46)
|
||||
|
||||
Predicate to decide whether a given `Mutation` should be dehydrated. Defaults to `defaultShouldDehydrateMutation`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### mutation
|
||||
|
||||
[`Mutation`](../classes/Mutation.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### shouldDehydrateQuery()?
|
||||
|
||||
```ts
|
||||
optional shouldDehydrateQuery: (query) => boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:48](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L48)
|
||||
|
||||
Predicate to decide whether a given `Query` should be dehydrated. Defaults to `defaultShouldDehydrateQuery`.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### query
|
||||
|
||||
[`Query`](../classes/Query.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### shouldRedactErrors()?
|
||||
|
||||
```ts
|
||||
optional shouldRedactErrors: (error) => boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:54](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L54)
|
||||
|
||||
Predicate to decide whether a query's error should be redacted before dehydration. Errors are redacted
|
||||
(replaced with a generic `Error('redacted')`) unless this function is provided and returns `false` for the
|
||||
given error, in which case the original error is kept.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### error
|
||||
|
||||
`unknown`
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
30
docs/framework/vue/reference/interfaces/DehydratedState.md
Normal file
30
docs/framework/vue/reference/interfaces/DehydratedState.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
id: DehydratedState
|
||||
title: DehydratedState
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:94](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L94)
|
||||
|
||||
A serializable snapshot of a `QueryClient`'s cache, as produced by `dehydrate` and consumed by `hydrate`. Typically
|
||||
transported from server to client (e.g. embedded in server-rendered markup) to seed the client's cache with data
|
||||
that has already been fetched, avoiding a redundant fetch on the client.
|
||||
|
||||
## Properties
|
||||
|
||||
### mutations
|
||||
|
||||
```ts
|
||||
mutations: DehydratedMutation[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:95](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L95)
|
||||
|
||||
***
|
||||
|
||||
### queries
|
||||
|
||||
```ts
|
||||
queries: DehydratedQuery[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:96](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L96)
|
||||
@@ -0,0 +1,350 @@
|
||||
---
|
||||
id: EnsureQueryDataOptions
|
||||
title: EnsureQueryDataOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:614](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L614)
|
||||
|
||||
## Deprecated
|
||||
|
||||
## Extends
|
||||
|
||||
- [`FetchQueryOptions`](FetchQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `never`
|
||||
|
||||
## Properties
|
||||
|
||||
### ~~gcTime?~~
|
||||
|
||||
```ts
|
||||
optional gcTime: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:277](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L277)
|
||||
|
||||
The time in milliseconds that unused/inactive cache data remains in memory.
|
||||
When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration.
|
||||
When different garbage collection times are specified, the longest one will be used.
|
||||
Setting it to `Infinity` will disable garbage collection.
|
||||
|
||||
Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR.
|
||||
|
||||
Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see
|
||||
`timeoutManager.setTimeoutProvider` for a workaround.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`gcTime`](FetchQueryOptions.md#gctime)
|
||||
|
||||
***
|
||||
|
||||
### ~~initialData?~~
|
||||
|
||||
```ts
|
||||
optional initialData:
|
||||
| TData
|
||||
| InitialDataFunction<TData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:317](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L317)
|
||||
|
||||
If set, this value will be used as the initial data for the query cache (as long as the query hasn't been
|
||||
created or cached yet).
|
||||
If set to a function, the function will be called **once** during the shared/root query initialization, and be
|
||||
expected to synchronously return the initial data.
|
||||
Initial data is considered stale by default unless a `staleTime` has been set.
|
||||
`initialData` **is persisted** to the cache.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`initialData`](FetchQueryOptions.md#initialdata)
|
||||
|
||||
***
|
||||
|
||||
### ~~initialDataUpdatedAt?~~
|
||||
|
||||
```ts
|
||||
optional initialDataUpdatedAt: number | () => number | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:321](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L321)
|
||||
|
||||
If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`initialDataUpdatedAt`](FetchQueryOptions.md#initialdataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### ~~initialPageParam?~~
|
||||
|
||||
```ts
|
||||
optional initialPageParam: undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:605](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L605)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`initialPageParam`](FetchQueryOptions.md#initialpageparam)
|
||||
|
||||
***
|
||||
|
||||
### ~~maxPages?~~
|
||||
|
||||
```ts
|
||||
optional maxPages: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:345](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L345)
|
||||
|
||||
Maximum number of pages to store in the data of an infinite query.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`maxPages`](FetchQueryOptions.md#maxpages)
|
||||
|
||||
***
|
||||
|
||||
### ~~meta?~~
|
||||
|
||||
```ts
|
||||
optional meta: Record<string, unknown>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:341](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L341)
|
||||
|
||||
Additional payload to be stored on each query.
|
||||
Use this property to pass information that can be used in other places.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`meta`](FetchQueryOptions.md#meta)
|
||||
|
||||
***
|
||||
|
||||
### ~~networkMode?~~
|
||||
|
||||
```ts
|
||||
optional networkMode: NetworkMode;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:265](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L265)
|
||||
|
||||
Controls whether a query is allowed to run based on the current network connectivity.
|
||||
|
||||
Defaults to `'online'`.
|
||||
|
||||
#### See
|
||||
|
||||
[Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`networkMode`](FetchQueryOptions.md#networkmode)
|
||||
|
||||
***
|
||||
|
||||
### ~~persister?~~
|
||||
|
||||
```ts
|
||||
optional persister: QueryPersister<TQueryFnData, NoInfer<TQueryKey>, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:290](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L290)
|
||||
|
||||
This option can be used to persist the result of a query to an external storage, bypassing the need to actually
|
||||
call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`persister`](FetchQueryOptions.md#persister)
|
||||
|
||||
***
|
||||
|
||||
### ~~queryFn?~~
|
||||
|
||||
```ts
|
||||
optional queryFn:
|
||||
| typeof skipToken
|
||||
| QueryFunction<TQueryFnData, TQueryKey, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:285](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L285)
|
||||
|
||||
The function that the query will use to request data.
|
||||
Required, unless a default query function has been set via `queryClient.setQueryDefaults` or
|
||||
`queryClient.setDefaultOptions`.
|
||||
Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md).
|
||||
Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`queryFn`](FetchQueryOptions.md#queryfn)
|
||||
|
||||
***
|
||||
|
||||
### ~~queryHash?~~
|
||||
|
||||
```ts
|
||||
optional queryHash: string;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:295](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L295)
|
||||
|
||||
The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used
|
||||
as the actual cache key internally.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`queryHash`](FetchQueryOptions.md#queryhash)
|
||||
|
||||
***
|
||||
|
||||
### ~~queryKey~~
|
||||
|
||||
```ts
|
||||
queryKey: TQueryKey & object;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:304](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L304)
|
||||
|
||||
The query key to use for this query.
|
||||
|
||||
The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys)
|
||||
for more information.
|
||||
|
||||
The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`queryKey`](FetchQueryOptions.md#querykey)
|
||||
|
||||
***
|
||||
|
||||
### ~~queryKeyHashFn?~~
|
||||
|
||||
```ts
|
||||
optional queryKeyHashFn: QueryKeyHashFunction<TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:308](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L308)
|
||||
|
||||
If specified, this function is used to hash the `queryKey` to a string.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`queryKeyHashFn`](FetchQueryOptions.md#querykeyhashfn)
|
||||
|
||||
***
|
||||
|
||||
### ~~retry?~~
|
||||
|
||||
```ts
|
||||
optional retry: RetryValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:246](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L246)
|
||||
|
||||
If `false`, failed queries will not retry by default.
|
||||
If `true`, failed queries will retry infinitely.
|
||||
If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number.
|
||||
If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false.
|
||||
|
||||
Defaults to `3` on the client and `0` on the server.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`retry`](FetchQueryOptions.md#retry)
|
||||
|
||||
***
|
||||
|
||||
### ~~retryDelay?~~
|
||||
|
||||
```ts
|
||||
optional retryDelay: RetryDelayValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:258](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L258)
|
||||
|
||||
This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the
|
||||
next attempt in milliseconds.
|
||||
|
||||
A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential
|
||||
backoff.
|
||||
|
||||
A function like `attempt => attempt * 1000` applies linear backoff.
|
||||
|
||||
Defaults to a function that applies exponential backoff, capped at 30 seconds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`retryDelay`](FetchQueryOptions.md#retrydelay)
|
||||
|
||||
***
|
||||
|
||||
### ~~revalidateIfStale?~~
|
||||
|
||||
```ts
|
||||
optional revalidateIfStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:627](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L627)
|
||||
|
||||
***
|
||||
|
||||
### ~~staleTime?~~
|
||||
|
||||
```ts
|
||||
optional staleTime: StaleTimeFunction<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:610](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L610)
|
||||
|
||||
The time in milliseconds after data is considered stale.
|
||||
If the data is fresh it will be returned from the cache.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`staleTime`](FetchQueryOptions.md#staletime)
|
||||
|
||||
***
|
||||
|
||||
### ~~structuralSharing?~~
|
||||
|
||||
```ts
|
||||
optional structuralSharing: boolean | (oldData, newData) => unknown;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:330](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L330)
|
||||
|
||||
Set this to `false` to disable structural sharing between query results.
|
||||
Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`FetchQueryOptions`](FetchQueryOptions.md).[`structuralSharing`](FetchQueryOptions.md#structuralsharing)
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: FetchNextPageOptions
|
||||
title: FetchNextPageOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:737](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L737)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`ResultOptions`](ResultOptions.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### cancelRefetch?
|
||||
|
||||
```ts
|
||||
optional cancelRefetch: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:746](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L746)
|
||||
|
||||
If set to `true`, calling `fetchNextPage` repeatedly will invoke `queryFn` every time,
|
||||
whether the previous invocation has resolved or not. Also, the result from previous invocations will be ignored.
|
||||
|
||||
If set to `false`, calling `fetchNextPage` repeatedly won't have any effect until the first invocation has resolved.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
***
|
||||
|
||||
### throwOnError?
|
||||
|
||||
```ts
|
||||
optional throwOnError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:701](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L701)
|
||||
|
||||
If set to `true`, the method throws if any of the underlying query refetch tasks fail.
|
||||
|
||||
Defaults to `false`, in which case failed refetches are swallowed and not surfaced to the
|
||||
caller.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`ResultOptions`](ResultOptions.md).[`throwOnError`](ResultOptions.md#throwonerror)
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: FetchPreviousPageOptions
|
||||
title: FetchPreviousPageOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:749](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L749)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`ResultOptions`](ResultOptions.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### cancelRefetch?
|
||||
|
||||
```ts
|
||||
optional cancelRefetch: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:758](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L758)
|
||||
|
||||
If set to `true`, calling `fetchPreviousPage` repeatedly will invoke `queryFn` every time,
|
||||
whether the previous invocation has resolved or not. Also, the result from previous invocations will be ignored.
|
||||
|
||||
If set to `false`, calling `fetchPreviousPage` repeatedly won't have any effect until the first invocation has resolved.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
***
|
||||
|
||||
### throwOnError?
|
||||
|
||||
```ts
|
||||
optional throwOnError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:701](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L701)
|
||||
|
||||
If set to `true`, the method throws if any of the underlying query refetch tasks fail.
|
||||
|
||||
Defaults to `false`, in which case failed refetches are swallowed and not surfaced to the
|
||||
caller.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`ResultOptions`](ResultOptions.md).[`throwOnError`](ResultOptions.md#throwonerror)
|
||||
364
docs/framework/vue/reference/interfaces/FetchQueryOptions.md
Normal file
364
docs/framework/vue/reference/interfaces/FetchQueryOptions.md
Normal file
@@ -0,0 +1,364 @@
|
||||
---
|
||||
id: FetchQueryOptions
|
||||
title: FetchQueryOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:595](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L595)
|
||||
|
||||
## Deprecated
|
||||
|
||||
## Extends
|
||||
|
||||
- [`WithRequired`](../type-aliases/WithRequired.md)\<`QueryOptions`\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\>, `"queryKey"`\>
|
||||
|
||||
## Extended by
|
||||
|
||||
- [`EnsureQueryDataOptions`](EnsureQueryDataOptions.md)
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `never`
|
||||
|
||||
## Properties
|
||||
|
||||
### ~~gcTime?~~
|
||||
|
||||
```ts
|
||||
optional gcTime: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:277](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L277)
|
||||
|
||||
The time in milliseconds that unused/inactive cache data remains in memory.
|
||||
When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration.
|
||||
When different garbage collection times are specified, the longest one will be used.
|
||||
Setting it to `Infinity` will disable garbage collection.
|
||||
|
||||
Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR.
|
||||
|
||||
Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see
|
||||
`timeoutManager.setTimeoutProvider` for a workaround.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.gcTime
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~initialData?~~
|
||||
|
||||
```ts
|
||||
optional initialData:
|
||||
| TData
|
||||
| InitialDataFunction<TData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:317](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L317)
|
||||
|
||||
If set, this value will be used as the initial data for the query cache (as long as the query hasn't been
|
||||
created or cached yet).
|
||||
If set to a function, the function will be called **once** during the shared/root query initialization, and be
|
||||
expected to synchronously return the initial data.
|
||||
Initial data is considered stale by default unless a `staleTime` has been set.
|
||||
`initialData` **is persisted** to the cache.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.initialData
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~initialDataUpdatedAt?~~
|
||||
|
||||
```ts
|
||||
optional initialDataUpdatedAt: number | () => number | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:321](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L321)
|
||||
|
||||
If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.initialDataUpdatedAt
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~initialPageParam?~~
|
||||
|
||||
```ts
|
||||
optional initialPageParam: undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:605](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L605)
|
||||
|
||||
***
|
||||
|
||||
### ~~maxPages?~~
|
||||
|
||||
```ts
|
||||
optional maxPages: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:345](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L345)
|
||||
|
||||
Maximum number of pages to store in the data of an infinite query.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.maxPages
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~meta?~~
|
||||
|
||||
```ts
|
||||
optional meta: Record<string, unknown>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:341](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L341)
|
||||
|
||||
Additional payload to be stored on each query.
|
||||
Use this property to pass information that can be used in other places.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.meta
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~networkMode?~~
|
||||
|
||||
```ts
|
||||
optional networkMode: NetworkMode;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:265](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L265)
|
||||
|
||||
Controls whether a query is allowed to run based on the current network connectivity.
|
||||
|
||||
Defaults to `'online'`.
|
||||
|
||||
#### See
|
||||
|
||||
[Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.networkMode
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~persister?~~
|
||||
|
||||
```ts
|
||||
optional persister: QueryPersister<TQueryFnData, NoInfer<TQueryKey>, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:290](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L290)
|
||||
|
||||
This option can be used to persist the result of a query to an external storage, bypassing the need to actually
|
||||
call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.persister
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~queryFn?~~
|
||||
|
||||
```ts
|
||||
optional queryFn:
|
||||
| typeof skipToken
|
||||
| QueryFunction<TQueryFnData, TQueryKey, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:285](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L285)
|
||||
|
||||
The function that the query will use to request data.
|
||||
Required, unless a default query function has been set via `queryClient.setQueryDefaults` or
|
||||
`queryClient.setDefaultOptions`.
|
||||
Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md).
|
||||
Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.queryFn
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~queryHash?~~
|
||||
|
||||
```ts
|
||||
optional queryHash: string;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:295](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L295)
|
||||
|
||||
The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used
|
||||
as the actual cache key internally.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.queryHash
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~queryKey~~
|
||||
|
||||
```ts
|
||||
queryKey: TQueryKey & object;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:304](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L304)
|
||||
|
||||
The query key to use for this query.
|
||||
|
||||
The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys)
|
||||
for more information.
|
||||
|
||||
The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.queryKey
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~queryKeyHashFn?~~
|
||||
|
||||
```ts
|
||||
optional queryKeyHashFn: QueryKeyHashFunction<TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:308](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L308)
|
||||
|
||||
If specified, this function is used to hash the `queryKey` to a string.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.queryKeyHashFn
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~retry?~~
|
||||
|
||||
```ts
|
||||
optional retry: RetryValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:246](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L246)
|
||||
|
||||
If `false`, failed queries will not retry by default.
|
||||
If `true`, failed queries will retry infinitely.
|
||||
If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number.
|
||||
If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false.
|
||||
|
||||
Defaults to `3` on the client and `0` on the server.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.retry
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~retryDelay?~~
|
||||
|
||||
```ts
|
||||
optional retryDelay: RetryDelayValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:258](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L258)
|
||||
|
||||
This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the
|
||||
next attempt in milliseconds.
|
||||
|
||||
A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential
|
||||
backoff.
|
||||
|
||||
A function like `attempt => attempt * 1000` applies linear backoff.
|
||||
|
||||
Defaults to a function that applies exponential backoff, capped at 30 seconds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.retryDelay
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### ~~staleTime?~~
|
||||
|
||||
```ts
|
||||
optional staleTime: StaleTimeFunction<TQueryFnData, TError, TData, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:610](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L610)
|
||||
|
||||
The time in milliseconds after data is considered stale.
|
||||
If the data is fresh it will be returned from the cache.
|
||||
|
||||
***
|
||||
|
||||
### ~~structuralSharing?~~
|
||||
|
||||
```ts
|
||||
optional structuralSharing: boolean | (oldData, newData) => unknown;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:330](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L330)
|
||||
|
||||
Set this to `false` to disable structural sharing between query results.
|
||||
Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
WithRequired.structuralSharing
|
||||
```
|
||||
237
docs/framework/vue/reference/interfaces/FocusManager.md
Normal file
237
docs/framework/vue/reference/interfaces/FocusManager.md
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: FocusManager
|
||||
title: FocusManager
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:14](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L14)
|
||||
|
||||
The `FocusManager` manages the focus state within TanStack Query.
|
||||
|
||||
It can be used to change the default event listeners or to manually change the focus state.
|
||||
|
||||
## Extends
|
||||
|
||||
- `Subscribable`\<`Listener`\>
|
||||
|
||||
## Properties
|
||||
|
||||
### listeners
|
||||
|
||||
```ts
|
||||
protected listeners: Set<Listener>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:2](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L2)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.listeners
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### hasListeners()
|
||||
|
||||
```ts
|
||||
hasListeners(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:19](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L19)
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.hasListeners
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### isFocused()
|
||||
|
||||
```ts
|
||||
isFocused(): boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:128](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L128)
|
||||
|
||||
`isFocused` can be used to get the current focus state.
|
||||
|
||||
#### Returns
|
||||
|
||||
`boolean`
|
||||
|
||||
***
|
||||
|
||||
### onFocus()
|
||||
|
||||
```ts
|
||||
onFocus(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:118](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L118)
|
||||
|
||||
`onFocus` notifies all subscribed listeners with the current focus state.
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
***
|
||||
|
||||
### onSubscribe()
|
||||
|
||||
```ts
|
||||
protected onSubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:39](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L39)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onSubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### onUnsubscribe()
|
||||
|
||||
```ts
|
||||
protected onUnsubscribe(): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:45](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L45)
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Overrides
|
||||
|
||||
```ts
|
||||
Subscribable.onUnsubscribe
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### setEventListener()
|
||||
|
||||
```ts
|
||||
setEventListener(setup): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:77](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L77)
|
||||
|
||||
`setEventListener` can be used to set a custom event listener that will
|
||||
be used to determine the focus state. The provided `setup` function
|
||||
receives a `setFocused` callback: call it with a `boolean` to manually
|
||||
set the focus state, or with no arguments to re-evaluate the current
|
||||
focus state and notify subscribers.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### setup
|
||||
|
||||
`SetupFn`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
import { focusManager } from '@tanstack/query-core'
|
||||
|
||||
focusManager.setEventListener((handleFocus) => {
|
||||
const listener = () => handleFocus()
|
||||
// Listen to visibilitychange
|
||||
if (typeof window !== 'undefined' && window.addEventListener) {
|
||||
window.addEventListener('visibilitychange', listener, false)
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Be sure to unsubscribe if a new handler is set
|
||||
window.removeEventListener('visibilitychange', listener)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### setFocused()
|
||||
|
||||
```ts
|
||||
setFocused(focused?): void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/focusManager.ts:107](https://github.com/TanStack/query/blob/main/packages/query-core/src/focusManager.ts#L107)
|
||||
|
||||
`setFocused` can be used to manually set the focus state. Set `undefined`
|
||||
to fall back to the default focus check.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### focused?
|
||||
|
||||
`boolean`
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Example
|
||||
|
||||
```ts
|
||||
import { focusManager } from '@tanstack/query-core'
|
||||
|
||||
// Set focused
|
||||
focusManager.setFocused(true)
|
||||
|
||||
// Set unfocused
|
||||
focusManager.setFocused(false)
|
||||
|
||||
// Fallback to the default focus check
|
||||
focusManager.setFocused(undefined)
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### subscribe()
|
||||
|
||||
```ts
|
||||
subscribe(listener): () => void;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/subscribable.ts:8](https://github.com/TanStack/query/blob/main/packages/query-core/src/subscribable.ts#L8)
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### listener
|
||||
|
||||
`Listener`
|
||||
|
||||
#### Returns
|
||||
|
||||
```ts
|
||||
(): void;
|
||||
```
|
||||
|
||||
##### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
```ts
|
||||
Subscribable.subscribe
|
||||
```
|
||||
43
docs/framework/vue/reference/interfaces/HydrateOptions.md
Normal file
43
docs/framework/vue/reference/interfaces/HydrateOptions.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: HydrateOptions
|
||||
title: HydrateOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:61](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L61)
|
||||
|
||||
Options for `hydrate`, controlling the default options applied to queries/mutations restored from a
|
||||
`DehydratedState`, and how to reverse any transformation applied by `DehydrateOptions.serializeData`.
|
||||
|
||||
## Properties
|
||||
|
||||
### defaultOptions?
|
||||
|
||||
```ts
|
||||
optional defaultOptions: object;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/hydration.ts:62](https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L62)
|
||||
|
||||
#### deserializeData?
|
||||
|
||||
```ts
|
||||
optional deserializeData: TransformerFn;
|
||||
```
|
||||
|
||||
Transforms a query's `data` after it is read from the dehydrated state, reversing `serializeData`.
|
||||
|
||||
#### mutations?
|
||||
|
||||
```ts
|
||||
optional mutations: MutationOptions<unknown, Error, unknown, unknown>;
|
||||
```
|
||||
|
||||
Default options merged into every mutation restored from the dehydrated state.
|
||||
|
||||
#### queries?
|
||||
|
||||
```ts
|
||||
optional queries: QueryOptions<unknown, Error, unknown, readonly unknown[], never>;
|
||||
```
|
||||
|
||||
Default options merged into every query restored from the dehydrated state.
|
||||
36
docs/framework/vue/reference/interfaces/InfiniteData.md
Normal file
36
docs/framework/vue/reference/interfaces/InfiniteData.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
id: InfiniteData
|
||||
title: InfiniteData
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:210](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L210)
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData`
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
## Properties
|
||||
|
||||
### pageParams
|
||||
|
||||
```ts
|
||||
pageParams: TPageParam[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:212](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L212)
|
||||
|
||||
***
|
||||
|
||||
### pages
|
||||
|
||||
```ts
|
||||
pages: TData[];
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:211](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L211)
|
||||
@@ -0,0 +1,577 @@
|
||||
---
|
||||
id: InfiniteQueryObserverBaseResult
|
||||
title: InfiniteQueryObserverBaseResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1001](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1001)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`QueryObserverBaseResult`](QueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Extended by
|
||||
|
||||
- [`InfiniteQueryObserverPendingResult`](InfiniteQueryObserverPendingResult.md)
|
||||
- [`InfiniteQueryObserverLoadingResult`](InfiniteQueryObserverLoadingResult.md)
|
||||
- [`InfiniteQueryObserverLoadingErrorResult`](InfiniteQueryObserverLoadingErrorResult.md)
|
||||
- [`InfiniteQueryObserverRefetchErrorResult`](InfiniteQueryObserverRefetchErrorResult.md)
|
||||
- [`InfiniteQueryObserverSuccessResult`](InfiniteQueryObserverSuccessResult.md)
|
||||
- [`InfiniteQueryObserverPlaceholderResult`](InfiniteQueryObserverPlaceholderResult.md)
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: TData | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:771](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L771)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`data`](QueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`dataUpdatedAt`](QueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:780](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L780)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`error`](QueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`errorUpdateCount`](QueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`errorUpdatedAt`](QueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`failureCount`](QueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`failureReason`](QueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`fetchStatus`](QueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isEnabled`](QueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:804](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L804)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isError`](QueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isFetched`](QueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isFetchedAfterMount`](QueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isFetching`](QueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1028](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1028)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1036](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1036)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isInitialLoading`](QueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:823](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L823)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isLoading`](QueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:831](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L831)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isLoadingError`](QueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isPaused`](QueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:827](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L827)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isPending`](QueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:845](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L845)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isPlaceholderData`](QueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:849](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L849)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isRefetchError`](QueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isRefetching`](QueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isStale`](QueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:863](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L863)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`isSuccess`](QueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`refetch`](QueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: QueryStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:881](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L881)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverBaseResult`](QueryObserverBaseResult.md).[`status`](QueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverLoadingErrorResult
|
||||
title: InfiniteQueryObserverLoadingErrorResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1078](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1078)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1082](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1082)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: TError;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1083](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1083)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1084](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1084)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1089](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1089)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1090](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1090)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1086](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1086)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1087](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1087)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1085](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1085)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1092](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1092)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1088](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1088)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1091](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1091)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "error";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1093](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1093)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverLoadingResult
|
||||
title: InfiniteQueryObserverLoadingResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1060](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1060)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1064](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1064)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1065](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1065)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1066](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1066)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1071](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1071)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1072](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1072)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1068](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1068)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1069](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1069)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1067](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1067)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1074](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1074)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1070](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1070)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1073](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1073)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "pending";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1075](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1075)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,624 @@
|
||||
---
|
||||
id: InfiniteQueryObserverOptions
|
||||
title: InfiniteQueryObserverOptions
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:539](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L539)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`QueryObserverOptions`](QueryObserverOptions.md)\<`TQueryFnData`, `TError`, `TData`, [`InfiniteData`](InfiniteData.md)\<`TQueryFnData`, `TPageParam`\>, `TQueryKey`, `TPageParam`\>.[`InfiniteQueryPageParamsOptions`](InfiniteQueryPageParamsOptions.md)\<`TQueryFnData`, `TPageParam`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TQueryFnData
|
||||
|
||||
`TQueryFnData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `TQueryFnData`
|
||||
|
||||
### TQueryKey
|
||||
|
||||
`TQueryKey` *extends* [`QueryKey`](../type-aliases/QueryKey.md) = [`QueryKey`](../type-aliases/QueryKey.md)
|
||||
|
||||
### TPageParam
|
||||
|
||||
`TPageParam` = `unknown`
|
||||
|
||||
## Properties
|
||||
|
||||
### enabled?
|
||||
|
||||
```ts
|
||||
optional enabled: QueryBooleanOption<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:398](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L398)
|
||||
|
||||
Set this to `false` or a function that returns `false` to disable automatic refetching when the query mounts or changes query keys.
|
||||
To refetch the query, use the `refetch` method returned from the `useQuery` instance.
|
||||
Accepts a boolean or function that returns a boolean.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`enabled`](QueryObserverOptions.md#enabled)
|
||||
|
||||
***
|
||||
|
||||
### gcTime?
|
||||
|
||||
```ts
|
||||
optional gcTime: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:277](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L277)
|
||||
|
||||
The time in milliseconds that unused/inactive cache data remains in memory.
|
||||
When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration.
|
||||
When different garbage collection times are specified, the longest one will be used.
|
||||
Setting it to `Infinity` will disable garbage collection.
|
||||
|
||||
Defaults to `5 * 60 * 1000` (5 minutes), or `Infinity` during SSR.
|
||||
|
||||
Note: the maximum allowed time is about 24 days, imposed by `setTimeout`'s 32-bit signed integer delay — see
|
||||
`timeoutManager.setTimeoutProvider` for a workaround.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`gcTime`](QueryObserverOptions.md#gctime)
|
||||
|
||||
***
|
||||
|
||||
### getNextPageParam
|
||||
|
||||
```ts
|
||||
getNextPageParam: GetNextPageParamFunction<TPageParam, TQueryFnData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:365](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L365)
|
||||
|
||||
This function can be set to automatically get the next cursor for infinite queries.
|
||||
The result will also be used to determine the value of `hasNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryPageParamsOptions`](InfiniteQueryPageParamsOptions.md).[`getNextPageParam`](InfiniteQueryPageParamsOptions.md#getnextpageparam)
|
||||
|
||||
***
|
||||
|
||||
### getPreviousPageParam?
|
||||
|
||||
```ts
|
||||
optional getPreviousPageParam: GetPreviousPageParamFunction<TPageParam, TQueryFnData>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:360](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L360)
|
||||
|
||||
This function can be set to automatically get the previous cursor for infinite queries.
|
||||
The result will also be used to determine the value of `hasPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryPageParamsOptions`](InfiniteQueryPageParamsOptions.md).[`getPreviousPageParam`](InfiniteQueryPageParamsOptions.md#getpreviouspageparam)
|
||||
|
||||
***
|
||||
|
||||
### initialData?
|
||||
|
||||
```ts
|
||||
optional initialData:
|
||||
| InfiniteData<TQueryFnData, TPageParam>
|
||||
| InitialDataFunction<InfiniteData<TQueryFnData, TPageParam>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:317](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L317)
|
||||
|
||||
If set, this value will be used as the initial data for the query cache (as long as the query hasn't been
|
||||
created or cached yet).
|
||||
If set to a function, the function will be called **once** during the shared/root query initialization, and be
|
||||
expected to synchronously return the initial data.
|
||||
Initial data is considered stale by default unless a `staleTime` has been set.
|
||||
`initialData` **is persisted** to the cache.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`initialData`](QueryObserverOptions.md#initialdata)
|
||||
|
||||
***
|
||||
|
||||
### initialDataUpdatedAt?
|
||||
|
||||
```ts
|
||||
optional initialDataUpdatedAt: number | () => number | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:321](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L321)
|
||||
|
||||
If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`initialDataUpdatedAt`](QueryObserverOptions.md#initialdataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### initialPageParam
|
||||
|
||||
```ts
|
||||
initialPageParam: TPageParam;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:349](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L349)
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryPageParamsOptions`](InfiniteQueryPageParamsOptions.md).[`initialPageParam`](InfiniteQueryPageParamsOptions.md#initialpageparam)
|
||||
|
||||
***
|
||||
|
||||
### maxPages?
|
||||
|
||||
```ts
|
||||
optional maxPages: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:345](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L345)
|
||||
|
||||
Maximum number of pages to store in the data of an infinite query.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`maxPages`](QueryObserverOptions.md#maxpages)
|
||||
|
||||
***
|
||||
|
||||
### meta?
|
||||
|
||||
```ts
|
||||
optional meta: Record<string, unknown>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:341](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L341)
|
||||
|
||||
Additional payload to be stored on each query.
|
||||
Use this property to pass information that can be used in other places.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`meta`](QueryObserverOptions.md#meta)
|
||||
|
||||
***
|
||||
|
||||
### networkMode?
|
||||
|
||||
```ts
|
||||
optional networkMode: NetworkMode;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:265](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L265)
|
||||
|
||||
Controls whether a query is allowed to run based on the current network connectivity.
|
||||
|
||||
Defaults to `'online'`.
|
||||
|
||||
#### See
|
||||
|
||||
[Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`networkMode`](QueryObserverOptions.md#networkmode)
|
||||
|
||||
***
|
||||
|
||||
### notifyOnChangeProps?
|
||||
|
||||
```ts
|
||||
optional notifyOnChangeProps: NotifyOnChangeProps;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:484](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L484)
|
||||
|
||||
If set, the component will only re-render if any of the listed properties change.
|
||||
When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change.
|
||||
When set to `'all'`, the component will re-render whenever a query is updated.
|
||||
When set to a function, the function will be executed to compute the list of properties.
|
||||
|
||||
Defaults to `undefined`, in which case property access is tracked automatically, and the
|
||||
component only re-renders when one of the tracked properties changes.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`notifyOnChangeProps`](QueryObserverOptions.md#notifyonchangeprops)
|
||||
|
||||
***
|
||||
|
||||
### persister?
|
||||
|
||||
```ts
|
||||
optional persister: QueryPersister<TQueryFnData, NoInfer<TQueryKey>, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:290](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L290)
|
||||
|
||||
This option can be used to persist the result of a query to an external storage, bypassing the need to actually
|
||||
call the `queryFn`. Useful for persisting a query's data across e.g. server/client boundaries.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`persister`](QueryObserverOptions.md#persister)
|
||||
|
||||
***
|
||||
|
||||
### placeholderData?
|
||||
|
||||
```ts
|
||||
optional placeholderData:
|
||||
| InfiniteData<TQueryFnData, TPageParam>
|
||||
| PlaceholderDataFunction<InfiniteData<TQueryFnData, TPageParam>, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:511](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L511)
|
||||
|
||||
If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`placeholderData`](QueryObserverOptions.md#placeholderdata)
|
||||
|
||||
***
|
||||
|
||||
### queryFn?
|
||||
|
||||
```ts
|
||||
optional queryFn:
|
||||
| typeof skipToken
|
||||
| QueryFunction<TQueryFnData, TQueryKey, TPageParam>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:285](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L285)
|
||||
|
||||
The function that the query will use to request data.
|
||||
Required, unless a default query function has been set via `queryClient.setQueryDefaults` or
|
||||
`queryClient.setDefaultOptions`.
|
||||
Receives a [QueryFunctionContext](../type-aliases/QueryFunctionContext.md).
|
||||
Must return a promise that will either resolve data or throw an error. The data cannot be `undefined`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`queryFn`](QueryObserverOptions.md#queryfn)
|
||||
|
||||
***
|
||||
|
||||
### queryHash?
|
||||
|
||||
```ts
|
||||
optional queryHash: string;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:295](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L295)
|
||||
|
||||
The hashed form of `queryKey`, computed with `queryKeyHashFn` (or the default hashing function otherwise). Used
|
||||
as the actual cache key internally.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`queryHash`](QueryObserverOptions.md#queryhash)
|
||||
|
||||
***
|
||||
|
||||
### queryKey
|
||||
|
||||
```ts
|
||||
queryKey: TQueryKey & object;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:304](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L304)
|
||||
|
||||
The query key to use for this query.
|
||||
|
||||
The query key will be hashed into a stable hash. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys)
|
||||
for more information.
|
||||
|
||||
The query will automatically update when this key changes (as long as `enabled` is not set to `false`).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`queryKey`](QueryObserverOptions.md#querykey)
|
||||
|
||||
***
|
||||
|
||||
### queryKeyHashFn?
|
||||
|
||||
```ts
|
||||
optional queryKeyHashFn: QueryKeyHashFunction<TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:308](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L308)
|
||||
|
||||
If specified, this function is used to hash the `queryKey` to a string.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`queryKeyHashFn`](QueryObserverOptions.md#querykeyhashfn)
|
||||
|
||||
***
|
||||
|
||||
### refetchInterval?
|
||||
|
||||
```ts
|
||||
optional refetchInterval: number | false | (query) => number | false | undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:414](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L414)
|
||||
|
||||
If set to a number, the query will continuously refetch at this frequency in milliseconds.
|
||||
If set to a function, the function will be executed with the latest data and query to compute a frequency
|
||||
|
||||
Defaults to `false`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`refetchInterval`](QueryObserverOptions.md#refetchinterval)
|
||||
|
||||
***
|
||||
|
||||
### refetchIntervalInBackground?
|
||||
|
||||
```ts
|
||||
optional refetchIntervalInBackground: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:425](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L425)
|
||||
|
||||
If set to `true`, the query will continue to refetch while their tab/window is in the background.
|
||||
|
||||
Defaults to `false`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`refetchIntervalInBackground`](QueryObserverOptions.md#refetchintervalinbackground)
|
||||
|
||||
***
|
||||
|
||||
### refetchOnMount?
|
||||
|
||||
```ts
|
||||
optional refetchOnMount: boolean | "always" | (query) => boolean | "always";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:462](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L462)
|
||||
|
||||
If set to `true`, the query will refetch on mount if the data is stale.
|
||||
If set to `false`, will disable additional instances of a query to trigger background refetch.
|
||||
If set to `'always'`, the query will always refetch on mount (except when `staleTime: 'static'` is used).
|
||||
If set to a function, the function will be executed with the latest data and query to compute the value
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`refetchOnMount`](QueryObserverOptions.md#refetchonmount)
|
||||
|
||||
***
|
||||
|
||||
### refetchOnReconnect?
|
||||
|
||||
```ts
|
||||
optional refetchOnReconnect: boolean | "always" | (query) => boolean | "always";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:448](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L448)
|
||||
|
||||
If set to `true`, the query will refetch on reconnect if the data is stale.
|
||||
If set to `false`, the query will not refetch on reconnect.
|
||||
If set to `'always'`, the query will always refetch on reconnect (except when `staleTime: 'static'` is used).
|
||||
If set to a function, the function will be executed with the latest data and query to compute the value.
|
||||
|
||||
Defaults to `true` unless `networkMode` is `'always'`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`refetchOnReconnect`](QueryObserverOptions.md#refetchonreconnect)
|
||||
|
||||
***
|
||||
|
||||
### refetchOnWindowFocus?
|
||||
|
||||
```ts
|
||||
optional refetchOnWindowFocus: boolean | "always" | (query) => boolean | "always";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:434](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L434)
|
||||
|
||||
If set to `true`, the query will refetch on window focus if the data is stale.
|
||||
If set to `false`, the query will not refetch on window focus.
|
||||
If set to `'always'`, the query will always refetch on window focus (except when `staleTime: 'static'` is used).
|
||||
If set to a function, the function will be executed with the latest data and query to compute the value.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`refetchOnWindowFocus`](QueryObserverOptions.md#refetchonwindowfocus)
|
||||
|
||||
***
|
||||
|
||||
### retry?
|
||||
|
||||
```ts
|
||||
optional retry: RetryValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:246](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L246)
|
||||
|
||||
If `false`, failed queries will not retry by default.
|
||||
If `true`, failed queries will retry infinitely.
|
||||
If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number.
|
||||
If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false.
|
||||
|
||||
Defaults to `3` on the client and `0` on the server.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`retry`](QueryObserverOptions.md#retry)
|
||||
|
||||
***
|
||||
|
||||
### retryDelay?
|
||||
|
||||
```ts
|
||||
optional retryDelay: RetryDelayValue<TError>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:258](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L258)
|
||||
|
||||
This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the
|
||||
next attempt in milliseconds.
|
||||
|
||||
A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential
|
||||
backoff.
|
||||
|
||||
A function like `attempt => attempt * 1000` applies linear backoff.
|
||||
|
||||
Defaults to a function that applies exponential backoff, capped at 30 seconds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`retryDelay`](QueryObserverOptions.md#retrydelay)
|
||||
|
||||
***
|
||||
|
||||
### retryOnMount?
|
||||
|
||||
```ts
|
||||
optional retryOnMount: QueryBooleanOption<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:474](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L474)
|
||||
|
||||
If set to `false`, the query will not be retried on mount if it contains an error.
|
||||
If set to a function, the function will be executed with the query to compute the value.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`retryOnMount`](QueryObserverOptions.md#retryonmount)
|
||||
|
||||
***
|
||||
|
||||
### select()?
|
||||
|
||||
```ts
|
||||
optional select: (data) => TData;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:500](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L500)
|
||||
|
||||
This option can be used to transform or select a part of the data returned by the query function. It affects
|
||||
the returned `data` value, but does not affect what gets stored in the query cache.
|
||||
The `select` function will only run if `data` changed, or if the reference to the `select` function itself
|
||||
changes. To optimize, memoize the function so its reference stays stable across calls.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### data
|
||||
|
||||
[`InfiniteData`](InfiniteData.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`TData`
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`select`](QueryObserverOptions.md#select)
|
||||
|
||||
***
|
||||
|
||||
### staleTime?
|
||||
|
||||
```ts
|
||||
optional staleTime: StaleTimeFunction<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:407](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L407)
|
||||
|
||||
The time in milliseconds after data is considered stale.
|
||||
If set to `Infinity`, the data will never be considered stale.
|
||||
If set to `'static'`, the data will never be considered stale.
|
||||
If set to a function, the function will be executed with the query to compute a `staleTime`.
|
||||
|
||||
Defaults to `0`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`staleTime`](QueryObserverOptions.md#staletime)
|
||||
|
||||
***
|
||||
|
||||
### structuralSharing?
|
||||
|
||||
```ts
|
||||
optional structuralSharing: boolean | (oldData, newData) => unknown;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:330](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L330)
|
||||
|
||||
Set this to `false` to disable structural sharing between query results.
|
||||
Set this to a function which accepts the old and new data and returns resolved data of the same type to implement custom structural sharing logic.
|
||||
|
||||
Defaults to `true`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`structuralSharing`](QueryObserverOptions.md#structuralsharing)
|
||||
|
||||
***
|
||||
|
||||
### suspense?
|
||||
|
||||
```ts
|
||||
optional suspense: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:507](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L507)
|
||||
|
||||
If set to `true`, the query will suspend when `status === 'pending'`
|
||||
and throw errors when `status === 'error'`.
|
||||
|
||||
Defaults to `false`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`suspense`](QueryObserverOptions.md#suspense)
|
||||
|
||||
***
|
||||
|
||||
### throwOnError?
|
||||
|
||||
```ts
|
||||
optional throwOnError: ThrowOnError<TQueryFnData, TError, InfiniteData<TQueryFnData, TPageParam>, TQueryKey>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:493](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L493)
|
||||
|
||||
Whether errors should be thrown instead of setting the `error` property.
|
||||
If set to `true` or `suspense` is `true`, all errors will be thrown to the error boundary.
|
||||
If set to `false` and `suspense` is `false`, errors are returned as state.
|
||||
If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`).
|
||||
|
||||
Defaults to `false`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`QueryObserverOptions`](QueryObserverOptions.md).[`throwOnError`](QueryObserverOptions.md#throwonerror)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverPendingResult
|
||||
title: InfiniteQueryObserverPendingResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1043](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1043)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: undefined;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1047](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1047)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1048](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1048)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1049](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1049)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1053](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1053)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1054](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1054)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:823](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L823)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1051](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1051)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1050](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1050)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1056](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1056)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1052](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1052)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1055](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1055)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "pending";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1057](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1057)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverPlaceholderResult
|
||||
title: InfiniteQueryObserverPlaceholderResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1130](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1130)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: TData;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1134](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1134)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1136](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1136)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1135](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1135)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1143](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1143)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1144](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1144)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1138](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1138)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1139](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1139)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1137](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1137)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1142](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1142)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1140](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1140)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1141](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1141)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "success";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1145](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1145)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverRefetchErrorResult
|
||||
title: InfiniteQueryObserverRefetchErrorResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1096](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1096)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: TData;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1100](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1100)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: TError;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1101](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1101)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1102](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1102)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1028](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1028)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1036](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1036)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1104](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1104)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1105](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1105)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1103](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1103)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1108](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1108)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1106](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1106)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1107](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1107)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "error";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1109](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1109)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
@@ -0,0 +1,600 @@
|
||||
---
|
||||
id: InfiniteQueryObserverSuccessResult
|
||||
title: InfiniteQueryObserverSuccessResult
|
||||
---
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1112](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1112)
|
||||
|
||||
## Extends
|
||||
|
||||
- [`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md)\<`TData`, `TError`\>
|
||||
|
||||
## Type Parameters
|
||||
|
||||
### TData
|
||||
|
||||
`TData` = `unknown`
|
||||
|
||||
### TError
|
||||
|
||||
`TError` = [`DefaultError`](../type-aliases/DefaultError.md)
|
||||
|
||||
## Properties
|
||||
|
||||
### data
|
||||
|
||||
```ts
|
||||
data: TData;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1116](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1116)
|
||||
|
||||
The last successfully resolved data for the query.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`data`](InfiniteQueryObserverBaseResult.md#data)
|
||||
|
||||
***
|
||||
|
||||
### dataUpdatedAt
|
||||
|
||||
```ts
|
||||
dataUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:775](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L775)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"success"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`dataUpdatedAt`](InfiniteQueryObserverBaseResult.md#dataupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### error
|
||||
|
||||
```ts
|
||||
error: null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1117](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1117)
|
||||
|
||||
The error object for the query, if an error was thrown.
|
||||
- Defaults to `null`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`error`](InfiniteQueryObserverBaseResult.md#error)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdateCount
|
||||
|
||||
```ts
|
||||
errorUpdateCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:799](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L799)
|
||||
|
||||
The sum of all errors.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdateCount`](InfiniteQueryObserverBaseResult.md#errorupdatecount)
|
||||
|
||||
***
|
||||
|
||||
### errorUpdatedAt
|
||||
|
||||
```ts
|
||||
errorUpdatedAt: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:784](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L784)
|
||||
|
||||
The timestamp for when the query most recently returned the `status` as `"error"`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`errorUpdatedAt`](InfiniteQueryObserverBaseResult.md#errorupdatedat)
|
||||
|
||||
***
|
||||
|
||||
### failureCount
|
||||
|
||||
```ts
|
||||
failureCount: number;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:790](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L790)
|
||||
|
||||
The failure count for the query.
|
||||
- Incremented every time the query fails.
|
||||
- Reset to `0` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureCount`](InfiniteQueryObserverBaseResult.md#failurecount)
|
||||
|
||||
***
|
||||
|
||||
### failureReason
|
||||
|
||||
```ts
|
||||
failureReason: TError | null;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:795](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L795)
|
||||
|
||||
The failure reason for the query retry.
|
||||
- Reset to `null` when the query succeeds.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`failureReason`](InfiniteQueryObserverBaseResult.md#failurereason)
|
||||
|
||||
***
|
||||
|
||||
### fetchNextPage()
|
||||
|
||||
```ts
|
||||
fetchNextPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1008](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1008)
|
||||
|
||||
This function allows you to fetch the next "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchNextPageOptions`](FetchNextPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchNextPage`](InfiniteQueryObserverBaseResult.md#fetchnextpage)
|
||||
|
||||
***
|
||||
|
||||
### fetchPreviousPage()
|
||||
|
||||
```ts
|
||||
fetchPreviousPage: (options?) => Promise<InfiniteQueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1014](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1014)
|
||||
|
||||
This function allows you to fetch the previous "page" of results.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`FetchPreviousPageOptions`](FetchPreviousPageOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`InfiniteQueryObserverResult`](../type-aliases/InfiniteQueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchPreviousPage`](InfiniteQueryObserverBaseResult.md#fetchpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### fetchStatus
|
||||
|
||||
```ts
|
||||
fetchStatus: FetchStatus;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:889](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L889)
|
||||
|
||||
The fetch status of the query.
|
||||
- `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
|
||||
- `paused`: The query wanted to fetch, but has been `paused`.
|
||||
- `idle`: The query is not fetching.
|
||||
- See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`fetchStatus`](InfiniteQueryObserverBaseResult.md#fetchstatus)
|
||||
|
||||
***
|
||||
|
||||
### hasNextPage
|
||||
|
||||
```ts
|
||||
hasNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1020](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1020)
|
||||
|
||||
Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasNextPage`](InfiniteQueryObserverBaseResult.md#hasnextpage)
|
||||
|
||||
***
|
||||
|
||||
### hasPreviousPage
|
||||
|
||||
```ts
|
||||
hasPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1024](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1024)
|
||||
|
||||
Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`hasPreviousPage`](InfiniteQueryObserverBaseResult.md#haspreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isEnabled
|
||||
|
||||
```ts
|
||||
isEnabled: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:867](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L867)
|
||||
|
||||
`true` if this observer is enabled, `false` otherwise.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isEnabled`](InfiniteQueryObserverBaseResult.md#isenabled)
|
||||
|
||||
***
|
||||
|
||||
### isError
|
||||
|
||||
```ts
|
||||
isError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1118](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1118)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query attempt resulted in an error.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isError`](InfiniteQueryObserverBaseResult.md#iserror)
|
||||
|
||||
***
|
||||
|
||||
### isFetched
|
||||
|
||||
```ts
|
||||
isFetched: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:808](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L808)
|
||||
|
||||
Will be `true` if the query has been fetched.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetched`](InfiniteQueryObserverBaseResult.md#isfetched)
|
||||
|
||||
***
|
||||
|
||||
### isFetchedAfterMount
|
||||
|
||||
```ts
|
||||
isFetchedAfterMount: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:813](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L813)
|
||||
|
||||
Will be `true` if the query has been fetched after the component mounted.
|
||||
- This property can be used to not show any previously cached data.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchedAfterMount`](InfiniteQueryObserverBaseResult.md#isfetchedaftermount)
|
||||
|
||||
***
|
||||
|
||||
### isFetching
|
||||
|
||||
```ts
|
||||
isFetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:818](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L818)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetching`](InfiniteQueryObserverBaseResult.md#isfetching)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingNextPage
|
||||
|
||||
```ts
|
||||
isFetchingNextPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1032](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1032)
|
||||
|
||||
Will be `true` while fetching the next page with `fetchNextPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingNextPage`](InfiniteQueryObserverBaseResult.md#isfetchingnextpage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchingPreviousPage
|
||||
|
||||
```ts
|
||||
isFetchingPreviousPage: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1040](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1040)
|
||||
|
||||
Will be `true` while fetching the previous page with `fetchPreviousPage`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchingPreviousPage`](InfiniteQueryObserverBaseResult.md#isfetchingpreviouspage)
|
||||
|
||||
***
|
||||
|
||||
### isFetchNextPageError
|
||||
|
||||
```ts
|
||||
isFetchNextPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1123](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1123)
|
||||
|
||||
Will be `true` if the query failed while fetching the next page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchNextPageError`](InfiniteQueryObserverBaseResult.md#isfetchnextpageerror)
|
||||
|
||||
***
|
||||
|
||||
### isFetchPreviousPageError
|
||||
|
||||
```ts
|
||||
isFetchPreviousPageError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1124](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1124)
|
||||
|
||||
Will be `true` if the query failed while fetching the previous page.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isFetchPreviousPageError`](InfiniteQueryObserverBaseResult.md#isfetchpreviouspageerror)
|
||||
|
||||
***
|
||||
|
||||
### ~~isInitialLoading~~
|
||||
|
||||
```ts
|
||||
isInitialLoading: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:836](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L836)
|
||||
|
||||
#### Deprecated
|
||||
|
||||
`isInitialLoading` is being deprecated in favor of `isLoading`
|
||||
and will be removed in the next major version.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isInitialLoading`](InfiniteQueryObserverBaseResult.md#isinitialloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoading
|
||||
|
||||
```ts
|
||||
isLoading: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1120](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1120)
|
||||
|
||||
Is `true` whenever the first fetch for a query is in-flight.
|
||||
- Is the same as `isFetching && isPending`.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoading`](InfiniteQueryObserverBaseResult.md#isloading)
|
||||
|
||||
***
|
||||
|
||||
### isLoadingError
|
||||
|
||||
```ts
|
||||
isLoadingError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1121](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1121)
|
||||
|
||||
Will be `true` if the query failed while fetching for the first time.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isLoadingError`](InfiniteQueryObserverBaseResult.md#isloadingerror)
|
||||
|
||||
***
|
||||
|
||||
### isPaused
|
||||
|
||||
```ts
|
||||
isPaused: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:841](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L841)
|
||||
|
||||
A derived boolean from the `fetchStatus` variable, provided for convenience.
|
||||
- The query wanted to fetch, but has been `paused`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPaused`](InfiniteQueryObserverBaseResult.md#ispaused)
|
||||
|
||||
***
|
||||
|
||||
### isPending
|
||||
|
||||
```ts
|
||||
isPending: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1119](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1119)
|
||||
|
||||
Will be `pending` if there's no cached data and no query attempt was finished yet.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPending`](InfiniteQueryObserverBaseResult.md#ispending)
|
||||
|
||||
***
|
||||
|
||||
### isPlaceholderData
|
||||
|
||||
```ts
|
||||
isPlaceholderData: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1126](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1126)
|
||||
|
||||
Will be `true` if the data shown is the placeholder data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isPlaceholderData`](InfiniteQueryObserverBaseResult.md#isplaceholderdata)
|
||||
|
||||
***
|
||||
|
||||
### isRefetchError
|
||||
|
||||
```ts
|
||||
isRefetchError: false;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1122](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1122)
|
||||
|
||||
Will be `true` if the query failed while refetching.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetchError`](InfiniteQueryObserverBaseResult.md#isrefetcherror)
|
||||
|
||||
***
|
||||
|
||||
### isRefetching
|
||||
|
||||
```ts
|
||||
isRefetching: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:854](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L854)
|
||||
|
||||
Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
|
||||
- Is the same as `isFetching && !isPending`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isRefetching`](InfiniteQueryObserverBaseResult.md#isrefetching)
|
||||
|
||||
***
|
||||
|
||||
### isStale
|
||||
|
||||
```ts
|
||||
isStale: boolean;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:858](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L858)
|
||||
|
||||
Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isStale`](InfiniteQueryObserverBaseResult.md#isstale)
|
||||
|
||||
***
|
||||
|
||||
### isSuccess
|
||||
|
||||
```ts
|
||||
isSuccess: true;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1125](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1125)
|
||||
|
||||
A derived boolean from the `status` variable, provided for convenience.
|
||||
- `true` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`isSuccess`](InfiniteQueryObserverBaseResult.md#issuccess)
|
||||
|
||||
***
|
||||
|
||||
### refetch()
|
||||
|
||||
```ts
|
||||
refetch: (options?) => Promise<QueryObserverResult<TData, TError>>;
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:871](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L871)
|
||||
|
||||
A function to manually refetch the query.
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### options?
|
||||
|
||||
[`RefetchOptions`](RefetchOptions.md)
|
||||
|
||||
#### Returns
|
||||
|
||||
`Promise`\<[`QueryObserverResult`](../type-aliases/QueryObserverResult.md)\<`TData`, `TError`\>\>
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`refetch`](InfiniteQueryObserverBaseResult.md#refetch)
|
||||
|
||||
***
|
||||
|
||||
### status
|
||||
|
||||
```ts
|
||||
status: "success";
|
||||
```
|
||||
|
||||
Defined in: [packages/query-core/src/types.ts:1127](https://github.com/TanStack/query/blob/main/packages/query-core/src/types.ts#L1127)
|
||||
|
||||
The status of the query.
|
||||
- Will be:
|
||||
- `pending` if there's no cached data and no query attempt was finished yet.
|
||||
- `error` if the query attempt resulted in an error.
|
||||
- `success` if the query has received a response with no errors and is ready to display its data.
|
||||
|
||||
#### Overrides
|
||||
|
||||
[`InfiniteQueryObserverBaseResult`](InfiniteQueryObserverBaseResult.md).[`status`](InfiniteQueryObserverBaseResult.md#status)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user