| id | title | sidebar_label | hide_title | description |
|---|---|---|---|---|
examples |
RTK Query Examples |
Examples |
true |
RTK Query > Usage > Examples: sandboxes with runnable apps |
We have a variety of examples that demonstrate various aspects of using RTK Query.
These examples are not meant to be what you base your application on, but exist to show very specific behaviors that you may not actually want or need in your application. For most users, the basic examples in the Queries and Mutations sections will cover the majority of your needs.
:::tip
Please note that when playing with the examples in CodeSandbox that you can experience quirky behavior, especially if you fork them and start editing files. Hot reloading, CSB service workers and msw sometimes have trouble getting on the right page -- when that happens, just refresh in the CSB browser pane.
:::
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/master/examples/query/react/kitchen-sink?fontsize=12&hidenavigation=1&theme=dark&runonclick=1" style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden', }} title="RTK Query Kitchen Sink Example" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" ></iframe>In the example below you'll notice a few things. There are two Posts list on the sidebar. The top one will only update after a successful mutation and resync with the server. The subscribed one will update immediately due to the optimistic update. In the event of an error, you'll see this get rolled back.
:::info 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. :::
<iframe src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/master/examples/query/react/optimistic-update?fontsize=12&hidenavigation=1&module=%2Fsrc%2Fapp%2Fservices%2Fposts.ts&theme=dark&runonclick=1" style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden', }} title="RTK Query Optimistic Update Example" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" ></iframe> <iframe src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/master/examples/query/react/graphql?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Fapi.js&runonclick=1" style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden', }} title="RTK Query GraphQL Example" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" ></iframe> <iframe src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/master/examples/query/reactgraphql-custom-client?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Fapi.js&runonclick=" style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden', }} title="RTK Query GraphQL Example with custom client" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" ></iframe>There are several ways to handle authentication with RTK Query. This is a very basic example of taking a JWT from a login mutation, then setting that in our store. We then use prepareHeaders to inject the authentication headers into every subsequent request.
This example dispatches a setCredentials action to store the user and token information.
This example uses a matcher from the endpoint and extraReducers in the authSlice.
Check out the PostDetail component for an example of Class Component usage.