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
TanStack · Jul 10, 2024 · 7fc9472 · 7fc9472
1 parent 362f8e6
commit 7fc9472
Show file tree

Hide file tree

Showing 82 changed files with 516 additions and 764 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/...s/react/basic-typescript/eslint.config.js → ...ct/basic-graphql-request/eslint.config.js b/...s/react/basic-typescript/eslint.config.js → ...ct/basic-graphql-request/eslint.config.js
diff --git a/examples/react/basic-graphql-request/index.html b/examples/react/basic-graphql-request/index.html
@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git 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/...react/basic-graphql-request/src/index.jsx → ...react/basic-graphql-request/src/index.tsx b/...react/basic-graphql-request/src/index.jsx → ...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<Post> } }>(
         endpoint,
         gql`
           query {
@@ -62,7 +68,11 @@ function usePosts() {
   })
 }
 
-function Posts({ setPostId }) {
+function Posts({
+  setPostId,
+}: {
+  setPostId: React.Dispatch<React.SetStateAction<number>>
+}) {
   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<React.SetStateAction<number>>
+}) {
   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(<App />)
diff --git a/...ples/react/basic-typescript/tsconfig.json → ...react/basic-graphql-request/tsconfig.json b/...ples/react/basic-typescript/tsconfig.json → ...react/basic-graphql-request/tsconfig.json
diff --git a/examples/react/basic-typescript/.gitignore b/examples/react/basic-typescript/.gitignore
diff --git a/examples/react/basic-typescript/README.md b/examples/react/basic-typescript/README.md
diff --git a/examples/react/basic-typescript/index.html b/examples/react/basic-typescript/index.html
diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json
diff --git a/examples/react/basic-typescript/public/emblem-light.svg b/examples/react/basic-typescript/public/emblem-light.svg
diff --git a/examples/react/basic/.eslintrc b/examples/react/basic/.eslintrc
diff --git a/examples/react/basic/eslint.config.js 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
@@ -11,6 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git 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"
-    ]
   }
 }