Merge pull request #1015 from reduxjs/feature/rtkq-docs-integration

Author: markerikson

docs/api/configureStore.mdx

@@ -150,7 +150,7 @@ const store = configureStore({ reducer: rootReducer })
 
 ### Full Example
 
-```ts
+```ts no-transpile
 // file: todos/todosReducer.ts noEmit
 import { Reducer } from '@reduxjs/toolkit'
 declare const reducer: Reducer<{}>
@@ -175,29 +175,29 @@ import visibilityReducer from './visibility/visibilityReducer'
 
 const reducer = {
   todos: todosReducer,
-  visibility: visibilityReducer
+  visibility: visibilityReducer,
 }
 
 const preloadedState = {
   todos: [
     {
       text: 'Eat food',
-      completed: true
+      completed: true,
     },
     {
       text: 'Exercise',
-      completed: false
-    }
+      completed: false,
+    },
   ],
-  visibilityFilter: 'SHOW_COMPLETED'
+  visibilityFilter: 'SHOW_COMPLETED',
 }
 
 const store = configureStore({
   reducer,
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(logger),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
   devTools: process.env.NODE_ENV !== 'production',
   preloadedState,
-  enhancers: [reduxBatch]
+  enhancers: [reduxBatch],
 })
 
 // The store has been created with these options:

query-old/docs/api/ApiProvider.md renamed to docs/api/rtk-query/ApiProvider.md

@@ -7,12 +7,12 @@ hide_title: true
 
 # `ApiProvider`
 
