Skip to content

Commit bfdbfd2

Browse files
msutkowskimsutkowski
authored
Query examples: Request deduping, Polling, Pagination (#1107)
* Add queries deduplication example * Add polling example * Add pagination example
1 parent 7557b1c commit bfdbfd2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+51217
-46
lines changed

‎docs/rtk-query/usage/examples.mdx

Lines changed: 84 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,18 @@ Please note that when playing with the examples in CodeSandbox that you can expe
1717

1818
## React Hooks
1919

20-
<iframe src="https://codesandbox.io/embed/rtk-query-demo-lbp7n?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
21-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
22-
title="rtk-query-react-hooks-example"
23-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
24-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
20+
<iframe
21+
src="https://codesandbox.io/embed/rtk-query-demo-lbp7n?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
22+
style={{
23+
width: '100%',
24+
height: '800px',
25+
border: 0,
26+
borderRadius: '4px',
27+
overflow: 'hidden',
28+
}}
29+
title="RTK Query React Hooks Example"
30+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
31+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
2532
></iframe>
2633

2734
## React Optimistic Updates
@@ -32,20 +39,34 @@ In the example below you'll notice a few things. There are two `Posts` list on t
3239
The example has some intentionally wonky behavior... when editing the name of a post, there is a decent chance you'll get a random error.
3340
:::
3441

35-
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/optimistic-update?fontsize=12&hidenavigation=1&module=%2Fsrc%2Fapp%2Fservices%2Fposts.ts&theme=dark&runonclick=1"
36-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
37-
title="RTK Query Optimistic Update Example"
38-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
39-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
42+
<iframe
43+
src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/optimistic-update?fontsize=12&hidenavigation=1&module=%2Fsrc%2Fapp%2Fservices%2Fposts.ts&theme=dark&runonclick=1"
44+
style={{
45+
width: '100%',
46+
height: '800px',
47+
border: 0,
48+
borderRadius: '4px',
49+
overflow: 'hidden',
50+
}}
51+
title="RTK Query Optimistic Update Example"
52+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
53+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
4054
></iframe>
4155

4256
## React with GraphQL
4357

44-
<iframe src="https://codesandbox.io/embed/rtk-query-graphql-basic-zkqfz?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Fapi.js&runonclick=1"
45-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
46-
title="RTK Query GraphQL Example"
47-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
48-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
58+
<iframe
59+
src="https://codesandbox.io/embed/rtk-query-graphql-basic-zkqfz?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Fapi.js&runonclick=1"
60+
style={{
61+
width: '100%',
62+
height: '800px',
63+
border: 0,
64+
borderRadius: '4px',
65+
overflow: 'hidden',
66+
}}
67+
title="RTK Query GraphQL Example"
68+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
69+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
4970
></iframe>
5071

5172
## Authentication
@@ -56,40 +77,68 @@ There are several ways to handle authentication with RTK Query. This is a very b
5677

5778
This example dispatches a `setCredentials` action to store the user and token information.
5879

59-
<iframe src="https://codesandbox.io/embed/rtk-query-authentication-example-zx8me?fontsize=12&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fauth%2FauthSlice.tsx&theme=dark&runonclick=1"
60-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
61-
title="RTK Query Authentication Example"
62-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
63-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
80+
<iframe
81+
src="https://codesandbox.io/embed/rtk-query-authentication-example-zx8me?fontsize=12&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fauth%2FauthSlice.tsx&theme=dark&runonclick=1"
82+
style={{
83+
width: '100%',
84+
height: '800px',
85+
border: 0,
86+
borderRadius: '4px',
87+
overflow: 'hidden',
88+
}}
89+
title="RTK Query Authentication Example"
90+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
91+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
6492
></iframe>
6593

6694
### Using `extraReducers`
6795

6896
This example uses a matcher from the endpoint and `extraReducers` in the `authSlice`.
6997

70-
<iframe src="https://codesandbox.io/embed/rtk-query-authentication-example-extrareducers-5w7q9?fontsize=12&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fauth%2FauthSlice.tsx&theme=dark&runonclick=1"
71-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
72-
title="RTK Query Authentication Example - extraReducers"
73-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
74-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
98+
<iframe
99+
src="https://codesandbox.io/embed/rtk-query-authentication-example-extrareducers-5w7q9?fontsize=12&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fauth%2FauthSlice.tsx&theme=dark&runonclick=1"
100+
style={{
101+
width: '100%',
102+
height: '800px',
103+
border: 0,
104+
borderRadius: '4px',
105+
overflow: 'hidden',
106+
}}
107+
title="RTK Query Authentication Example - extraReducers"
108+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
109+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
75110
></iframe>
76111

77112
## React Class Components
78113

79114
Check out the `PostDetail` component for an example of Class Component usage.
80115

81-
<iframe src="https://codesandbox.io/embed/react-class-component-example-48hyq?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
82-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
83-
title="rtk-query-react-hooks-example"
84-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
85-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
116+
<iframe
117+
src="https://codesandbox.io/embed/react-class-component-example-48hyq?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
118+
style={{
119+
width: '100%',
120+
height: '800px',
121+
border: 0,
122+
borderRadius: '4px',
123+
overflow: 'hidden',
124+
}}
125+
title="RTK Query React Class Components Example"
126+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
127+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
86128
></iframe>
87129

88130
## Svelte
89131

90-
<iframe src="https://codesandbox.io/embed/svelte-app-rtk-simplequery-demo-f1ueb?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
91-
style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
92-
title="rtk-query-svelte-example"
93-
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
94-
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
132+
<iframe
133+
src="https://codesandbox.io/embed/svelte-app-rtk-simplequery-demo-f1ueb?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
134+
style={{
135+
width: '100%',
136+
height: '800px',
137+
border: 0,
138+
borderRadius: '4px',
139+
overflow: 'hidden',
140+
}}
141+
title="RTK Query Svelte Example"
142+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
143+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
95144
></iframe>

‎docs/rtk-query/usage/mutations.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ export const {
237237
borderRadius: '4px',
238238
overflow: 'hidden',
239239
}}
240-
title="RTK Query - Mutations Concept"
240+
title="RTK Query - Mutations Example"
241241
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
242242
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
243243
></iframe>

