rebranded imports (#3803)

* refactor: apply import codemod to examples

* refactor: update import in typescript example

* refactor: more import updates

* chore: run prettier over examples

* chore: try to setup codesandbox-ci for the monorepo structure

* chore: force the use of npm ci in the pipeline

* chore: install with leagacy peer deps

* chore: try --force instead

* chore: re-generate lock file in the hopes that it fixes the install problems

* chore: force testing-library to v12.1.4

because 12.1.5 only supports react < 18, and we install both 17 and 18

* chore: try again with legacy peer deps now that only eslint-config is failing

* chore: try if removing examples from workspaces changes a damn thing

* Revert "chore: try if removing examples from workspaces changes a damn thing"

This reverts commit c4be184.

* chore: try a specific node version

* chore: add dependencies to correct packages

* chore: add missing dev dependencies (maybe)

* chore: add more top level devDependencies

* chore: move jscodeshift to the top, too

* chore: try with npm install

* chore: run node16 only!

* chore: run node16 only

* chore: remove devDependencies from top level package.json again

root cause seems to be sub-packages not being installed with `npm ci`, so we switched to `npm install` instead

Author: TkDodo

.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();