reduxjs · markerikson · May 22, 2022 · Apr 8, 2022 · Apr 8, 2022 · Apr 8, 2022
diff --git a/docs/rtk-query/usage/examples.mdx b/docs/rtk-query/usage/examples.mdx
@@ -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>

diff --git a/examples/query/react/kitchen-sink/.env b/examples/query/react/kitchen-sink/.env
@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+NODE_ENV=development
diff --git a/examples/query/react/kitchen-sink/package.json b/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"
+  }
+}
diff --git a/examples/query/react/kitchen-sink/public/index.html b/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>
diff --git a/examples/query/react/kitchen-sink/public/manifest.json b/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"
+}