‎docs/rtk-query/usage/pagination.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ const PostList = () => {
7676
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.
7777

7878
<iframe
79-
src="https://codesandbox.io/embed/concepts-pagination-6tjz1?fontsize=12&hidenavigation=1&theme=dark"
79+
src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/pagination?fontsize=12&hidenavigation=1&theme=dark"
8080
style={{
8181
width: '100%',
8282
height: '600px',
8383
border: 0,
8484
borderRadius: '4px',
8585
overflow: 'hidden',
8686
}}
87-
title="rtk-query-react-hooks-example"
87+
title="RTK Query Pagination Example"
8888
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
8989
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
9090
></iframe>

‎docs/rtk-query/usage/polling.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ queryRef.updateSubscriptionOptions({ pollingInterval: 0 })
4444
### Example
4545

4646
<iframe
47-
src="https://codesandbox.io/embed/concepts-polling-gorpg?fontsize=12&hidenavigation=1&theme=dark"
47+
src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/polling?fontsize=12&hidenavigation=1&theme=dark"
4848
style={{
4949
width: '100%',
5050
height: '600px',

‎docs/rtk-query/usage/prefetching.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ This is a very basic example that shows how you can prefetch when a user hovers
127127
borderRadius: '4px',
128128
overflow: 'hidden',
129129
}}
130-
title="rtk-query-react-hooks-usePrefetch-example"
130+
title="RTK Query - Prefetching Example"
131131
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
132132
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
133133
></iframe>
@@ -145,7 +145,7 @@ Picking up on our last example, we automatically `prefetch` the next page, givin
145145
borderRadius: '4px',
146146
overflow: 'hidden',
147147
}}
148-
title="rtk-query-react-hooks-usePrefetch-example"
148+
title="RTK Query - Automatic Prefetching Example (on hover)"
149149
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
150150
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
151151
></iframe>
@@ -163,7 +163,7 @@ After the first query initialized by `useQuery` runs, we automatically fetch all
163163
borderRadius: '4px',
164164
overflow: 'hidden',
165165
}}
166-
title="Concepts Prefetching Automatic Waterfall"
166+
title="RTK Query - Automatic Prefetching Waterfall Example"
167167
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
168168
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
169169
></iframe>

‎docs/rtk-query/usage/queries.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -216,15 +216,15 @@ Click the 'Add bulbasaur' button. You'll observe the same behavior described abo
216216
:::
217217
218218
<iframe
219-
src="https://codesandbox.io/embed/concepts-queries-deduping-caching-5qy3n?fontsize=12&hidenavigation=1&theme=dark"
219+
src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/deduping-caching?fontsize=12&hidenavigation=1&theme=dark"
220220
style={{
221221
width: '100%',
222222
height: '800px',
223223
border: 0,
224224
borderRadius: '4px',
225225
overflow: 'hidden',
226226
}}
227-
title="rtk-query-react-hooks-example"
227+
title="RTK Query - Basic query deduplication example"
228228
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
229229
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
230230
></iframe>

‎examples/query/react/deduping-queries/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

0 commit comments

Comments
 (0)