Add RTKQ examples page

Author: markerikson

docs/usage/rtk-query/examples.md

@@ -0,0 +1,95 @@
+---
+id: examples
+title: RTK Query Examples
+sidebar_label: Examples
+hide_title: true
+---
+
+# RTK Query Examples
+
+## Examples Overview
+
+We have a variety of examples that demonstrate various aspects of using RTK Query. The examples were created as part of the standalone `@rtk-incubator/rtk-query` development cycle. We're currently working to update them as part of the process of finalizing RTK Query's integration into Redux Toolkit, so the imports are mismatched and the examples are not currently in the RTK repo. However, you should be able to inspect these examples and use the logic they show as guidelines.
+
+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](./queries) and [Mutations](./mutations) sections will cover the majority of your needs.
+
+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`](https://mswjs.io/) sometimes have trouble getting on the right page -- when that happens, just refresh in the CSB browser pane.
+
+## React Hooks
+
+<iframe src="https://codesandbox.io/embed/rtk-query-demo-lbp7n?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
+     style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+     title="rtk-query-react-hooks-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>
+
+## React Optimistic Updates
+
+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/concepts-optimistic-updates-lush8?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>
+
+## React with GraphQL
+
+<iframe src="https://codesandbox.io/embed/rtk-query-graphql-basic-zkqfz?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>
+
+## Authentication
+
+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.
+
+### Dispatching an action to set the user state
+
+This example dispatches a `setCredentials` action to store the user and token information.
+
+<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"
+     style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+     title="RTK Query Authentication 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>
+
+### Using `extraReducers`
+
+This example uses a matcher from the endpoint and `extraReducers` in the `authSlice`.
+
+<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"
+    style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+    title="RTK Query Authentication Example - extraReducers"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
+## React Class Components
+
+Check out the `PostDetail` component for an example of Class Component usage.
+
+<iframe src="https://codesandbox.io/embed/react-class-component-example-48hyq?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
+     style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+     title="rtk-query-react-hooks-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>
+
+## Svelte
+
+<iframe src="https://codesandbox.io/embed/svelte-app-rtk-simplequery-demo-f1ueb?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
+     style={{ width: '100%', height: '800px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+     title="rtk-query-svelte-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>

website/sidebars.json

@@ -40,7 +40,8 @@
             "usage/rtk-query/optimistic-updates",
             "usage/rtk-query/code-splitting",
             "usage/rtk-query/code-generation",
-            "usage/rtk-query/customizing-create-api"
+            "usage/rtk-query/customizing-create-api",
+            "usage/rtk-query/examples"
           ]
         }
       ]