fixdoc: incorrect position of keepUnusedDataFor for two scenarios (#5062)

* fix: incorrect position of keepUnusedDataFor for two scenarios

* fix: syntax issue

* fix: add a missing import for page "Cache Behavior"

* fix: resolve conflict

Author: mattchannn

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`
 

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()

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<PostsResponse, void>({
+   *       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.)_

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<PostsResponse, void>({
-   *       query: () => 'posts',
-   *       // highlight-start
-   *       keepUnusedDataFor: 5
-   *       // highlight-end
+   *       query: () => 'posts'
    *     })
-   *   })
+   *   }),
+   *   // highlight-start
+   *   keepUnusedDataFor: 5
+   *   // highlight-end
    * })
    * ```
    */

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',
                   ],
                 },
               },