From 7fc94729d4ea4a4f21ddbf25d29d79471e220d8e Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Wed, 10 Jul 2024 11:52:01 +1000 Subject: [PATCH] docs(examples): Modernise React examples (#7704) * docs(examples): Update react/basic-typescript * Replace basic with basic-typescript * Fix lockfile * Update react/basic-graphql-request * Improve react/suspense * More tweaks to react/suspense * Update react/simple * Update react/offline * Convert default-query-function * Remove axios and ky usage * Replace axios with fetch * Undo lint-stagesd * Sync solid/basic and solid/basic-graphql-request --- examples/react/algolia/package.json | 12 -- examples/react/auto-refetching/package.json | 1 - .../react/auto-refetching/src/pages/index.js | 5 +- .../react/basic-graphql-request/.eslintrc | 3 - .../eslint.config.js | 0 .../react/basic-graphql-request/index.html | 2 +- .../react/basic-graphql-request/package.json | 12 -- .../src/{index.jsx => index.tsx} | 46 +++-- .../tsconfig.json | 0 examples/react/basic-typescript/.gitignore | 27 --- examples/react/basic-typescript/README.md | 6 - examples/react/basic-typescript/index.html | 16 -- examples/react/basic-typescript/package.json | 42 ----- .../basic-typescript/public/emblem-light.svg | 13 -- examples/react/basic/.eslintrc | 7 - examples/react/basic/eslint.config.js | 19 +++ examples/react/basic/index.html | 2 +- examples/react/basic/package.json | 22 +-- examples/react/basic/src/index.jsx | 138 --------------- .../{basic-typescript => basic}/src/index.tsx | 31 ++-- examples/react/basic/tsconfig.json | 24 +++ .../vite.config.ts | 0 .../react/default-query-function/index.html | 2 +- .../react/default-query-function/package.json | 14 +- .../src/{index.jsx => index.tsx} | 40 +++-- .../default-query-function/tsconfig.json | 24 +++ .../default-query-function/vite.config.ts | 6 + .../package.json | 1 - .../src/pages/index.js | 5 +- .../load-more-infinite-scroll/package.json | 1 - .../src/pages/index.js | 5 +- examples/react/nextjs/package.json | 1 - .../react/nextjs/src/hooks/usePosts/index.js | 6 +- examples/react/offline/index.html | 2 +- examples/react/offline/package.json | 14 +- .../react/offline/src/{App.jsx => App.tsx} | 8 +- examples/react/offline/src/api.js | 63 ------- examples/react/offline/src/api.ts | 83 +++++++++ .../offline/src/{index.jsx => index.tsx} | 2 +- .../offline/src/{movies.js => movies.ts} | 8 +- examples/react/offline/tsconfig.json | 24 +++ examples/react/offline/vite.config.ts | 6 + .../optimistic-updates-cache/package.json | 1 - .../src/pages/index.tsx | 13 +- .../react/optimistic-updates-ui/package.json | 1 - .../optimistic-updates-ui/src/pages/index.tsx | 20 ++- examples/react/pagination/package.json | 1 - examples/react/pagination/src/pages/index.js | 5 +- examples/react/playground/package.json | 12 -- examples/react/prefetching/package.json | 1 - examples/react/prefetching/src/pages/index.js | 9 +- examples/react/react-router/package.json | 12 -- examples/react/rick-morty/package.json | 12 -- examples/react/simple/index.html | 2 +- examples/react/simple/package.json | 14 +- .../react/simple/src/{index.jsx => index.tsx} | 17 +- examples/react/simple/tsconfig.json | 24 +++ examples/react/simple/vite.config.ts | 6 + examples/react/star-wars/package.json | 12 -- examples/react/suspense/index.html | 2 +- examples/react/suspense/package.json | 20 +-- .../src/components/{Button.jsx => Button.tsx} | 10 +- .../components/{Project.jsx => Project.tsx} | 14 +- .../components/{Projects.jsx => Projects.tsx} | 22 +-- .../components/{Spinner.jsx => Spinner.tsx} | 0 .../suspense/src/{index.jsx => index.tsx} | 6 +- examples/react/suspense/src/queries.js | 25 --- examples/react/suspense/src/queries.ts | 23 +++ examples/react/suspense/tsconfig.json | 24 +++ examples/react/suspense/vite.config.ts | 6 + .../solid/basic-graphql-request/src/index.tsx | 28 +-- .../{basic-typescript => basic}/.eslintrc.cjs | 0 .../{basic-typescript => basic}/.gitignore | 0 .../{basic-typescript => basic}/README.md | 0 .../{basic-typescript => basic}/index.html | 0 .../{basic-typescript => basic}/package.json | 2 +- .../src/assets/favicon.ico | Bin .../{basic-typescript => basic}/src/index.tsx | 24 +-- .../{basic-typescript => basic}/tsconfig.json | 0 .../vite.config.ts | 0 examples/solid/simple/src/index.tsx | 9 +- pnpm-lock.yaml | 160 +++++------------- 82 files changed, 516 insertions(+), 764 deletions(-) delete mode 100644 examples/react/basic-graphql-request/.eslintrc rename examples/react/{basic-typescript => basic-graphql-request}/eslint.config.js (100%) rename examples/react/basic-graphql-request/src/{index.jsx => index.tsx} (84%) rename examples/react/{basic-typescript => basic-graphql-request}/tsconfig.json (100%) delete mode 100644 examples/react/basic-typescript/.gitignore delete mode 100644 examples/react/basic-typescript/README.md delete mode 100644 examples/react/basic-typescript/index.html delete mode 100644 examples/react/basic-typescript/package.json delete mode 100644 examples/react/basic-typescript/public/emblem-light.svg delete mode 100644 examples/react/basic/.eslintrc create mode 100644 examples/react/basic/eslint.config.js delete mode 100644 examples/react/basic/src/index.jsx rename examples/react/{basic-typescript => basic}/src/index.tsx (87%) create mode 100644 examples/react/basic/tsconfig.json rename examples/react/{basic-typescript => basic}/vite.config.ts (100%) rename examples/react/default-query-function/src/{index.jsx => index.tsx} (81%) create mode 100644 examples/react/default-query-function/tsconfig.json create mode 100644 examples/react/default-query-function/vite.config.ts rename examples/react/offline/src/{App.jsx => App.tsx} (99%) delete mode 100644 examples/react/offline/src/api.js create mode 100644 examples/react/offline/src/api.ts rename examples/react/offline/src/{index.jsx => index.tsx} (78%) rename examples/react/offline/src/{movies.js => movies.ts} (88%) create mode 100644 examples/react/offline/tsconfig.json create mode 100644 examples/react/offline/vite.config.ts rename examples/react/simple/src/{index.jsx => index.tsx} (76%) create mode 100644 examples/react/simple/tsconfig.json create mode 100644 examples/react/simple/vite.config.ts rename examples/react/suspense/src/components/{Button.jsx => Button.tsx} (69%) rename examples/react/suspense/src/components/{Project.jsx => Project.tsx} (75%) rename examples/react/suspense/src/components/{Projects.jsx => Projects.tsx} (52%) rename examples/react/suspense/src/components/{Spinner.jsx => Spinner.tsx} (100%) rename examples/react/suspense/src/{index.jsx => index.tsx} (94%) delete mode 100644 examples/react/suspense/src/queries.js create mode 100644 examples/react/suspense/src/queries.ts create mode 100644 examples/react/suspense/tsconfig.json create mode 100644 examples/react/suspense/vite.config.ts rename examples/solid/{basic-typescript => basic}/.eslintrc.cjs (100%) rename examples/solid/{basic-typescript => basic}/.gitignore (100%) rename examples/solid/{basic-typescript => basic}/README.md (100%) rename examples/solid/{basic-typescript => basic}/index.html (100%) rename examples/solid/{basic-typescript => basic}/package.json (87%) rename examples/solid/{basic-typescript => basic}/src/assets/favicon.ico (100%) rename examples/solid/{basic-typescript => basic}/src/index.tsx (90%) rename examples/solid/{basic-typescript => basic}/tsconfig.json (100%) rename examples/solid/{basic-typescript => basic}/vite.config.ts (100%) diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json index aab9b0326a..48bae7aa7d 100644 --- a/examples/react/algolia/package.json +++ b/examples/react/algolia/package.json @@ -24,17 +24,5 @@ "@vitejs/plugin-react": "^4.2.1", "typescript": "5.3.3", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json index 12cbf5a5d0..3ec3ef35e0 100644 --- a/examples/react/auto-refetching/package.json +++ b/examples/react/auto-refetching/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/auto-refetching/src/pages/index.js b/examples/react/auto-refetching/src/pages/index.js index 09831ec7d8..ace9bc343a 100644 --- a/examples/react/auto-refetching/src/pages/index.js +++ b/examples/react/auto-refetching/src/pages/index.js @@ -1,5 +1,4 @@ import React from 'react' -import axios from 'axios' // @@ -30,8 +29,8 @@ function Example() { const { status, data, error, isFetching } = useQuery({ queryKey: ['todos'], queryFn: async () => { - const res = await axios.get('/api/data') - return res.data + const response = await fetch('/api/data') + return await response.json() }, // Refetch the data every second refetchInterval: intervalMs, diff --git a/examples/react/basic-graphql-request/.eslintrc b/examples/react/basic-graphql-request/.eslintrc deleted file mode 100644 index 4e03b9e10b..0000000000 --- a/examples/react/basic-graphql-request/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"] -} diff --git a/examples/react/basic-typescript/eslint.config.js b/examples/react/basic-graphql-request/eslint.config.js similarity index 100% rename from examples/react/basic-typescript/eslint.config.js rename to examples/react/basic-graphql-request/eslint.config.js diff --git a/examples/react/basic-graphql-request/index.html b/examples/react/basic-graphql-request/index.html index 433cf93816..f098940196 100644 --- a/examples/react/basic-graphql-request/index.html +++ b/examples/react/basic-graphql-request/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json index a13a9aaf59..0230c361a9 100644 --- a/examples/react/basic-graphql-request/package.json +++ b/examples/react/basic-graphql-request/package.json @@ -18,17 +18,5 @@ "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/basic-graphql-request/src/index.jsx b/examples/react/basic-graphql-request/src/index.tsx similarity index 84% rename from examples/react/basic-graphql-request/src/index.jsx rename to examples/react/basic-graphql-request/src/index.tsx index 10aad56931..09995939cd 100644 --- a/examples/react/basic-graphql-request/src/index.jsx +++ b/examples/react/basic-graphql-request/src/index.tsx @@ -1,18 +1,24 @@ import React from 'react' import ReactDOM from 'react-dom/client' import { - useQuery, - useQueryClient, QueryClient, QueryClientProvider, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' -import { request, gql } from 'graphql-request' +import { gql, request } from 'graphql-request' const endpoint = 'https://graphqlzero.almansi.me/api' const queryClient = new QueryClient() +type Post = { + id: number + title: string + body: string +} + function App() { const [postId, setPostId] = React.useState(-1) @@ -44,7 +50,7 @@ function usePosts() { queryFn: async () => { const { posts: { data }, - } = await request( + } = await request<{ posts: { data: Array } }>( endpoint, gql` query { @@ -62,7 +68,11 @@ function usePosts() { }) } -function Posts({ setPostId }) { +function Posts({ + setPostId, +}: { + setPostId: React.Dispatch> +}) { const queryClient = useQueryClient() const { status, data, error, isFetching } = usePosts() @@ -106,11 +116,11 @@ function Posts({ setPostId }) { ) } -function usePost(postId) { - return useQuery( - ['post', postId], - async () => { - const { post } = await request( +function usePost(postId: number) { + return useQuery({ + queryKey: ['post', postId], + queryFn: async () => { + const { post } = await request<{ post: Post }>( endpoint, gql` query { @@ -125,13 +135,17 @@ function usePost(postId) { return post }, - { - enabled: !!postId, - }, - ) + enabled: !!postId, + }) } -function Post({ postId, setPostId }) { +function Post({ + postId, + setPostId, +}: { + postId: number + setPostId: React.Dispatch> +}) { const { status, data, error, isFetching } = usePost(postId) return ( @@ -158,5 +172,5 @@ function Post({ postId, setPostId }) { ) } -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/basic-typescript/tsconfig.json b/examples/react/basic-graphql-request/tsconfig.json similarity index 100% rename from examples/react/basic-typescript/tsconfig.json rename to examples/react/basic-graphql-request/tsconfig.json diff --git a/examples/react/basic-typescript/.gitignore b/examples/react/basic-typescript/.gitignore deleted file mode 100644 index 4673b022e5..0000000000 --- a/examples/react/basic-typescript/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -pnpm-lock.yaml -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* diff --git a/examples/react/basic-typescript/README.md b/examples/react/basic-typescript/README.md deleted file mode 100644 index 1cf8892652..0000000000 --- a/examples/react/basic-typescript/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Example - -To run this example: - -- `npm install` -- `npm run dev` diff --git a/examples/react/basic-typescript/index.html b/examples/react/basic-typescript/index.html deleted file mode 100644 index aed742fcef..0000000000 --- a/examples/react/basic-typescript/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - TanStack Query React Basic TypeScript Example App - - - -
- - - diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json deleted file mode 100644 index 0f502c1192..0000000000 --- a/examples/react/basic-typescript/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@tanstack/query-example-react-basic-typescript", - "private": true, - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "test:types": "tsc" - }, - "dependencies": { - "@tanstack/query-sync-storage-persister": "^5.50.1", - "@tanstack/react-query": "^5.50.1", - "@tanstack/react-query-devtools": "^5.50.1", - "@tanstack/react-query-persist-client": "^5.50.1", - "axios": "^1.6.8", - "react": "19.0.0-rc-4c2e457c7c-20240522", - "react-dom": "19.0.0-rc-4c2e457c7c-20240522" - }, - "devDependencies": { - "@tanstack/eslint-plugin-query": "^5.50.1", - "@types/react": "^18.2.79", - "@types/react-dom": "^18.2.25", - "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.57.0", - "eslint-config-prettier": "^9.1.0", - "typescript": "5.3.3", - "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/examples/react/basic-typescript/public/emblem-light.svg b/examples/react/basic-typescript/public/emblem-light.svg deleted file mode 100644 index a58e69ad5e..0000000000 --- a/examples/react/basic-typescript/public/emblem-light.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - emblem-light - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/examples/react/basic/.eslintrc b/examples/react/basic/.eslintrc deleted file mode 100644 index 270fbc9ac0..0000000000 --- a/examples/react/basic/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": [ - "plugin:react/jsx-runtime", - "plugin:react-hooks/recommended", - "plugin:@tanstack/eslint-plugin-query/recommended" - ] -} diff --git a/examples/react/basic/eslint.config.js b/examples/react/basic/eslint.config.js new file mode 100644 index 0000000000..dee0fcc96c --- /dev/null +++ b/examples/react/basic/eslint.config.js @@ -0,0 +1,19 @@ +import { tanstackConfig } from '@tanstack/config/eslint' +import pluginQuery from '@tanstack/eslint-plugin-query' +import pluginReact from '@eslint-react/eslint-plugin' +import pluginReactHooks from 'eslint-plugin-react-hooks' + +export default [ + ...tanstackConfig, + ...pluginQuery.configs['flat/recommended'], + pluginReact.configs.recommended, + { + plugins: { + 'react-hooks': pluginReactHooks, + }, + rules: { + 'react-hooks/exhaustive-deps': 'error', + 'react-hooks/rules-of-hooks': 'error', + }, + }, +] diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index acfcd2e4e5..d7c231330c 100644 --- a/examples/react/basic/index.html +++ b/examples/react/basic/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json index 2d7b1e5b1c..9c02fc5dbc 100644 --- a/examples/react/basic/package.json +++ b/examples/react/basic/package.json @@ -5,30 +5,24 @@ "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview" + "preview": "vite preview", + "test:types": "tsc" }, "dependencies": { + "@tanstack/query-sync-storage-persister": "^5.50.1", "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", + "@tanstack/react-query-persist-client": "^5.50.1", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { "@tanstack/eslint-plugin-query": "^5.50.1", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.57.0", + "typescript": "5.3.3", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx deleted file mode 100644 index 3ee4ac23a8..0000000000 --- a/examples/react/basic/src/index.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import axios from 'axios' -import { - useQuery, - useQueryClient, - QueryClient, - QueryClientProvider, -} from '@tanstack/react-query' -import { ReactQueryDevtools } from '@tanstack/react-query-devtools' - -const queryClient = new QueryClient() - -function App() { - const [postId, setPostId] = React.useState(-1) - - return ( - -

- As you visit the posts below, you will notice them in a loading state - the first time you load them. However, after you return to this list and - click on any posts you have already visited again, you will see them - load instantly and background refresh right before your eyes!{' '} - - (You may need to throttle your network speed to simulate longer - loading sequences) - -

- {postId > -1 ? ( - - ) : ( - - )} - - - ) -} - -function usePosts() { - return useQuery({ - queryKey: ['posts'], - queryFn: async () => { - const { data } = await axios.get( - 'https://jsonplaceholder.typicode.com/posts', - ) - return data - }, - }) -} - -function Posts({ setPostId }) { - const queryClient = useQueryClient() - const { status, data, error, isFetching } = usePosts() - - return ( -
-

Posts

-
- {status === 'pending' ? ( - 'Loading...' - ) : status === 'error' ? ( - Error: {error.message} - ) : ( - <> - -
{isFetching ? 'Background Updating...' : ' '}
- - )} -
-
- ) -} - -const getPostById = async (id) => { - const { data } = await axios.get( - `https://jsonplaceholder.typicode.com/posts/${id}`, - ) - return data -} - -function usePost(postId) { - return useQuery({ - queryKey: ['post', postId], - queryFn: () => getPostById(postId), - enabled: !!postId, - }) -} - -function Post({ postId, setPostId }) { - const { status, data, error, isFetching } = usePost(postId) - - return ( -
- - {!postId || status === 'pending' ? ( - 'Loading...' - ) : status === 'error' ? ( - Error: {error.message} - ) : ( - <> -

{data.title}

-
-

{data.body}

-
-
{isFetching ? 'Background Updating...' : ' '}
- - )} -
- ) -} - -const rootElement = document.getElementById('root') -ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/basic-typescript/src/index.tsx b/examples/react/basic/src/index.tsx similarity index 87% rename from examples/react/basic-typescript/src/index.tsx rename to examples/react/basic/src/index.tsx index d6aace092c..052ce4c797 100644 --- a/examples/react/basic-typescript/src/index.tsx +++ b/examples/react/basic/src/index.tsx @@ -1,12 +1,6 @@ import * as React from 'react' import ReactDOM from 'react-dom/client' -import axios from 'axios' -import { - QueryClient, - skipToken, - useQuery, - useQueryClient, -} from '@tanstack/react-query' +import { QueryClient, useQuery, useQueryClient } 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' @@ -33,10 +27,8 @@ function usePosts() { return useQuery({ queryKey: ['posts'], queryFn: async (): Promise> => { - const { data } = await axios.get( - 'https://jsonplaceholder.typicode.com/posts', - ) - return data + const response = await fetch('https://jsonplaceholder.typicode.com/posts') + return await response.json() }, }) } @@ -55,12 +47,12 @@ function Posts({
{status === 'pending' ? ( 'Loading...' - ) : error instanceof Error ? ( + ) : status === 'error' ? ( Error: {error.message} ) : ( <> {!postId || status === 'pending' ? ( 'Loading...' - ) : error instanceof Error ? ( + ) : status === 'error' ? ( Error: {error.message} ) : ( <> -

{data?.title}

+

{data.title}

-

{data?.body}

+

{data.body}

{isFetching ? 'Background Updating...' : ' '}
diff --git a/examples/react/basic/tsconfig.json b/examples/react/basic/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/basic/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/basic-typescript/vite.config.ts b/examples/react/basic/vite.config.ts similarity index 100% rename from examples/react/basic-typescript/vite.config.ts rename to examples/react/basic/vite.config.ts diff --git a/examples/react/default-query-function/index.html b/examples/react/default-query-function/index.html index 3365e7fa58..07e1d099d2 100644 --- a/examples/react/default-query-function/index.html +++ b/examples/react/default-query-function/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json index 8fbd3c5b03..7b9a9db79a 100644 --- a/examples/react/default-query-function/package.json +++ b/examples/react/default-query-function/package.json @@ -10,24 +10,12 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", + "typescript": "5.3.3", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/default-query-function/src/index.jsx b/examples/react/default-query-function/src/index.tsx similarity index 81% rename from examples/react/default-query-function/src/index.jsx rename to examples/react/default-query-function/src/index.tsx index 6a10ce9155..72a45b7f3c 100644 --- a/examples/react/default-query-function/src/index.jsx +++ b/examples/react/default-query-function/src/index.tsx @@ -1,20 +1,26 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import axios from 'axios' import { - useQuery, - useQueryClient, QueryClient, QueryClientProvider, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import type { QueryKey } from '@tanstack/react-query' + +type Post = { + id: number + title: string + body: string +} // Define a default query function that will receive the query key -const defaultQueryFn = async ({ queryKey }) => { - const { data } = await axios.get( +const defaultQueryFn = async ({ queryKey }: { queryKey: QueryKey }) => { + const response = await fetch( `https://jsonplaceholder.typicode.com${queryKey[0]}`, ) - return data + return await response.json() } // provide the default query function to your app via the query client @@ -51,11 +57,15 @@ function App() { ) } -function Posts({ setPostId }) { +function Posts({ + setPostId, +}: { + setPostId: React.Dispatch> +}) { const queryClient = useQueryClient() // All you have to do now is pass a key! - const { status, data, error, isFetching } = useQuery({ + const { status, data, error, isFetching } = useQuery>({ queryKey: ['/posts'], }) @@ -78,7 +88,7 @@ function Posts({ setPostId }) { style={ // We can use the queryCache here to show bold links for // ones that are cached - queryClient.getQueryData(['post', post.id]) + queryClient.getQueryData([`/posts/${post.id}`]) ? { fontWeight: 'bold', color: 'green', @@ -99,9 +109,15 @@ function Posts({ setPostId }) { ) } -function Post({ postId, setPostId }) { +function Post({ + postId, + setPostId, +}: { + postId: number + setPostId: React.Dispatch> +}) { // You can even leave out the queryFn and just go straight into options - const { status, data, error, isFetching } = useQuery({ + const { status, data, error, isFetching } = useQuery({ queryKey: [`/posts/${postId}`], enabled: !!postId, }) @@ -130,5 +146,5 @@ function Post({ postId, setPostId }) { ) } -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/default-query-function/tsconfig.json b/examples/react/default-query-function/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/default-query-function/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/default-query-function/vite.config.ts b/examples/react/default-query-function/vite.config.ts new file mode 100644 index 0000000000..9ffcc67574 --- /dev/null +++ b/examples/react/default-query-function/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +}) diff --git a/examples/react/infinite-query-with-max-pages/package.json b/examples/react/infinite-query-with-max-pages/package.json index f9f2750326..636bb35bd0 100644 --- a/examples/react/infinite-query-with-max-pages/package.json +++ b/examples/react/infinite-query-with-max-pages/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/infinite-query-with-max-pages/src/pages/index.js b/examples/react/infinite-query-with-max-pages/src/pages/index.js index ad7e6b6858..8df4c0e8d9 100644 --- a/examples/react/infinite-query-with-max-pages/src/pages/index.js +++ b/examples/react/infinite-query-with-max-pages/src/pages/index.js @@ -1,5 +1,4 @@ import React from 'react' -import axios from 'axios' import { useInfiniteQuery, QueryClient, @@ -32,8 +31,8 @@ function Example() { } = useInfiniteQuery({ queryKey: ['projects'], queryFn: async ({ pageParam }) => { - const res = await axios.get('/api/projects?cursor=' + pageParam) - return res.data + const response = await fetch(`/api/projects?cursor=${pageParam}`) + return await response.json() }, initialPageParam: 0, getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined, diff --git a/examples/react/load-more-infinite-scroll/package.json b/examples/react/load-more-infinite-scroll/package.json index 16236a4920..c35c1f54b9 100644 --- a/examples/react/load-more-infinite-scroll/package.json +++ b/examples/react/load-more-infinite-scroll/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/load-more-infinite-scroll/src/pages/index.js b/examples/react/load-more-infinite-scroll/src/pages/index.js index 1635230ca5..b3b679be4e 100644 --- a/examples/react/load-more-infinite-scroll/src/pages/index.js +++ b/examples/react/load-more-infinite-scroll/src/pages/index.js @@ -1,6 +1,5 @@ import React from 'react' import Link from 'next/link' -import axios from 'axios' import { useInView } from 'react-intersection-observer' import { useInfiniteQuery, @@ -36,8 +35,8 @@ function Example() { } = useInfiniteQuery({ queryKey: ['projects'], queryFn: async ({ pageParam }) => { - const res = await axios.get('/api/projects?cursor=' + pageParam) - return res.data + const response = await fetch(`/api/projects?cursor=${pageParam}`) + return await response.json() }, initialPageParam: 0, getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined, diff --git a/examples/react/nextjs/package.json b/examples/react/nextjs/package.json index 31ddba1e7d..6c40ed726f 100644 --- a/examples/react/nextjs/package.json +++ b/examples/react/nextjs/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "ky": "^1.2.4", "next": "^14.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/react/nextjs/src/hooks/usePosts/index.js b/examples/react/nextjs/src/hooks/usePosts/index.js index d6956566c4..8affadecf8 100644 --- a/examples/react/nextjs/src/hooks/usePosts/index.js +++ b/examples/react/nextjs/src/hooks/usePosts/index.js @@ -1,9 +1,9 @@ -import ky from 'ky' import { useQuery } from '@tanstack/react-query' const fetchPosts = async (limit = 10) => { - const parsed = await ky('https://jsonplaceholder.typicode.com/posts').json() - return parsed.filter((x) => x.id <= limit) + const response = await fetch('https://jsonplaceholder.typicode.com/posts') + const data = await response.json() + return data.filter((x) => x.id <= limit) } const usePosts = (limit) => { diff --git a/examples/react/offline/index.html b/examples/react/offline/index.html index 30039c3a62..5e3e966568 100644 --- a/examples/react/offline/index.html +++ b/examples/react/offline/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/offline/package.json b/examples/react/offline/package.json index 69928dc0f5..09ca99196d 100644 --- a/examples/react/offline/package.json +++ b/examples/react/offline/package.json @@ -13,7 +13,6 @@ "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", "@tanstack/react-query-persist-client": "^5.50.1", - "ky": "^1.2.4", "msw": "^2.3.0", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522", @@ -21,20 +20,9 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", + "typescript": "5.3.3", "vite": "^5.2.11" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "msw": { "workerDirectory": [ "public" diff --git a/examples/react/offline/src/App.jsx b/examples/react/offline/src/App.tsx similarity index 99% rename from examples/react/offline/src/App.jsx rename to examples/react/offline/src/App.tsx index 5e430e8187..a891b5607d 100644 --- a/examples/react/offline/src/App.jsx +++ b/examples/react/offline/src/App.tsx @@ -1,15 +1,13 @@ import * as React from 'react' - import { - useQuery, - QueryClient, MutationCache, + QueryClient, onlineManager, useIsRestoring, + useQuery, } 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' import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' import { @@ -170,7 +168,7 @@ function Detail() { return 'Loading...' } - function submitForm(event) { + function submitForm(event: any) { event.preventDefault() updateMovie.mutate({ diff --git a/examples/react/offline/src/api.js b/examples/react/offline/src/api.js deleted file mode 100644 index 6f6ac7a8bb..0000000000 --- a/examples/react/offline/src/api.js +++ /dev/null @@ -1,63 +0,0 @@ -import { delay, HttpResponse, http, passthrough } from 'msw' -import { setupWorker } from 'msw/browser' -import ky from 'ky' - -const movies = [ - { - id: '1', - title: 'Guardians of the Galaxy', - comment: '', - }, - { - id: '2', - title: 'Wall-E', - comment: '', - }, -] - -export const fetchMovie = (id) => ky.get(`/movies/${id}`).json() -export const fetchMovies = () => ky.get('/movies').json() -export const updateMovie = (id, comment) => - ky.post(`/movies/${id}`, { json: { comment } }).json() - -export const worker = setupWorker( - ...[ - http.get('/movies', async () => { - console.log('movies') - await delay(1000) - return HttpResponse.json({ - ts: Date.now(), - movies: movies.map(({ id, title }) => ({ id, title })), - }) - }), - http.get('/movies/:id', async ({ params }) => { - const { id } = params - - const movie = movies.find((movie) => movie.id === id) - if (!movie) { - return new HttpResponse(`Movie with id ${id} not found`, { - status: 404, - }) - } - - await delay(1000) - return HttpResponse.json({ ts: Date.now(), movie }) - }), - http.post('/movies/:id', async ({ request, params }) => { - const { id } = params - const body = await request.json() - const { comment } = body - - movies.forEach((movie) => { - if (movie.id === id) { - movie.comment = comment.toUpperCase() - } - }) - - await delay(1000) - return HttpResponse.json({ message: `Successfully updated movie ${id}` }) - }), - http.get('*.js', () => passthrough()), - http.get('*.svg', () => passthrough()), - ], -) diff --git a/examples/react/offline/src/api.ts b/examples/react/offline/src/api.ts new file mode 100644 index 0000000000..eb547bdfaf --- /dev/null +++ b/examples/react/offline/src/api.ts @@ -0,0 +1,83 @@ +import { HttpResponse, delay, http, passthrough } from 'msw' +import { setupWorker } from 'msw/browser' + +const movies = [ + { + id: '1', + title: 'Guardians of the Galaxy', + comment: '', + }, + { + id: '2', + title: 'Wall-E', + comment: '', + }, +] + +export const fetchMovie = async ( + id: string, +): Promise<{ + ts: number + movie: { comment: string; id: string; title: string } +}> => { + const response = await fetch(`/movies/${id}`) + return await response.json() +} + +export const fetchMovies = async (): Promise<{ + ts: number + movies: typeof movies +}> => { + const response = await fetch('/movies') + return await response.json() +} + +export const updateMovie = async (id: string, comment: string) => { + const response = await fetch(`/movies/${id}`, { + method: 'POST', + body: JSON.stringify({ comment }), + }) + return await response.json() +} + +export const worker = setupWorker( + http.get('/movies', async () => { + await delay(500) + return HttpResponse.json({ + ts: Date.now(), + movies: movies.map(({ id, title }) => ({ id, title })), + }) + }), + + http.get('/movies/:id', async ({ params }) => { + const { id } = params + + const movie = movies.find((movie) => movie.id === id) + + if (!movie) { + return new HttpResponse(`Movie with id ${id} not found`, { + status: 404, + }) + } + + await delay(500) + return HttpResponse.json({ ts: Date.now(), movie }) + }), + + http.post('/movies/:id', async ({ request, params }) => { + const { id } = params + const body = await request.json() + const { comment } = body + + movies.forEach((movie) => { + if (movie.id === id) { + movie.comment = comment.toUpperCase() + } + }) + + await delay(500) + return HttpResponse.json({ message: `Successfully updated movie ${id}` }) + }), + http.get('*.js', () => passthrough()), + http.get('*.svg', () => passthrough()), +) diff --git a/examples/react/offline/src/index.jsx b/examples/react/offline/src/index.tsx similarity index 78% rename from examples/react/offline/src/index.jsx rename to examples/react/offline/src/index.tsx index 026a35b323..d6791b40c1 100644 --- a/examples/react/offline/src/index.jsx +++ b/examples/react/offline/src/index.tsx @@ -5,7 +5,7 @@ import { worker } from './api' worker.start() -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render(
diff --git a/examples/react/offline/src/movies.js b/examples/react/offline/src/movies.ts similarity index 88% rename from examples/react/offline/src/movies.js rename to examples/react/offline/src/movies.ts index 12fb656539..d2a37e8bf8 100644 --- a/examples/react/offline/src/movies.js +++ b/examples/react/offline/src/movies.ts @@ -1,15 +1,15 @@ +import * as React from 'react' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import * as api from './api' -import * as React from 'react' export const movieKeys = { all: () => ['movies'], list: () => [...movieKeys.all(), 'list'], details: () => [...movieKeys.all(), 'detail'], - detail: (id) => [...movieKeys.details(), id], + detail: (id: string) => [...movieKeys.details(), id], } -export const useMovie = (movieId) => { +export const useMovie = (movieId: string) => { const queryClient = useQueryClient() const movieQuery = useQuery({ @@ -17,7 +17,7 @@ export const useMovie = (movieId) => { queryFn: () => api.fetchMovie(movieId), }) - const [comment, setComment] = React.useState() + const [comment, setComment] = React.useState() const updateMovie = useMutation({ mutationKey: movieKeys.detail(movieId), diff --git a/examples/react/offline/tsconfig.json b/examples/react/offline/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/offline/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/offline/vite.config.ts b/examples/react/offline/vite.config.ts new file mode 100644 index 0000000000..9ffcc67574 --- /dev/null +++ b/examples/react/offline/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +}) diff --git a/examples/react/optimistic-updates-cache/package.json b/examples/react/optimistic-updates-cache/package.json index 3ced3eb4b8..33520ea40c 100755 --- a/examples/react/optimistic-updates-cache/package.json +++ b/examples/react/optimistic-updates-cache/package.json @@ -11,7 +11,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/optimistic-updates-cache/src/pages/index.tsx b/examples/react/optimistic-updates-cache/src/pages/index.tsx index b03e3aa16f..b5b9343d2f 100644 --- a/examples/react/optimistic-updates-cache/src/pages/index.tsx +++ b/examples/react/optimistic-updates-cache/src/pages/index.tsx @@ -1,5 +1,4 @@ import * as React from 'react' -import axios from 'axios' import { queryOptions, @@ -22,8 +21,8 @@ type Todos = { } async function fetchTodos(): Promise { - const res = await axios.get('/api/data') - return res.data + const response = await fetch('/api/data') + return await response.json() } const todoListOptions = queryOptions({ @@ -37,7 +36,13 @@ function Example() { const { isFetching, ...queryInfo } = useQuery(todoListOptions) const addTodoMutation = useMutation({ - mutationFn: (newTodo) => axios.post('/api/data', { text: newTodo }), + mutationFn: async (newTodo: string) => { + const response = await fetch('/api/data', { + method: 'POST', + body: JSON.stringify({ text: newTodo }), + }) + return await response.json() + }, // When mutate is called: onMutate: async (newTodo: string) => { setText('') diff --git a/examples/react/optimistic-updates-ui/package.json b/examples/react/optimistic-updates-ui/package.json index 4c529ed159..aa6be1b41d 100755 --- a/examples/react/optimistic-updates-ui/package.json +++ b/examples/react/optimistic-updates-ui/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/optimistic-updates-ui/src/pages/index.tsx b/examples/react/optimistic-updates-ui/src/pages/index.tsx index 677e1b42fa..a382f1c8a1 100644 --- a/examples/react/optimistic-updates-ui/src/pages/index.tsx +++ b/examples/react/optimistic-updates-ui/src/pages/index.tsx @@ -1,12 +1,10 @@ import * as React from 'react' -import axios from 'axios' - import { - useQuery, - useQueryClient, - useMutation, QueryClient, QueryClientProvider, + useMutation, + useQuery, + useQueryClient, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -21,8 +19,8 @@ type Todos = { } async function fetchTodos(): Promise { - const res = await axios.get('/api/data') - return res.data + const response = await fetch('/api/data') + return await response.json() } function useTodos() { @@ -35,7 +33,13 @@ function Example() { const todoQuery = useTodos() const addTodoMutation = useMutation({ - mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }), + mutationFn: async (newTodo: string) => { + const response = await fetch('/api/data', { + method: 'POST', + body: JSON.stringify({ text: newTodo }), + }) + return await response.json() + }, onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), }) diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json index 33f75c8b85..8fc4070b5a 100644 --- a/examples/react/pagination/package.json +++ b/examples/react/pagination/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/pagination/src/pages/index.js b/examples/react/pagination/src/pages/index.js index 6206f8547f..1b937ffd51 100644 --- a/examples/react/pagination/src/pages/index.js +++ b/examples/react/pagination/src/pages/index.js @@ -1,5 +1,4 @@ import React from 'react' -import axios from 'axios' import { useQuery, useQueryClient, @@ -20,8 +19,8 @@ export default function App() { } async function fetchProjects(page = 0) { - const { data } = await axios.get('/api/projects?page=' + page) - return data + const response = await fetch(`/api/projects?page=${page}`) + return await response.json() } function Example() { diff --git a/examples/react/playground/package.json b/examples/react/playground/package.json index 7e4af9d0cd..cf58d757a8 100644 --- a/examples/react/playground/package.json +++ b/examples/react/playground/package.json @@ -16,17 +16,5 @@ "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/prefetching/package.json b/examples/react/prefetching/package.json index a0bb98eddc..bb293cbded 100644 --- a/examples/react/prefetching/package.json +++ b/examples/react/prefetching/package.json @@ -10,7 +10,6 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "isomorphic-unfetch": "4.0.2", "next": "^14.2.4", "react": "^18.2.0", diff --git a/examples/react/prefetching/src/pages/index.js b/examples/react/prefetching/src/pages/index.js index c8edc5465d..4c37c32c8f 100644 --- a/examples/react/prefetching/src/pages/index.js +++ b/examples/react/prefetching/src/pages/index.js @@ -1,20 +1,19 @@ import React from 'react' -import axios from 'axios' import { useQuery, useQueryClient } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' const getCharacters = async () => { await new Promise((r) => setTimeout(r, 500)) - const { data } = await axios.get('https://rickandmortyapi.com/api/character/') - return data + const response = await fetch('https://rickandmortyapi.com/api/character/') + return await response.json() } const getCharacter = async (selectedChar) => { await new Promise((r) => setTimeout(r, 500)) - const { data } = await axios.get( + const response = await fetch( `https://rickandmortyapi.com/api/character/${selectedChar}`, ) - return data + return await response.json() } export default function Example() { diff --git a/examples/react/react-router/package.json b/examples/react/react-router/package.json index aa0b072e1c..996bd7c877 100644 --- a/examples/react/react-router/package.json +++ b/examples/react/react-router/package.json @@ -27,17 +27,5 @@ "@vitejs/plugin-react": "^4.2.1", "typescript": "5.3.3", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/rick-morty/package.json b/examples/react/rick-morty/package.json index 08665f67b1..334c9e841e 100644 --- a/examples/react/rick-morty/package.json +++ b/examples/react/rick-morty/package.json @@ -22,17 +22,5 @@ "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/simple/index.html b/examples/react/simple/index.html index d743f7dff7..857a3425b6 100644 --- a/examples/react/simple/index.html +++ b/examples/react/simple/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/simple/package.json b/examples/react/simple/package.json index 6f60d18726..05e1832338 100644 --- a/examples/react/simple/package.json +++ b/examples/react/simple/package.json @@ -10,24 +10,12 @@ "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522" }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", + "typescript": "5.3.3", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/simple/src/index.jsx b/examples/react/simple/src/index.tsx similarity index 76% rename from examples/react/simple/src/index.jsx rename to examples/react/simple/src/index.tsx index fa7f86a58a..6a137cb9e2 100644 --- a/examples/react/simple/src/index.jsx +++ b/examples/react/simple/src/index.tsx @@ -6,13 +6,13 @@ import { useQuery, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' -import axios from 'axios' const queryClient = new QueryClient() export default function App() { return ( + ) @@ -21,10 +21,12 @@ export default function App() { function Example() { const { isPending, error, data, isFetching } = useQuery({ queryKey: ['repoData'], - queryFn: () => - axios - .get('https://api.github.com/repos/tannerlinsley/react-query') - .then((res) => res.data), + queryFn: async () => { + const response = await fetch( + 'https://api.github.com/repos/TanStack/query', + ) + return await response.json() + }, }) if (isPending) return 'Loading...' @@ -33,16 +35,15 @@ function Example() { return (
-

{data.name}

+

{data.full_name}

{data.description}

👀 {data.subscribers_count}{' '} ✨ {data.stargazers_count}{' '} 🍴 {data.forks_count}
{isFetching ? 'Updating...' : ''}
-
) } -const rootElement = document.getElementById('root') +const rootElement = document.getElementById('root') as HTMLElement ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/simple/tsconfig.json b/examples/react/simple/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/simple/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/simple/vite.config.ts b/examples/react/simple/vite.config.ts new file mode 100644 index 0000000000..9ffcc67574 --- /dev/null +++ b/examples/react/simple/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +}) diff --git a/examples/react/star-wars/package.json b/examples/react/star-wars/package.json index bda3023d0e..9cc6375427 100644 --- a/examples/react/star-wars/package.json +++ b/examples/react/star-wars/package.json @@ -22,17 +22,5 @@ "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "vite": "^5.2.11" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/examples/react/suspense/index.html b/examples/react/suspense/index.html index bbf1315b5e..aca35c1a17 100644 --- a/examples/react/suspense/index.html +++ b/examples/react/suspense/index.html @@ -11,6 +11,6 @@
- + diff --git a/examples/react/suspense/package.json b/examples/react/suspense/package.json index 89b586e354..605a39d4f4 100644 --- a/examples/react/suspense/package.json +++ b/examples/react/suspense/package.json @@ -2,10 +2,14 @@ "name": "@tanstack/query-example-react-suspense", "private": true, "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, "dependencies": { "@tanstack/react-query": "^5.50.1", "@tanstack/react-query-devtools": "^5.50.1", - "axios": "^1.6.8", "font-awesome": "^4.7.0", "react": "19.0.0-rc-4c2e457c7c-20240522", "react-dom": "19.0.0-rc-4c2e457c7c-20240522", @@ -13,17 +17,7 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", + "typescript": "5.3.3", "vite": "^5.2.11" - }, - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] + } } diff --git a/examples/react/suspense/src/components/Button.jsx b/examples/react/suspense/src/components/Button.tsx similarity index 69% rename from examples/react/suspense/src/components/Button.jsx rename to examples/react/suspense/src/components/Button.tsx index 67f33c4bde..252272ff74 100644 --- a/examples/react/suspense/src/components/Button.jsx +++ b/examples/react/suspense/src/components/Button.tsx @@ -2,10 +2,16 @@ import React from 'react' import Spinner from './Spinner' -export default function Button({ children, onClick }) { +export default function Button({ + children, + onClick, +}: { + children: React.ReactNode + onClick: any +}) { const [isPending, startTransition] = React.useTransition() - const handleClick = (e) => { + const handleClick = (e: any) => { startTransition(() => { onClick(e) }) diff --git a/examples/react/suspense/src/components/Project.jsx b/examples/react/suspense/src/components/Project.tsx similarity index 75% rename from examples/react/suspense/src/components/Project.jsx rename to examples/react/suspense/src/components/Project.tsx index a3ffdb4b09..84ca4e454d 100644 --- a/examples/react/suspense/src/components/Project.jsx +++ b/examples/react/suspense/src/components/Project.tsx @@ -1,12 +1,16 @@ import React from 'react' import { useSuspenseQuery } from '@tanstack/react-query' - +import { fetchProject } from '../queries' import Button from './Button' import Spinner from './Spinner' -import { fetchProject } from '../queries' - -export default function Project({ activeProject, setActiveProject }) { +export default function Project({ + activeProject, + setActiveProject, +}: { + activeProject: string + setActiveProject: React.Dispatch> +}) { const { data, isFetching } = useSuspenseQuery({ queryKey: ['project', activeProject], queryFn: () => fetchProject(activeProject), @@ -22,7 +26,7 @@ export default function Project({ activeProject, setActiveProject }) {

forks: {data.forks_count}

stars: {data.stargazers_count}

-

watchers: {data.watchers}

+

watchers: {data.watchers_count}

) : null}
diff --git a/examples/react/suspense/src/components/Projects.jsx b/examples/react/suspense/src/components/Projects.tsx similarity index 52% rename from examples/react/suspense/src/components/Projects.jsx rename to examples/react/suspense/src/components/Projects.tsx index 5f652d22a3..f1307692a9 100644 --- a/examples/react/suspense/src/components/Projects.jsx +++ b/examples/react/suspense/src/components/Projects.tsx @@ -1,12 +1,14 @@ import React from 'react' -import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query' - +import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query' +import { fetchProject, fetchProjects } from '../queries' import Button from './Button' import Spinner from './Spinner' -import { fetchProjects, fetchProject } from '../queries' - -export default function Projects({ setActiveProject }) { +export default function Projects({ + setActiveProject, +}: { + setActiveProject: React.Dispatch> +}) { const queryClient = useQueryClient() const { data, isFetching } = useSuspenseQuery({ queryKey: ['projects'], @@ -15,17 +17,17 @@ export default function Projects({ setActiveProject }) { return (
-

Projects {isFetching ? : null}

+

TanStack Repositories {isFetching ? : null}

{data.map((project) => ( -

+