diff --git a/docs/rtk-query/api/createApi.mdx b/docs/rtk-query/api/createApi.mdx index 2d38b41ffe..81c8c16d20 100644 --- a/docs/rtk-query/api/createApi.mdx +++ b/docs/rtk-query/api/createApi.mdx @@ -482,6 +482,8 @@ By default, this function will take the query arguments, sort object keys where [summary](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor) +[examples](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor) + ### `refetchOnMountOrArgChange` [summary](docblock://query/createApi.ts?token=CreateApiOptions.refetchOnMountOrArgChange) @@ -684,7 +686,7 @@ Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only. [summary](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor) -[examples](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor) +[examples](docblock://query/core/buildMiddleware/cacheCollection.ts?token=CacheCollectionQueryExtraOptions) ### `serializeQueryArgs` diff --git a/docs/rtk-query/usage/cache-behavior.mdx b/docs/rtk-query/usage/cache-behavior.mdx index 84b46a2048..baafd65993 100644 --- a/docs/rtk-query/usage/cache-behavior.mdx +++ b/docs/rtk-query/usage/cache-behavior.mdx @@ -122,7 +122,7 @@ Alternatively, you can dispatch the `initiate` thunk action for an endpoint, pas ```tsx no-transpile title="Force refetch example" import { useDispatch } from 'react-redux' -import { useGetPostsQuery } from './api' +import { api, useGetPostsQuery } from './api' const Component = () => { const dispatch = useDispatch() diff --git a/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts b/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts index fbe70d0de6..94737d3ea3 100644 --- a/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts +++ b/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts @@ -11,6 +11,30 @@ import type { export type ReferenceCacheCollection = never +/** + * @example + * ```ts + * // codeblock-meta title="keepUnusedDataFor example" + * import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' + * interface Post { + * id: number + * name: string + * } + * type PostsResponse = Post[] + * + * const api = createApi({ + * baseQuery: fetchBaseQuery({ baseUrl: '/' }), + * endpoints: (build) => ({ + * getPosts: build.query({ + * query: () => 'posts', + * // highlight-start + * keepUnusedDataFor: 5 + * // highlight-end + * }) + * }) + * }) + * ``` + */ export type CacheCollectionQueryExtraOptions = { /** * Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only. _(This value is in seconds.)_ diff --git a/packages/toolkit/src/query/createApi.ts b/packages/toolkit/src/query/createApi.ts index e91bb4231f..e650c64f43 100644 --- a/packages/toolkit/src/query/createApi.ts +++ b/packages/toolkit/src/query/createApi.ts @@ -109,9 +109,9 @@ export interface CreateApiOptions< /** * Defaults to `60` _(this value is in seconds)_. This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache. * + * @example * ```ts * // codeblock-meta title="keepUnusedDataFor example" - * * import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' * interface Post { * id: number @@ -123,12 +123,12 @@ export interface CreateApiOptions< * baseQuery: fetchBaseQuery({ baseUrl: '/' }), * endpoints: (build) => ({ * getPosts: build.query({ - * query: () => 'posts', - * // highlight-start - * keepUnusedDataFor: 5 - * // highlight-end + * query: () => 'posts' * }) - * }) + * }), + * // highlight-start + * keepUnusedDataFor: 5 + * // highlight-end * }) * ``` */ diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index e704d4f79a..bd3911bbe3 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -36,6 +36,7 @@ const config: Config = { 'query/endpointDefinitions.ts', 'query/react/index.ts', 'query/react/ApiProvider.tsx', + 'query/core/buildMiddleware/cacheCollection.ts', ], }, },