rebranded imports

.codesandbox/ci.json

@@ -1,5 +1,6 @@
 {
   "installCommand": "install:csb",
   "sandboxes": ["/examples/react/basic", "/examples/react/basic-typescript"],
+  "packages": ["packages/**"],
   "node": "16"
 }

.github/workflows/pr.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [14, 16]
+        node: [16.14.2]
         react: [17, 18]
     steps:
       - uses: actions/checkout@v2
@@ -15,11 +15,13 @@ jobs:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
+        with:
+          install-command: npm install
       - run: npm run test:ci
         env:
           REACTJS_VERSION: ${{ matrix.react }}
       - run: npm run test:size
-        if: matrix.node == '16' && matrix.react == '18'
+        if: matrix.react == '18'
         env:
           BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
       - name: Upload coverage to Codecov

.nvmrc

@@ -1 +1 @@
-v16
+v16.14.2

docs/plugins/createAsyncStoragePersister.md

@@ -16,8 +16,8 @@ This utility comes packaged with `react-query` and is available under the `react
 
 ```ts
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import { persistQueryClient } from 'react-query/persistQueryClient'
-import { createAsyncStoragePersister } from 'react-query/createAsyncStoragePersister'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-async-storage-persister'
 
 const queryClient = new QueryClient({
   defaultOptions: {

docs/plugins/createSyncStoragePersister.md

@@ -50,7 +50,7 @@ export type PersistRetryer = (props: {
 
 ### Predefined strategies
 
-Per default, no retry will occur. You can use one of the predefined strategies to handle retries. They can be imported `from 'react-query/persistQueryClient'`:
+Per default, no retry will occur. You can use one of the predefined strategies to handle retries. They can be imported `from '@tanstack/react-query-persist-client'`:
 
 - `removeOldestQuery`
   - will return a new `PersistedClient` with the oldest query removed.

docs/plugins/persistQueryClient.md

@@ -247,15 +247,15 @@ export interface PersistedClient {
 
 You can import these (to build a persister):
 ```ts
-import { PersistedClient, Persister } from "react-query/persistQueryClient";
+import { PersistedClient, Persister } from "@tanstack/react-query-persist-client";
 ```
 
 ### Building A Persister
 You can persist however you like.  Here is an example of how to build an [Indexed DB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) persister. Compared to `Web Storage API`, Indexed DB is faster, stores more than 5MB, and doesn't require serialization.  That means it can readily store Javascript native types, such as `Date` and `File`.
 
 ```ts
 import { get, set, del } from "idb-keyval";
-import { PersistedClient, Persister } from "react-query/persistQueryClient";
+import { PersistedClient, Persister } from "@tanstack/react-query-persist-client";
 
 /**
  * Creates an Indexed DB persister

examples/react/auto-refetching/pages/index.js

@@ -9,8 +9,8 @@ import {
   useMutation,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const queryClient = new QueryClient()
 

examples/react/basic-graphql-request/src/index.js

@@ -6,8 +6,8 @@ import {
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { request, gql } from "graphql-request";
 
 const endpoint = "https://graphqlzero.almansi.me/api";

examples/react/basic-typescript/src/index.tsx

@@ -2,10 +2,10 @@
 import * as React from "react";
 import ReactDOM from "react-dom/client";
 import axios from "axios";
-import { useQuery, useQueryClient, QueryClient } from "react-query";
-import { PersistQueryClientProvider } from "react-query/persistQueryClient";
-import { createWebStoragePersister } from "react-query/createWebStoragePersister";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { useQuery, useQueryClient, QueryClient } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -15,7 +15,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const persister = createWebStoragePersister({
+const persister = createSyncStoragePersister({
   storage: window.localStorage,
 });
 
@@ -26,15 +26,12 @@ type Post = {
 };
 
 function usePosts() {
-  return useQuery(
-    ["posts"],
-    async (): Promise<Array<Post>> => {
-      const { data } = await axios.get(
-        "https://jsonplaceholder.typicode.com/posts"
-      );
-      return data;
-    }
-  );
+  return useQuery(["posts"], async (): Promise<Array<Post>> => {
+    const { data } = await axios.get(
+      "https://jsonplaceholder.typicode.com/posts"
+    );
+    return data;
+  });
 }
 
 function Posts({

examples/react/basic/src/index.js

@@ -7,8 +7,8 @@ import {
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 

examples/react/custom-hooks/src/hooks/usePost.js

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const getPostById = async (postId) => {

examples/react/custom-hooks/src/hooks/usePosts.js

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const getPosts = async () => {

examples/react/custom-hooks/src/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { QueryClient, QueryClientProvider, useQueryClient } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import usePosts from "./hooks/usePosts";
 import usePost from "./hooks/usePost";

examples/react/default-query-function/src/index.js

@@ -7,8 +7,8 @@ import {
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Define a default query function that will receive the query key
 const defaultQueryFn = async ({ queryKey }) => {

examples/react/focus-refetching/pages/index.js

@@ -7,8 +7,8 @@ import {
   useMutation,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const queryClient = new QueryClient()
 

examples/react/load-more-infinite-scroll/pages/index.js

@@ -6,8 +6,8 @@ import {
   useInfiniteQuery,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const queryClient = new QueryClient()
 

examples/react/nextjs/package.json

@@ -11,8 +11,8 @@
     "ky": "^0.23.0",
     "ky-universal": "^0.8.2",
     "next": "latest",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-query": "^4.0.0-beta.1",
     "resolve-from": "^5.0.0",
     "web-streams-polyfill": "^3.0.3"

examples/react/nextjs/pages/_app.js

@@ -4,7 +4,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 export default function MyApp({ Component, pageProps }) {
   const [queryClient] = React.useState(() => new QueryClient())

examples/react/offline/src/App.js

@@ -6,8 +6,8 @@ import {
   MutationCache,
   onlineManager,
   useIsRestoring,
-} from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import toast, { Toaster } from "react-hot-toast";
 
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";

examples/react/offline/src/movies.js

@@ -1,14 +1,10 @@
 import {
-  MutationCache,
-  QueryClient,
   useMutation,
   useQuery,
   useQueryClient,
-} from "react-query";
-import toast from "react-hot-toast";
+} from "@tanstack/react-query";
 import * as api from "./api";
 import * as React from "react";
-import { useMatch } from "@tanstack/react-location";
 
 export const movieKeys = {
   all: () => ["movies"],

examples/react/optimistic-updates-typescript/pages/index.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
-import axios, { AxiosError } from 'axios'
+import axios from 'axios'
 
 import {
   useQuery,
   useQueryClient,
   useMutation,
   QueryClient,
   QueryClientProvider,
-  UseQueryOptions,
 } from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const client = new QueryClient()
 

examples/react/optimistic-updates/pages/index.js

@@ -7,8 +7,8 @@ import {
   useMutation,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const queryClient = new QueryClient()
 

examples/react/pagination/pages/index.js

@@ -5,8 +5,8 @@ import {
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const queryClient = new QueryClient()
 

examples/react/playground/src/index.js

@@ -7,9 +7,9 @@ import {
   useQuery,
   useQueryClient,
   useMutation,
-} from "react-query";
+} from "@tanstack/react-query";
 
-import { ReactQueryDevtools } from "react-query/devtools";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import "./styles.css";
 

examples/react/prefetching/pages/index.js

@@ -5,8 +5,8 @@ import {
   useQueryClient,
   QueryClient,
   QueryClientProvider,
-} from '@tanstack/react-query'
-import { ReactQueryDevtools } from 'react-query/devtools'
+} from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const getCharacters = async () => {
   await new Promise((r) => setTimeout(r, 500))

examples/react/rick-morty/src/App.js

@@ -3,8 +3,8 @@ import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "@material-ui/core";
 import { createMuiTheme } from "@material-ui/core/styles";
 
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import "./styles.css";
 import Layout from "./Layout";

examples/react/rick-morty/src/Character.js

@@ -12,7 +12,7 @@ import {
 } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
 import { useParams } from "react-router";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import fetch from "./fetch";
 
 function Character() {

examples/react/rick-morty/src/Characters.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typography, Link } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import fetch from "./fetch";
 
 export default function Characters() {

examples/react/rick-morty/src/Episode.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Typography, Link } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
 import { useParams } from "react-router";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import fetch from "./fetch";
 
 function Episode() {

examples/react/rick-morty/src/Episodes.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typography, Link } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import fetch from "./fetch";
 
 export default function Episodes() {

examples/react/simple/src/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { QueryClient, QueryClientProvider, useQuery } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import axios from "axios";
 
 const queryClient = new QueryClient();

examples/react/star-wars/src/App.js

@@ -3,8 +3,8 @@ import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "@material-ui/core";
 import { createMuiTheme } from "@material-ui/core/styles";
 
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import "./styles.css";
 import Layout from "./Layout";

examples/react/star-wars/src/Character.js

@@ -12,7 +12,7 @@ import {
 } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
 import { withRouter } from "react-router";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import fetch from "./fetch";
 
 function Character(props) {