You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 23, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ This is an experiment to create a generic api client based on (and potentially t
15
15
16
16
For now, look at [The CodeSandbox CI](https://ci.codesandbox.io/status/rtk-incubator/rtk-query/pr/1) for the latest experimental package builds and up-to-date example sandboxes.
17
17
18
-
Then follow along with the [Quick Start](https://rtk-query-docs.netlify.app/introduction/quick-start) - make sure to use the latest CodeSandbox build when installing :)
18
+
Then follow along with the [Getting Started instructions](https://rtk-query-docs.netlify.app/introduction/getting-started) - make sure to use the latest CodeSandbox build when installing :)
Copy file name to clipboardExpand all lines: docs/api/createApi.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -61,11 +61,11 @@ export const {
61
61
62
62
#### middleware
63
63
64
-
This is a standard redux middleware and is responsible for things like [polling](../concepts/polling), [garbage collection](#keepunuseddatafor) and a handful of other things. Make sure it's [included in your store](../introduction/quick-start#add-the-service-to-your-store).
64
+
This is a standard redux middleware and is responsible for things like [polling](../concepts/polling), [garbage collection](#keepunuseddatafor) and a handful of other things. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
65
65
66
66
#### reducer
67
67
68
-
A standard redux reducer that enables core functionality. Make sure it's [included in your store](../introduction/quick-start#add-the-service-to-your-store).
68
+
A standard redux reducer that enables core functionality. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
69
69
70
70
### `endpoints` returned by `createApi`
71
71
@@ -248,7 +248,7 @@ function defaultTransformResponse(baseQueryReturnValue: unknown) {
248
248
}
249
249
```
250
250
251
-
To change it, simply provide a function that looks like:
Copy file name to clipboardExpand all lines: docs/concepts/mutations.md
+23-20
Original file line number
Diff line number
Diff line change
@@ -5,12 +5,12 @@ sidebar_label: Mutations
5
5
hide_title: true
6
6
---
7
7
8
-
# `Mutations`
8
+
# Mutations
9
9
10
10
Unlike `useQuery`, `useMutation` returns a tuple. The first item in the tuple is the `trigger` function and the second element contains an object with `status`, `error`, and `data`. Additionally, `useMutation` also makes `internalQueryArgs`, `originalArgs`,
11
11
and `endpoint` available for inspection.
12
12
13
-
Also unlike the `useQuery` hook, the `useMutation` hook doesn't execute automatically. To run a mutation you have to call the `trigger` function.
13
+
Unlike the `useQuery` hook, the `useMutation` hook doesn't execute automatically. To run a mutation you have to call the trigger function returned as the first tuple value from the hook.
14
14
15
15
```js title="Example of all mutation endpoint options"
16
16
constapi=createApi({
@@ -29,7 +29,7 @@ const api = createApi({
29
29
```
30
30
31
31
:::info
32
-
Notice the `onStart`, `onSuccess`, `onError` methods? Make sure to check out how they can be used for [optimistic updates](./optimistic-updates)
32
+
Notice the `onStart`, `onSuccess`, `onError` methods? Be sure to check out how they can be used for [optimistic updates](./optimistic-updates)
This is a modified version of the complete example you can see at the bottom of the page to highlight the `updatePost` mutation. In this scenario, a post is fetched with `useQuery`, and then a `EditablePostName` component is rendered that allows us to edit the name of the post.
In the real world, it's very common that a developer would want to resync their local data cache with the server after performing a mutation (aka `revalidation`). RTK Query takes a more centralized approach to this and requires you to configure the invalidation behavior in your API service definition. Before getting started, let's cover some new terms:
107
+
In the real world, it's very common that a developer would want to resync their local data cache with the server after performing a mutation (aka "revalidation"). RTK Query takes a more centralized approach to this and requires you to configure the invalidation behavior in your API service definition. Before getting started, let's cover some new terms used when defining an endpoint in a service:
103
108
104
-
1.**Entities**
109
+
#### Entities
105
110
106
-
- In short, entities are just a name that you can give to a specific collection of data to control caching and invalidation behavior. For example, in an application that has both `Posts` and `Users`, you would define `entityTypes: ['Posts', 'Users']` when calling `createApi`.
111
+
For RTK Query, _entities_ are just a name that you can give to a specific collection of data to control caching and invalidation behavior, and are defined in an `entityTypes` argument. For example, in an application that has both `Posts` and `Users`, you would define `entityTypes: ['Posts', 'Users']` when calling `createApi`.
107
112
108
-
2.**Provides**
113
+
#### Provides
109
114
110
-
- A `query` can _provide_ entities to the cache.
111
-
- Accepts either an array of `{type: string, id?: string|number}` or a callback that returns such an array. That function will be passed the result as the first argument and the argument originally passed into the `query` method as the second argument.
115
+
A _query_ can _provide_ entities to the cache. The `provides` argument can both be an array of `string` (such as `['Posts']`), `{type: string, id?: string|number}` or a callback that returns such an array. That function will be passed the result as the first argument and the argument originally passed into the `query` method as the second argument.
112
116
113
-
3.**Invalidates**
117
+
#### Invalidates
114
118
115
-
- A `mutation` can _invalidate_ specific entities in the cache.
116
-
- Can both be an array of `string` (such as `['Posts']`), `{type: string, id?: string|number}` or a callback that returns such an array. That function will be passed the result as the first argument and the argument originally passed into the `query` method as the second argument.
119
+
A _mutation_ can _invalidate_ specific entities in the cache. The `invalidates` argument can both be an array of `string` (such as `['Posts']`), `{type: string, id?: string|number}` or a callback that returns such an array. That function will be passed the result as the first argument and the argument originally passed into the `query` method as the second argument.
When you're performing an update on some data that _already exists_ in the cache via [`useMutation`](./mutations), RTK Query gives you a few tools to implement an optimistic update. This can be a useful pattern for when you want to give the user the impression that their changes are immediate.
11
11
12
-
The core concepts are pretty straightforward - in the `onStart` phase of a mutation, you manually set the cached data via `updateQueryResult`, and then `onError` you roll it back via `patchQueryResult`. You don't have to worry about the `onSuccess` lifecycle here.
12
+
The core concepts are:
13
+
14
+
- in the `onStart` phase of a mutation, you manually set the cached data via `updateQueryResult`
15
+
- then, in `onError`, you roll it back via `patchQueryResult`. You don't have to worry about the `onSuccess` lifecycle here.
Copy file name to clipboardExpand all lines: docs/concepts/pagination.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,11 @@ sidebar_label: Pagination
5
5
hide_title: true
6
6
---
7
7
8
-
# `Pagination`
8
+
# Pagination
9
9
10
-
RTK Query makes it simple to integrate with a standard index-based pagination API. This is the most common form of pagination that you'll need to implement. This is how simple it can be:
10
+
RTK Query makes it straightforward to integrate with a standard index-based pagination API. This is the most common form of pagination that you'll need to implement.
####Trigger the next page by incrementing the `page` state variable
38
+
## Trigger the next page by incrementing the `page` state variable
39
39
40
40
```ts title="src/features/posts/PostsManager.tsx"
41
41
const PostList = () => {
@@ -68,7 +68,7 @@ const PostList = () => {
68
68
};
69
69
```
70
70
71
-
### Example
71
+
## Example
72
72
73
73
In the following example, you'll see `Loading` on the initial query, but then as you move forward we'll use the next/previous buttons as a _fetching_ indicator while any non-cached query is performed. When you go back, the cached data will be served instantaneously.
Copy file name to clipboardExpand all lines: docs/concepts/polling.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ sidebar_label: Polling
5
5
hide_title: true
6
6
---
7
7
8
-
# `Polling`
8
+
# Polling
9
9
10
10
Polling gives you the ability to have a 'real-time' effect by causing a query to run at a specified interval. To enable polling for a query, pass a `pollingInterval` to the `useQuery` hook or action creator with an interval in milliseconds:
Copy file name to clipboardExpand all lines: docs/concepts/queries.md
+5-3
Original file line number
Diff line number
Diff line change
@@ -5,18 +5,20 @@ sidebar_label: Queries
5
5
hide_title: true
6
6
---
7
7
8
-
# `Queries`
8
+
# Queries
9
9
10
-
This is the most basic feature of `RTK Query`. A `query` can be performed with any data fetching library of your choice, but the general recommendation is that you only use queries for requests that retrieve data. For anything that alters data on the server or will possibly invalidate the cache, you should use a [Mutation](./mutations).
10
+
This is the most basic feature of RTK Query. A query operation can be performed with any data fetching library of your choice, but the general recommendation is that you only use queries for requests that retrieve data. For anything that alters data on the server or will possibly invalidate the cache, you should use a [Mutation](./mutations).
11
11
12
-
By default, `RTK Query` ships with [fetchBaseQuery](../api/fetchBaseQuery), which is just a lightweight [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) wrapper that automatically handles request headers and response parsing in a manner similar to common libraries like `axios`.
12
+
By default, RTK Query ships with [`fetchBaseQuery`](../api/fetchBaseQuery), which is a lightweight [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) wrapper that automatically handles request headers and response parsing in a manner similar to common libraries like `axios`.
13
13
14
14
> Depending on your environment, you may need to polyfill `fetch` with `whatwg-fetch` if you choose to use `fetchBaseQuery` or `fetch` on it's own.
15
15
16
16
### Performing queries with React Hooks
17
17
18
18
If you're using React Hooks, RTK Query does a few additional things for you. The primary benefit is that you get a render-optimized hook that allows you to have 'background fetching'.
19
19
20
+
Hooks are automatically generated based on the name of the `endpoint` in the service definition. An endpoint field with `getPost: builder.query()` will generate a hook named `useGetPostQuery`.
0 commit comments