Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions docs/rtk-query/api/createApi.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -273,28 +273,28 @@ export type InfiniteQueryDefinition<
*/
initialPageParam: PageParam
/**
* If specified, only keep this many pages in cache at once.
* If additional pages are fetched, older pages in the other
* direction will be dropped from the cache.
* This function is required to automatically get the next cursor for infinite queries.
* The result will also be used to determine the value of `hasNextPage`.
*/
maxPages?: number
getNextPageParam: PageParamFunction<DataType, PageParam>
/**
* 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`.
*/
getPreviousPageParam?: PageParamFunction<DataType, PageParam>
/**
* This function is required to automatically get the next cursor for infinite queries.
* The result will also be used to determine the value of `hasNextPage`.
* If specified, only keep this many pages in cache at once.
* If additional pages are fetched, older pages in the other
* direction will be dropped from the cache.
*/
getNextPageParam: PageParamFunction<DataType, PageParam>
maxPages?: number
}
}
```

#### Mutation endpoint definition

Mutation endpoints (defined with build.mutation()`) are used to send updates to the server, and force invalidation and refetching of query endpoints.
Mutation endpoints (defined with `build.mutation()`) are used to send updates to the server, and force invalidation and refetching of query endpoints.

As with queries, you must specify either the `query` option or the `queryFn` async method.

Expand Down Expand Up @@ -543,12 +543,9 @@ _(only for `infiniteQuery` endpoints)_
The `infiniteQueryOptions` field includes:

- `initialPageParam`: the default page param value used for the first request, if this was not specified at the usage site
- `maxPages`: an optional limit to how many fetched pages will be kept in the cache entry at a time
- `getNextPageParam`: a required callback you must provide to calculate the next page param, given the existing cached pages and page params
- `getPreviousPageParam`: an optional callback that will be used to calculate the previous page param, if you try to fetch backwards.

Both `initialPageParam` and `getNextPageParam` are required, to
ensure the infinite query can properly fetch the next page of data.Also, `initialPageParam` may be specified when using the endpoint, to override the default value. `maxPages` and `getPreviousPageParam` are both optional.
- `maxPages`: an optional limit to how many fetched pages will be kept in the cache entry at a time