-[summary](docblock://react-hooks/ApiProvider.tsx?token=ApiProvider)
+[summary](docblock://query/react/ApiProvider.tsx?token=ApiProvider)
 
-[examples](docblock://react-hooks/ApiProvider.tsx?token=ApiProvider)
+[examples](docblock://query/react/ApiProvider.tsx?token=ApiProvider)
 
 :::danger
-Using this together with an existing redux store will cause them to conflict with each other. If you are already using Redux, please use follow the instructions as shown in the [Getting Started guide](../introduction/getting-started).
+Using this together with an existing Redux store will cause them to conflict with each other. If you are already using Redux, please use follow the instructions as shown in the [Getting Started guide](../../introduction/getting-started).
 :::
 
 ### Example

query-old/docs/api/createApi.md renamed to docs/api/rtk-query/createApi.md

@@ -7,7 +7,31 @@ hide_title: true
 
 # `createApi`
 
-The main point where you will define a service to use in your application.
+`createApi` is the core of RTK Query's functionality. It allows you to define a set of endpoints describe how to retrieve data from a series of endpoints, including configuration of how to fetch and transform that data. It generates [an "API slice" structure](./created-api/overview.md) that contains Redux logic (and optionally React hooks) that encapsulate the data fetching and caching process for you.
+
+```ts title="Example: src/services/pokemon.ts"
+// Need to use the React-specific entry point to allow generating React hooks
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/react'
+
+// highlight-start
+// Define a service using a base URL and expected endpoints
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: string) => `pokemon/${name}`,
+    }),
+  }),
+})
+//highlight-end
+
+// highlight-start
+// Export hooks for usage in function components, which are
+// auto-generated based on the defined endpoints
+export const { useGetPokemonByNameQuery } = pokemonApi
+// highlight-end
+```
 
 ## Parameters
 
@@ -27,74 +51,102 @@ The main point where you will define a service to use in your application.
 
 ### `baseQuery`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.baseQuery)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.baseQuery)
 
-[examples](docblock://createApi.ts?token=CreateApiOptions.baseQuery)
+[examples](docblock://query/createApi.ts?token=CreateApiOptions.baseQuery)
 
 ### `tagTypes`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.tagTypes)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.tagTypes)
 
 ### `reducerPath`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.reducerPath)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.reducerPath)
 
-[examples](docblock://createApi.ts?token=CreateApiOptions.reducerPath)
+[examples](docblock://query/createApi.ts?token=CreateApiOptions.reducerPath)
 
 ### `serializeQueryArgs`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.serializeQueryArgs)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.serializeQueryArgs)
 
 Defaults to:
 
 ```ts no-compile
-export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({ endpoint, queryArgs }) => {
+export const defaultSerializeQueryArgs: SerializeQueryArgs<any> = ({
+  endpoint,
+  queryArgs,
+}) => {
   // Sort the object keys before stringifying, to prevent useQuery({ a: 1, b: 2 }) having a different cache key than useQuery({ b: 2, a: 1 })
-  return `${endpoint}(${JSON.stringify(queryArgs, Object.keys(queryArgs || {}).sort())})`;
-};
+  return `${endpoint}(${JSON.stringify(
+    queryArgs,
+    Object.keys(queryArgs || {}).sort()
+  )})`
+}
 ```
 
 ### `endpoints`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.endpoints)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.endpoints)
 
 #### Anatomy of an endpoint
 
 - `query` _(required)_
-  - [summary](docblock://endpointDefinitions.ts?token=EndpointDefinitionWithQuery.query)
+  - [summary](docblock://query/endpointDefinitions.ts?token=EndpointDefinitionWithQuery.query)
 - `transformResponse` _(optional)_
 
-  - [summary](docblock://endpointDefinitions.ts?token=EndpointDefinitionWithQuery.transformResponse)
+  - [summary](docblock://query/endpointDefinitions.ts?token=EndpointDefinitionWithQuery.transformResponse)
   - ```js title="Unpack a deeply nested collection"
-    transformResponse: (response) => response.some.nested.collection;
+    transformResponse: (response) => response.some.nested.collection
     ```
   - ```js title="Normalize the response data"
     transformResponse: (response) =>
       response.reduce((acc, curr) => {
-        acc[curr.id] = curr;
-        return acc;
-      }, {});
+        acc[curr.id] = curr
+        return acc
+      }, {})
     ```
 
 - `provides` _(optional)_
 
-  [summary](docblock://endpointDefinitions.ts?token=QueryExtraOptions.provides)
+  [summary](docblock://query/endpointDefinitions.ts?token=QueryExtraOptions.provides)
 
 - `invalidates` _(optional)_
 
-  [summary](docblock://endpointDefinitions.ts?token=MutationExtraOptions.invalidates)
+  [summary](docblock://query/endpointDefinitions.ts?token=MutationExtraOptions.invalidates)
 
-- `onStart`, `onError` and `onSuccess` _(optional)_ - Available to both [queries](../concepts/queries) and [mutations](../concepts/mutations)
-  - Can be used in `mutations` for [optimistic updates](../concepts/optimistic-updates).
+- `onStart`, `onError` and `onSuccess` _(optional)_ - Available to both [queries](../../usage/rtk-query/queries.md) and [mutations](../../usage/rtk-query/mutations.md)
+  - Can be used in `mutations` for [optimistic updates](../../usage/rtk-query/optimistic-updates.md).
   - ```ts title="Mutation lifecycle signatures"
-    function onStart(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>): void;
-    function onError(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>, error: unknown): void;
-    function onSuccess(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>, result: ResultType): void;
+    function onStart(
+      arg: QueryArg,
+      mutationApi: MutationApi<ReducerPath, Context>
+    ): void
+    function onError(
+      arg: QueryArg,
+      mutationApi: MutationApi<ReducerPath, Context>,
+      error: unknown
+    ): void
+    function onSuccess(
+      arg: QueryArg,
+      mutationApi: MutationApi<ReducerPath, Context>,
+      result: ResultType
+    ): void
     ```
   - ```ts title="Query lifecycle signatures"
-    function onStart(arg: QueryArg, queryApi: QueryApi<ReducerPath, Context>): void;
-    function onError(arg: QueryArg, queryApi: QueryApi<ReducerPath, Context>, error: unknown): void;
-    function onSuccess(arg: QueryArg, queryApi: QueryApi<ReducerPath, Context>, result: ResultType): void;
+    function onStart(
+      arg: QueryArg,
+      queryApi: QueryApi<ReducerPath, Context>
+    ): void
+    function onError(
+      arg: QueryArg,
+      queryApi: QueryApi<ReducerPath, Context>,
+      error: unknown
+    ): void
+    function onSuccess(
+      arg: QueryArg,
+      queryApi: QueryApi<ReducerPath, Context>,
+      result: ResultType
+    ): void
     ```
 
 #### How endpoints get used
@@ -140,14 +192,14 @@ By default, the payload from the server is returned directly.
 
 ```ts
 function defaultTransformResponse(baseQueryReturnValue: unknown) {
-  return baseQueryReturnValue;
+  return baseQueryReturnValue
 }
 ```
 
 To change it, provide a function that looks like:
 
 ```ts
-transformResponse: (response) => response.some.deeply.nested.property;
+transformResponse: (response) => response.some.deeply.nested.property
 ```
 
 ```ts title="GraphQL transformation example"
@@ -172,24 +224,24 @@ export const api = createApi({
       transformResponse: (response) => response.posts.data,
     }),
   }),
-});
+})
 ```
 
 ### `keepUnusedDataFor`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.keepUnusedDataFor)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor)
 
 ### `refetchOnMountOrArgChange`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.refetchOnMountOrArgChange)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.refetchOnMountOrArgChange)
 
 :::note
 You can set this globally in `createApi`, but you can also override the default value and have more granular control by passing `refetchOnMountOrArgChange` to each individual hook call or when dispatching the [`initiate`](#initiate) action.
 :::
 
 ### `refetchOnFocus`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.refetchOnFocus)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.refetchOnFocus)
 
 :::note
 You can set this globally in `createApi`, but you can also override the default value and have more granular control by passing `refetchOnFocus` to each individual hook call or when dispatching the [`initiate`](#initiate) action.
@@ -199,7 +251,7 @@ If you specify `track: false` when manually dispatching queries, RTK Query will
 
 ### `refetchOnReconnect`
 
-[summary](docblock://createApi.ts?token=CreateApiOptions.refetchOnReconnect)
+[summary](docblock://query/createApi.ts?token=CreateApiOptions.refetchOnReconnect)
 
 :::note
 You can set this globally in `createApi`, but you can also override the default value and have more granular control by passing `refetchOnReconnect` to each individual hook call or when dispatching the [`initiate`](#initiate) action.

query-old/docs/api/created-api/cache-management.md renamed to docs/api/rtk-query/created-api/cache-management.md

@@ -7,7 +7,7 @@ hide_title: true
 
 # API Slices: Cache Management Utilities
 
-The API slice object includes cache management utilities that are used for implementing [optimistic updates](../../concepts/optimistic-updates.md). These are included in a `util` field inside the slice object.
+The API slice object includes cache management utilities that are used for implementing [optimistic updates](../../../usage/rtk-query/optimistic-updates.md). These are included in a `util` field inside the slice object.
 
 ### `updateQueryResult`
 

query-old/docs/api/created-api/code-splitting.md renamed to docs/api/rtk-query/created-api/code-splitting.md

@@ -7,9 +7,9 @@ hide_title: true
 
 # API Slices: Code Splitting and Generation
 
-Each API slice allows [additional endpoint definitions to be injected at runtime](../../concepts/code-splitting.md) after the initial API slice has been defined. This can be beneficial for apps that may have _many_ endpoints.
+Each API slice allows [additional endpoint definitions to be injected at runtime](../../../usage/rtk-query/code-splitting.md) after the initial API slice has been defined. This can be beneficial for apps that may have _many_ endpoints.
 
-The individual API slice endpoint definitions can also be split across multiple files. This is primarily useful for working with API slices that were [code-generated from an API schema file](../../concepts/code-generation.md), allowing you to add additional custom behavior and configuration to a set of automatically-generated endpoint definitions.
+The individual API slice endpoint definitions can also be split across multiple files. This is primarily useful for working with API slices that were [code-generated from an API schema file](../../../usage/rtk-query/code-generation.md), allowing you to add additional custom behavior and configuration to a set of automatically-generated endpoint definitions.
 
 Each API slice object has `injectEndpoints` and `enhanceEndpoints` functions to support these use cases.
 
@@ -18,11 +18,12 @@ Each API slice object has `injectEndpoints` and `enhanceEndpoints` functions to
 #### Signature
 
 ```ts
-const injectEndpoints = (endpointOptions: InjectedEndpointOptions) => EnhancedApiSlice;
+const injectEndpoints = (endpointOptions: InjectedEndpointOptions) =>
+  EnhancedApiSlice
 
 interface InjectedEndpointOptions {
-  endpoints: (build: EndpointBuilder) => NewEndpointDefinitions;
-  overrideExisting?: boolean;
+  endpoints: (build: EndpointBuilder) => NewEndpointDefinitions
+  overrideExisting?: boolean
 }
 ```
 
@@ -41,11 +42,12 @@ This method is primarily useful for code splitting and hot reloading.
 #### Signature
 
 ```ts
-const enhanceEndpoints = (endpointOptions: EnhanceEndpointsOptions) => EnhancedApiSlice;
+const enhanceEndpoints = (endpointOptions: EnhanceEndpointsOptions) =>
+  EnhancedApiSlice
 
 interface EnhanceEndpointsOptions {
-  addTagTypes?: readonly string[];
-  endpoints?: Record<string, Partial<EndpointDefinition>>;
+  addTagTypes?: readonly string[]
+  endpoints?: Record<string, Partial<EndpointDefinition>>
 }
 ```