Merge remote-tracking branch 'tannerlinsley/main' into beta

RELEASE ALL

Author: TkDodo

docs/adapters/react-query.md

@@ -12,7 +12,7 @@ import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-quer
 const queryClient = new QueryClient()
 
 function Example() {
-  const query = useQuery('todos', fetchTodos)
+  const query = useQuery(['todos'], fetchTodos)
 
   return (
     <div>

docs/comparison.md

@@ -65,7 +65,7 @@ Feature/Capability Key:
 
 > **<sup>1</sup> Lagged Query Data** - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
 
-> **<sup>2</sup> Render Optimization** - React Query has excellent rendering performance. By default, it will automatically track which fields are accessed and only re-render if one of them changes. If you would like to opt-out of this optimization, setting `notifyOnChangeProps` to `'all'` will re-render your components whenever the query is updated. For example because it has new data, or to indicate it is fetching. React Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnChangeProps` to `['data', 'error']`. 
+> **<sup>2</sup> Render Optimization** - React Query has excellent rendering performance. By default, it will automatically track which fields are accessed and only re-render if one of them changes. If you would like to opt-out of this optimization, setting `notifyOnChangeProps` to `'all'` will re-render your components whenever the query is updated. For example because it has new data, or to indicate it is fetching. React Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnChangeProps` to `['data', 'error']`.
 
 > **<sup>3</sup> Partial query matching** - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
 
@@ -79,31 +79,23 @@ Feature/Capability Key:
 
 > **<sup>8</sup> React Router cache persistence** - React Router does not cache data beyond the currently matched routes. If a route is left, its data is lost.
 
-<!-- -->
-
 [bpl-react-query]: https://bundlephobia.com/result?p=react-query
 [bp-react-query]: https://badgen.net/bundlephobia/minzip/react-query?label=💾
 [gh-react-query]: https://github.com/tannerlinsley/react-query
 [stars-react-query]: https://img.shields.io/github/stars/tannerlinsley/react-query?label=%F0%9F%8C%9F
 
-<!-- -->
-
 [swr]: https://github.com/vercel/swr
 [bp-swr]: https://badgen.net/bundlephobia/minzip/swr?label=💾
 [gh-swr]: https://github.com/vercel/swr
 [stars-swr]: https://img.shields.io/github/stars/vercel/swr?label=%F0%9F%8C%9F
 [bpl-swr]: https://bundlephobia.com/result?p=swr
 
-<!-- -->
-
 [apollo]: https://github.com/apollographql/apollo-client
 [bp-apollo]: https://badgen.net/bundlephobia/minzip/@apollo/client?label=💾
 [gh-apollo]: https://github.com/apollographql/apollo-client
 [stars-apollo]: https://img.shields.io/github/stars/apollographql/apollo-client?label=%F0%9F%8C%9F
 [bpl-apollo]: https://bundlephobia.com/result?p=@apollo/client
 
-<!-- -->
-
 [rtk-query]: https://redux-toolkit.js.org/rtk-query/overview
 [rtk-query-comparison]: https://redux-toolkit.js.org/rtk-query/comparison
 [rtk-query-bundle-size]: https://redux-toolkit.js.org/rtk-query/comparison#bundle-size
@@ -114,8 +106,6 @@ Feature/Capability Key:
 [bpl-rtk]: https://bundlephobia.com/result?p=@reduxjs/toolkit
 [bpl-rtk-query]: https://bundlephobia.com/package/@reduxjs/toolkit
 
-<!-- -->
-
 [react-router]: https://github.com/remix-run/react-router
 [bp-react-router]: https://badgen.net/bundlephobia/minzip/react-router-dom?label=💾
 [gh-react-router]: https://github.com/remix-run/react-router

docs/config.json

@@ -276,6 +276,10 @@
           "label": "React Native",
           "to": "examples/react/react-native"
         },
+        {
+          "label": "React Router",
+          "to": "examples/react/react-router"
+        },
         {
           "label": "Offline Queries and Mutations",
           "to": "examples/react/offline"

docs/guides/background-fetching-indicators.md

@@ -8,7 +8,7 @@ A query's `status === 'loading'` state is sufficient enough to show the initial
 ```tsx
 function Todos() {
   const { status, data: todos, error, isFetching } = useQuery(
-    'todos',
+    ['todos'],
     fetchTodos
   )
 

docs/guides/migrating-to-react-query-4.md

@@ -28,18 +28,17 @@ You can easily apply it by using one (or both) of the following commands:
 If you want to run it against `.js` or `.jsx` files, please use the command below:
 
 ```
-npx jscodeshift ./path/to/src/
-  --extensions=js,jsx
+npx jscodeshift ./path/to/src/ \
+  --extensions=js,jsx \
   --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js
-  
 ```
 
 If you want to run it against `.ts` or `.tsx` files, please use the command below:
 
 ```
-npx jscodeshift ./path/to/src/
-  --extensions=ts,tsx
-  --parser=tsx
+npx jscodeshift ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
   --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js
 ```
 
@@ -73,17 +72,17 @@ You can easily apply it by using one (or both) of the following commands:
 If you want to run it against `.js` or `.jsx` files, please use the command below:
 
 ```
-npx jscodeshift ./path/to/src/
-  --extensions=js,jsx
+npx jscodeshift ./path/to/src/ \
+  --extensions=js,jsx \
   --transform=./node_modules/@tanstack/react-query/codemods/v4/key-transformation.js
 ```
 
 If you want to run it against `.ts` or `.tsx` files, please use the command below:
 
 ```
-npx jscodeshift ./path/to/src/
-  --extensions=ts,tsx
-  --parser=tsx
+npx jscodeshift ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
   --transform=./node_modules/@tanstack/react-query/codemods/v4/key-transformation.js
 ```
 

docs/guides/queries.md

@@ -5,7 +5,7 @@ title: Queries
 
 ## Query Basics
 
-A query is a declarative dependency on an asynchronous source of data that is tied to a **unique key**. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using [Mutations](https://react-query.tanstack.com/docs/guides/mutations) instead.
+A query is a declarative dependency on an asynchronous source of data that is tied to a **unique key**. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using [Mutations](../guides/mutations) instead.
 
 To subscribe to a query in your components or custom hooks, call the `useQuery` hook with at least:
 

docs/guides/query-cancellation.md

@@ -100,7 +100,7 @@ An `AbortSignal` can be set in the client `request` method.
 ```tsx
 const client = new GraphQLClient(endpoint)
 
-const query = useQuery('todos', ({ signal }) => {
+const query = useQuery(['todos'], ({ signal }) => {
   client.request({ document: query, signal })
 })
 ```

examples/react/react-router/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}

examples/react/react-router/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/react/react-router/.prettierrc

@@ -0,0 +1 @@
+{}

examples/react/react-router/README.md

@@ -0,0 +1,6 @@
+# React Router Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`

examples/react/react-router/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>Tanstack Query React Router Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

examples/react/react-router/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@tanstack/query-example-react-router",
+  "private": true,
+  "version": "0.0.1",
+  "main": "src/index.jsx",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.4.0-pre.13",
+    "rooks": "^6.4.3",
+    "sort-by": "^1.2.0",
+    "@tanstack/react-query": "4.2.1",
+    "@tanstack/react-query-devtools": "4.2.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^2.0.0",
+    "vite": "^3.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}