Skip to content

Commit

Permalink
Merge pull request #2219 from sidwebworks/master
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed May 22, 2022
2 parents 9e6d3c3 + 036c55e commit 52e826f
Show file tree
Hide file tree
Showing 41 changed files with 2,199 additions and 15 deletions.
12 changes: 3 additions & 9 deletions docs/rtk-query/usage/examples.mdx
Expand Up @@ -16,30 +16,24 @@ We have a variety of examples that demonstrate various aspects of using RTK Quer

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.

:::info

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 some of the imports are mismatched and not all the examples are currently in the RTK repo. However, you should be able to inspect these examples and use the logic they show as guidelines.

:::

:::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`](https://mswjs.io/) sometimes have trouble getting on the right page -- when that happens, just refresh in the CSB browser pane.

:::

## React Hooks
## Kitchen Sink

<iframe
src="https://codesandbox.io/embed/rtk-query-demo-lbp7n?fontsize=12&hidenavigation=1&theme=dark&runonclick=1"
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 React Hooks Example"
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>
Expand Down
2 changes: 2 additions & 0 deletions examples/query/react/kitchen-sink/.env
@@ -0,0 +1,2 @@
SKIP_PREFLIGHT_CHECK=true
NODE_ENV=development
50 changes: 50 additions & 0 deletions examples/query/react/kitchen-sink/package.json
@@ -0,0 +1,50 @@
{
"name": "@examples-query-react/kitchen-sink",
"private": true,
"version": "1.0.0",
"description": "getting-started-hooks",
"keywords": [],
"main": "src/index.tsx",
"dependencies": {
"@reduxjs/toolkit": "1.8.1",
"msw": "^0.39.2",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-redux": "7.2.2",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^12.0.0",
"@types/jest": "^26.0.23",
"@types/node": "^14.14.6",
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"@types/react-redux": "7.1.9",
"typescript": "~4.2.4",
"whatwg-fetch": "^3.4.1"
},
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"react/react-in-jsx-scope": "off"
}
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --runInBand"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"msw": {
"workerDirectory": "public"
}
}
43 changes: 43 additions & 0 deletions examples/query/react/kitchen-sink/public/index.html
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>

</html>
8 changes: 8 additions & 0 deletions examples/query/react/kitchen-sink/public/manifest.json
@@ -0,0 +1,8 @@
{
"short_name": "RTK Query Authentication using extraReducers Example",
"name": "Authentication Example",
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

0 comments on commit 52e826f

Please sign in to comment.