[examples](docblock://query/endpointDefinitions.ts?token=InfiniteQueryExtraOptions.infiniteQueryOptions)

Expand Down
8 changes: 4 additions & 4 deletions docs/rtk-query/api/created-api/code-splitting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -76,18 +76,18 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
endpoints: (builder) => ({
getUserByUserId: builder.query({
endpoints: (build) => ({
getUserByUserId: build.query({
query() {
return ''
},
}),
patchUserByUserId: builder.mutation({
patchUserByUserId: build.mutation({
query() {
return ''
},
}),
getUsers: builder.query({
getUsers: build.query({
query() {
return ''
},
Expand Down
16 changes: 8 additions & 8 deletions docs/rtk-query/api/created-api/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ hide_title: true

## Hooks Overview

The core RTK Query `createApi` method is UI-agnostic, in the same way that the Redux core library and Redux Toolkit are UI-agnostic. They are all plain JS logic that can be used anywhere.
The core RTK Query `createApi` method is UI-agnostic, in the same way that the Redux core library and Redux Toolkit are UI-agnostic. They are all plain JS logic that can be used anywhere. So, if you import `createApi` from `'@reduxjs/toolkit/query'`, it does not have any specific UI integrations included.

However, RTK Query also provides the ability to auto-generate React hooks for each of your endpoints. Since this specifically depends on React itself, RTK Query provides an alternate entry point that exposes a customized version of `createApi` that includes that functionality:
However, RTK Query also provides the ability to auto-generate React hooks for each of your endpoints. Since this specifically depends on React itself, RTK Query provides an additional entry point that exposes a customized version of `createApi` that includes that functionality:

```ts no-transpile
import { createApi } from '@reduxjs/toolkit/query/react'
```

If you have used the React-specific version of `createApi`, the generated `api` slice structure will also contain a set of React hooks. The primary endpoint hooks are available as `api.endpoints[endpointName].useQuery` or `api.endpoints[endpointName].useMutation`, matching how you defined that endpoint.
If you have used the React-specific version of `createApi`, the generated `api` slice structure will also contain a set of React hooks. The primary endpoint hooks are available as `api.endpoints[endpointName].useQuery`, `api.endpoints[endpointName].useMutation`, and `api.endpoints[endpointName].useInfiniteQuery`, matching how you defined that endpoint.

### Generated Hook Names

Expand All @@ -37,15 +37,15 @@ const { data } = api.useGetPostsQuery()
const [updatePost, { data }] = api.useUpdatePostMutation()
```

The general format is `use(Endpointname)(Query|Mutation)` - `use` is prefixed, the first letter of your endpoint name is capitalized, then `Query` or `Mutation` is appended depending on the type.
The general format is `use(Endpointname)(Query|Mutation|InfiniteQuery)` - `use` is prefixed, the first letter of your endpoint name is capitalized, then `Query` or `Mutation` or `InfiniteQuery` is appended depending on the type.

### Available Hooks

RTK Query provides additional hooks for more advanced use-cases, although not all are generated directly on the `api` object as well.

Most of the hooks are generated on a per-endpoint basis.

The full list of hooks generated in the React-specific version of `createApi` is as follows:
The full list of hooks generated in the React-specific version of `createApi` is:

- Endpoint-specific, generated the `api` object with a unique name and on the endpoint object with a generic name:
- [`useQuery`](#usequery) (all standard queries)
Expand All @@ -54,10 +54,10 @@ The full list of hooks generated in the React-specific version of `createApi` is
- [`useLazyQuery`](#uselazyquery) (all standard queries)
- Endpoint-specific, only generated on the endpoint object with a generic name:
- [`useQueryState`](#usequerystate)
- [`useQuerySubscription](#usequerysubscription)
- [`useLazyQuerySubscription](#uselazyquerysubscription)
- [`useQuerySubscription`](#usequerysubscription)
- [`useLazyQuerySubscription`](#uselazyquerysubscription)
- [`useInfiniteQueryState`](#useinfinitequerystate)
- [`useInfiniteQuerySubscription](#useinfinitequerysubscription)
- [`useInfiniteQuerySubscription`](#useinfinitequerysubscription)
- Endpoint-agnostic, generated on the `api` object:
- [`usePrefetch`](#useprefetch)

Expand Down
30 changes: 15 additions & 15 deletions docs/rtk-query/api/fetchBaseQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
export const pokemonApi = createApi({
// Set the baseUrl for every endpoint below
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: (builder) => ({
getPokemonByName: builder.query({
endpoints: (build) => ({
getPokemonByName: build.query({
// Will make a request like https://pokeapi.co/api/v2/pokemon/bulbasaur
query: (name: string) => `pokemon/${name}`,
}),
updatePokemon: builder.mutation({
updatePokemon: build.mutation({
query: ({ name, patch }) => ({
url: `pokemon/${name}`,
// When performing a mutation, you typically use a method of
Expand Down Expand Up @@ -260,8 +260,8 @@ By default, `fetchBaseQuery` assumes that every request you make will be `json`,

```ts no-transpile
// omitted
endpoints: (builder) => ({
updateUser: builder.query({
endpoints: (build) => ({
updateUser: build.query({
query: (user: Record<string, string>) => ({
url: `users`,
method: 'PUT',
Expand All @@ -274,8 +274,8 @@ By default, `fetchBaseQuery` assumes that every request you make will be `json`,

```ts no-transpile
// omitted
endpoints: (builder) => ({
updateUser: builder.query({
endpoints: (build) => ({
updateUser: build.query({
query: (user: Record<string, string>) => ({
url: `users`,
method: 'PUT',
Expand All @@ -296,8 +296,8 @@ By default, `fetchBaseQuery` assumes that every request you make will be `json`,

```ts no-transpile
// omitted
endpoints: (builder) => ({
updateUser: builder.query({
endpoints: (build) => ({
updateUser: build.query({
query: (user: Record<string, string>) => ({
url: `users`,
// Assuming no `paramsSerializer` is specified, the user object is automatically converted
Expand Down Expand Up @@ -328,8 +328,8 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'

export const customApi = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
endpoints: (builder) => ({
getUsers: builder.query({
endpoints: (build) => ({
getUsers: build.query({
query: () => ({
url: `users`,
// This is the same as passing 'text'
Expand Down Expand Up @@ -365,8 +365,8 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
export const customApi = createApi({
// Set the baseUrl for every endpoint below
baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
endpoints: (builder) => ({
getUsers: builder.query({
endpoints: (build) => ({
getUsers: build.query({
query: () => ({
url: `users`,
// Example: we have a backend API always returns a 200,
Expand All @@ -389,8 +389,8 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
export const api = createApi({
// Set a default timeout of 10 seconds
baseQuery: fetchBaseQuery({ baseUrl: '/api/', timeout: 10000 }),
endpoints: (builder) => ({
getUsers: builder.query({
endpoints: (build) => ({
getUsers: build.query({
query: () => ({
url: `users`,
// Example: we know the users endpoint is _really fast_ because it's always cached.
Expand Down
4 changes: 2 additions & 2 deletions docs/rtk-query/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ import type { Pokemon } from './types'
export const pokemonApi = createApi({
reducerPath: 'pokemonApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: (builder) => ({
getPokemonByName: builder.query<Pokemon, string>({
endpoints: (build) => ({
getPokemonByName: build.query<Pokemon, string>({
query: (name) => `pokemon/${name}`,
}),
}),
Expand Down
12 changes: 6 additions & 6 deletions docs/rtk-query/usage-with-typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ import type { Pokemon } from './types'
export const pokemonApi = createApi({
reducerPath: 'pokemonApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: (builder) => ({
getPokemonByName: builder.query<Pokemon, string>({
endpoints: (build) => ({
getPokemonByName: build.query<Pokemon, string>({
query: (name) => `pokemon/${name}`,
}),
}),
Expand All @@ -78,8 +78,8 @@ import type { Pokemon } from './types'
export const pokemonApi = createApi({
reducerPath: 'pokemonApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: (builder) => ({
getPokemonByName: builder.query<Pokemon, string>({
endpoints: (build) => ({
getPokemonByName: build.query<Pokemon, string>({
query: (name) => `pokemon/${name}`,
}),
}),
Expand Down Expand Up @@ -178,8 +178,8 @@ const simpleBaseQuery: BaseQueryFn<

const api = createApi({
baseQuery: simpleBaseQuery,
endpoints: (builder) => ({
getSupport: builder.query({
endpoints: (build) => ({
getSupport: build.query({
query: () => 'support me',
extraOptions: {
shout: true,
Expand Down
24 changes: 12 additions & 12 deletions docs/rtk-query/usage/cache-behavior.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export const api = createApi({
// global configuration for the api
keepUnusedDataFor: 30,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
// highlight-start
// configuration for an individual endpoint, overriding the api setting
Expand Down Expand Up @@ -189,8 +189,8 @@ export const api = createApi({
// global configuration for the api
refetchOnMountOrArgChange: 30,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
}),
}),
Expand Down Expand Up @@ -241,8 +241,8 @@ export const api = createApi({
// global configuration for the api
refetchOnFocus: true,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
}),
}),
Expand All @@ -266,8 +266,8 @@ export const api = createApi({
// global configuration for the api
refetchOnFocus: true,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
}),
}),
Expand Down Expand Up @@ -320,8 +320,8 @@ export const api = createApi({
// global configuration for the api
refetchOnReconnect: true,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
}),
}),
Expand All @@ -345,8 +345,8 @@ export const api = createApi({
// global configuration for the api
refetchOnReconnect: true,
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query<Post[], number>({
endpoints: (build) => ({
getPosts: build.query<Post[], number>({
query: () => `posts`,
}),
}),
Expand Down
18 changes: 9 additions & 9 deletions docs/rtk-query/usage/customizing-queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -446,8 +446,8 @@ export const api = createApi({
baseUrl: 'https://graphqlzero.almansi.me/api',
}),
// highlight-end
endpoints: (builder) => ({
getPosts: builder.query({
endpoints: (build) => ({
getPosts: build.query({
query: () => ({
body: gql`
query {
Expand All @@ -462,7 +462,7 @@ export const api = createApi({
}),
transformResponse: (response) => response.posts.data,
}),
getPost: builder.query({
getPost: build.query({
query: (id) => ({
body: gql`
query {
Expand Down Expand Up @@ -823,8 +823,8 @@ const dynamicBaseQuery: BaseQueryFn<

export const api = createApi({
baseQuery: dynamicBaseQuery,
endpoints: (builder) => ({
getPosts: builder.query<Post[], void>({
endpoints: (build) => ({
getPosts: build.query<Post[], void>({
query: () => 'posts',
}),
}),
Expand Down Expand Up @@ -862,8 +862,8 @@ export const api = createApi({
baseQuery: graphqlBaseQuery({
baseUrl: '/graphql',
}),
endpoints: (builder) => ({
getPosts: builder.query<Post[], void>({
endpoints: (build) => ({
getPosts: build.query<Post[], void>({
query: () => ({
body: gql`
query {
Expand Down Expand Up @@ -959,8 +959,8 @@ import { supabase } from './supabaseApi'
export const supabaseApi = createApi({
reducerPath: 'supabaseApi',
baseQuery: fakeBaseQuery(),
endpoints: (builder) => ({
getBlogs: builder.query({
endpoints: (build) => ({
getBlogs: build.query({
queryFn: async () => {
// Supabase conveniently already has `data` and `error` fields
const { data, error } = await supabase.from('blogs').select()
Expand Down
Loading
Loading