Merge branch 'beta' of https://github.com/TanStack/query into TanStack-beta

* 'beta' of https://github.com/TanStack/query: (140 commits)
  Fix Best of JS badge in README (TanStack#3695)
  Update config.json
  docs: adapter teasers
  docs: rewrite typescript docs
  tests: stabilize
  docs: Update graphql.md to fix link (TanStack#3683)
  docs: fix link typo in README.md (TanStack#3679)
  Update README.md
  update readme
  Update config.json
  Update index.js
  examples: vendor to platform directories
  docs: migrate to tanstack.com
  fix(persist): introduce in-house synchronous Storage interface (TanStack#3673)
  docs: restructure migration guide by importance of breaking changes
  fix: `replaceDeepEqual` special case for non-plain arrays (TanStack#3669)
  feat: make InfiniteQueryObserver's type more robust (TanStack#3571)
  fix(types): remove non-void constraint from queryFn result (TanStack#3666)
  fix(persist): remove environment check (TanStack#3658)
  fix(types): make sure queryClient.setQueriesData can return undefined from the updater (TanStack#3657)
  ...

Author: Guillaume Labat

.all-contributorsrc

@@ -203,6 +203,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "zrwsk",
+      "name": "Jakub Żurawski",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9089600?v=4",
+      "profile": "https://github.com/zrwsk",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.babelrc.js

@@ -1,33 +1,31 @@
 const { NODE_ENV, BABEL_ENV } = process.env
 const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
+const es = BABEL_ENV === 'es'
 const loose = true
 
 module.exports = {
   presets: [
     [
-      '@babel/env',
+      '@babel/preset-env',
       {
         loose,
         modules: false,
-        exclude: ['@babel/plugin-transform-regenerator'],
+        exclude: [
+          '@babel/plugin-transform-regenerator',
+          '@babel/plugin-transform-parameters',
+        ],
       },
     ],
     '@babel/preset-typescript',
     '@babel/react',
   ],
   plugins: [
-    [
-      'const-enum',
-      {
-        transform: 'constObject',
-      },
-    ],
-    'babel-plugin-transform-async-to-promises',
     cjs && ['@babel/transform-modules-commonjs', { loose }],
-    [
+    es && ['babel-plugin-add-import-extension', { extension: 'mjs' }],
+    // no runtime for umd builds
+    BABEL_ENV && [
       '@babel/transform-runtime',
       {
-        useESModules: !cjs,
         version: require('./package.json').dependencies[
           '@babel/runtime'
         ].replace(/^[^0-9]*/, ''),

.browserslistrc

@@ -1,9 +1,7 @@
 # Browsers we support
-> 0.5%
 Chrome >= 73
-ChromeAndroid >= 75
-Firefox >= 67
-Edge >= 17
-IE 11
-Safari >= 12.1
-iOS >= 11.3
+Firefox >= 78
+Edge >= 79
+Safari >= 12.0
+iOS >= 12.0
+opera >= 53

.eslintrc

@@ -12,15 +12,18 @@
     "es6": true
   },
   "parserOptions": {
+    "project": "./tsconfig.json",
     "sourceType": "module"
   },
   "rules": {
+    "react/jsx-key": ["error", { "checkFragmentShorthand": true }],
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unnecessary-condition": "error",
     "@typescript-eslint/no-inferrable-types": [
       "error",
       {
@@ -31,6 +34,19 @@
     "import/no-cycle": "error",
     "import/no-unresolved": ["error", { "ignore": ["react-query"] }],
     "import/no-unused-modules": ["off", { "unusedExports": true }],
+    "import/no-restricted-paths": [
+      "error",
+      {
+        "zones": [
+          { "target": "src/core", "from": "src/broadcastQueryClient-experimental" },
+          { "target": "src/core", "from": "src/createAsyncStoragePersister" },
+          { "target": "src/core", "from": "src/createWebStoragePersister" },
+          { "target": "src/core", "from": "src/devtools" },
+          { "target": "src/core", "from": "src/persistQueryClient" },
+          { "target": "src/core", "from": "src/reactjs" }
+        ]
+      }
+    ],
     "no-redeclare": "off"
   }
 }

.github/workflows/test-and-publish.yml

@@ -5,18 +5,20 @@ on:
     branches:
       - 'master'
       - 'next'
+      - 'alpha'
       - 'beta'
       - '1.x'
       - '2.x'
   pull_request:
 
 jobs:
   test:
-    name: 'Node ${{ matrix.node }}'
+    name: 'Node ${{ matrix.node }}, React ${{ matrix.react }}'
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 14, 16]
+        node: [14, 16]
+        react: [17, 18]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -25,8 +27,10 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - run: yarn test:ci
+        env:
+          REACTJS_VERSION: ${{ matrix.react }}
       - run: yarn test:size
-        if: matrix.node == '16'
+        if: matrix.node == '16' && matrix.react == '18'
         env:
           BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
       - name: Upload coverage to Codecov
@@ -36,7 +40,7 @@ jobs:
     name: 'Publish Module to NPM'
     needs: test
     # publish only when merged in master on original repo, not on PR
-    if: github.repository == 'tannerlinsley/react-query' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/next' || github.ref == 'refs/heads/beta' || github.ref == 'refs/heads/1.x' || github.ref == 'refs/heads/2.x')
+    if: github.repository == 'tannerlinsley/react-query' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/next' || github.ref == 'refs/heads/alpha' || github.ref == 'refs/heads/beta' || github.ref == 'refs/heads/1.x' || github.ref == 'refs/heads/2.x')
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.vscode/settings.json

@@ -2,11 +2,11 @@
 
 ## Questions
 
-If you have questions about implementation details, help or support, then please use our dedicated community forum at [Github Discussions](https://github.com/tannerlinsley/react-query/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.
+If you have questions about implementation details, help or support, then please use our dedicated community forum at [GitHub Discussions](https://github.com/tannerlinsley/react-query/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.
 
 ## Reporting Issues
 
-If you have found what you think is a bug, please [file an issue](https://github.com/tannerlinsley/react-query/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [Github Discussions](https://github.com/tannerlinsley/react-query/discussions)
+If you have found what you think is a bug, please [file an issue](https://github.com/tannerlinsley/react-query/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [GitHub Discussions](https://github.com/tannerlinsley/react-query/discussions)
 
 ## Suggesting new features
 
@@ -29,14 +29,14 @@ If you have been assigned to fix an issue or develop a new feature, please follo
 
 ## Online one-click setup
 
-You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for developing online. With a single click it will start a workspace and automatically:
+You can use Gitpod (An Online Open Source VS Code like IDE which is free for Open Source) for developing online. With a single click it will start a workspace and automatically:
 
 - clone the `react-query` repo.
 - install all the dependencies in `/` and `/docs`.
 - run `yarn start` in the root(`/`) to Auto-build files.
 - run `yarn dev` in `/docs`.
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/tannerlinsley/react-query)
 
 ## Commit message conventions
 
@@ -122,4 +122,4 @@ Use an appropriate commit type. Be especially careful with breaking changes.
 
 ## Releases
 
-For each new commit added to `master` with `git push` or by merging a pull request or merging from another branch, a github action is triggered and runs the `semantic-release` command to make a release if there are codebase changes since the last release that affect the package functionalities.
+For each new commit added to `master` with `git push` or by merging a pull request or merging from another branch, a GitHub action is triggered and runs the `semantic-release` command to make a release if there are codebase changes since the last release that affect the package functionalities.

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 <img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
 
-![React Query Header](https://github.com/tannerlinsley/react-query/raw/master/media/repo-dark.png)
+![React Query Header](https://github.com/tannerlinsley/react-query/raw/beta/media/repo-header.png)
 
 Hooks for fetching, caching and updating asynchronous data in React
 
@@ -18,7 +18,7 @@ Hooks for fetching, caching and updating asynchronous data in React
     <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
   </a><a href="https://github.com/tannerlinsley/react-query/discussions">
   <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
-</a><a href="https://bestofjs.org/projects/react-query"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=tannerlinsley%2Freact-query%26since=daily" /></a><a href="https://github.com/tannerlinsley/react-query" target="\_parent">
+</a><a href="https://bestofjs.org/projects/react-query"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fquery%26since=daily" /></a><a href="https://github.com/tannerlinsley/react-query" target="\_parent">
   <img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-query.svg?style=social&label=Star" />
 </a><a href="https://twitter.com/tannerlinsley" target="\_parent">
   <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
@@ -28,9 +28,10 @@ Hooks for fetching, caching and updating asynchronous data in React
 
 Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Table](https://github.com/tannerlinsley/react-table), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts)
 
-## Visit [react-query.tanstack.com](https://react-query.tanstack.com) for docs, guides, API and more!
+## Visit [tanstack.com/query](https://tanstack.com/query) for docs, guides, API and more!
 
-Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/.
+Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/. <br />
+Would you like to try **React Query v4beta**? Check out the v4 beta docs here: https://react-query-beta.tanstack.com/.
 ## Quick Features
 
 - Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
@@ -82,6 +83,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/babycourageous"><img src="https://avatars.githubusercontent.com/u/14936212?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rene Dellefont</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=babycourageous" title="Code">💻</a> <a href="https://github.com/tannerlinsley/react-query/commits?author=babycourageous" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/jvuoti"><img src="https://avatars.githubusercontent.com/u/3702781?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Janne Vuoti</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=jvuoti" title="Code">💻</a></td>
     <td align="center"><a href="http://seaviewlab.com"><img src="https://avatars.githubusercontent.com/u/20332397?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arnaud</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=arnaudbzn" title="Code">💻</a> <a href="https://github.com/tannerlinsley/react-query/commits?author=arnaudbzn" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/zrwsk"><img src="https://avatars.githubusercontent.com/u/9089600?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Żurawski</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=zrwsk" title="Documentation">📖</a></td>
   </tr>
 </table>
 
@@ -92,4 +94,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 
-<!-- Force 3 -->
+<!-- Force 4 -->

README.md

@@ -0,0 +1 @@
+export * from '../lib/broadcastQueryClient-experimental'

broadcastQueryClient-experimental/index.d.ts

@@ -0,0 +1 @@
+module.exports = require('../lib/broadcastQueryClient-experimental/index')

broadcastQueryClient-experimental/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testMatch: ['<rootDir>/**/*.test.js'],
+}

codemods/jest.config.js

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  QueryCache,
+  QueryClient,
+  useInfiniteQuery,
+  useIsFetching,
+  useIsMutating,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from 'react-query'
+
+export const Examples = () => {
+  useQuery('todos')
+  useInfiniteQuery('todos')
+  useMutation('todos')
+  useIsFetching('todos')
+  useIsMutating('todos')
+  useQueries([query1, query2])
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.getMutationDefaults('todos')
+  queryClient.getQueriesData('todos')
+  queryClient.getQueryData('todos')
+  queryClient.getQueryDefaults('todos')
+  queryClient.getQueryState('todos')
+  queryClient.isFetching('todos')
+  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
+  queryClient.setQueriesData('todos', () => null)
+  queryClient.setQueryData('todos', () => null)
+  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
+  queryClient.cancelQueries('todos')
+  queryClient.fetchInfiniteQuery('todos')
+  queryClient.fetchQuery('todos')
+  queryClient.invalidateQueries('todos')
+  queryClient.prefetchInfiniteQuery('todos')
+  queryClient.prefetchQuery('todos')
+  queryClient.refetchQueries('todos')
+  queryClient.removeQueries('todos')
+  queryClient.resetQueries('todos')
+  // --- Direct hook call.
+  useQueryClient().getMutationDefaults('todos')
+  useQueryClient().getQueriesData('todos')
+  useQueryClient().getQueryData('todos')
+  useQueryClient().getQueryDefaults('todos')
+  useQueryClient().getQueryState('todos')
+  useQueryClient().isFetching('todos')
+  useQueryClient().setMutationDefaults('todos', {
+    mutationFn: async () => null,
+  })
+  useQueryClient().setQueriesData('todos', () => null)
+  useQueryClient().setQueryData('todos', () => null)
+  useQueryClient().setQueryDefaults('todos', { queryFn: async () => null })
+  useQueryClient().cancelQueries('todos')
+  useQueryClient().fetchInfiniteQuery('todos')
+  useQueryClient().fetchQuery('todos')
+  useQueryClient().invalidateQueries('todos')
+  useQueryClient().prefetchInfiniteQuery('todos')
+  useQueryClient().prefetchQuery('todos')
+  useQueryClient().refetchQueries('todos')
+  useQueryClient().removeQueries('todos')
+  useQueryClient().resetQueries('todos')
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new QueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find('todos')
+  queryCache1.findAll('todos')
+  // --- Instantiated hook call.
+  const queryClient1 = useQueryClient()
+  queryClient1.getQueryCache().find('todos')
+  queryClient1.getQueryCache().findAll('todos')
+  //
+  const queryClient2 = new QueryClient({})
+  queryClient2.getQueryCache().find('todos')
+  queryClient2.getQueryCache().findAll('todos')
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find('todos')
+  queryCache2.findAll('todos')
+  // --- Direct hook call.
+  useQueryClient().getQueryCache().find('todos')
+  useQueryClient().getQueryCache().findAll('todos')
+  //
+  const queryCache3 = useQueryClient().getQueryCache()
+  queryCache3.find('todos')
+  queryCache3.findAll('todos')
+
+  return <div>Example Component</div>
+}