snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/react/auto-refetching/.gitignore

@@ -0,0 +1,27 @@
+# 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*

examples/react/auto-refetching/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`

examples/react/auto-refetching/next.config.js

@@ -0,0 +1,13 @@
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+}
+
+export default nextConfig

examples/react/auto-refetching/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@tanstack/query-example-react-auto-refetching",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --webpack",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-query-devtools": "^5.102.8",
+    "next": "^16.0.7",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "5.8.3"
+  }
+}

examples/react/auto-refetching/src/pages/api/data.ts

@@ -0,0 +1,21 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+// an simple endpoint for getting current list
+let list = ['Item 1', 'Item 2', 'Item 3']
+
+export default async (
+  req: NextApiRequest,
+  res: NextApiResponse<typeof list>,
+) => {
+  if (req.query.add) {
+    if (!list.includes(req.query.add)) {
+      list.push(req.query.add)
+    }
+  } else if (req.query.clear) {
+    list = []
+  }
+
+  await new Promise((r) => setTimeout(r, 100))
+
+  res.json(list)
+}

examples/react/auto-refetching/src/pages/index.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+    </QueryClientProvider>
+  )
+}
+
+function Example() {
+  const queryClient = useQueryClient()
+  const [intervalMs, setIntervalMs] = React.useState(1000)
+  const [value, setValue] = React.useState('')
+
+  const { status, data, error, isFetching } = useQuery({
+    queryKey: ['todos'],
+    queryFn: async (): Promise<Array<string>> => {
+      const response = await fetch('/api/data')
+      return await response.json()
+    },
+    // Refetch the data every second
+    refetchInterval: intervalMs,
+  })
+
+  const addMutation = useMutation({
+    mutationFn: (add: string) => fetch(`/api/data?add=${add}`),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  })
+
+  const clearMutation = useMutation({
+    mutationFn: () => fetch(`/api/data?clear=1`),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  })
+
+  if (status === 'pending') return <h1>Loading...</h1>
+  if (status === 'error') return <span>Error: {error.message}</span>
+
+  return (
+    <div>
+      <h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
+      <p>
+        This example is best experienced on your own machine, where you can open
+        multiple tabs to the same localhost server and see your changes
+        propagate between the two.
+      </p>
+      <label>
+        Query Interval speed (ms):{' '}
+        <input
+          value={intervalMs}
+          onChange={(ev) => setIntervalMs(Number(ev.target.value))}
+          type="number"
+          step="100"
+        />{' '}
+        <span
+          style={{
+            display: 'inline-block',
+            marginLeft: '.5rem',
+            width: 10,
+            height: 10,
+            background: isFetching ? 'green' : 'transparent',
+            transition: !isFetching ? 'all .3s ease' : 'none',
+            borderRadius: '100%',
+            transform: 'scale(2)',
+          }}
+        />
+      </label>
+      <h2>Todo List</h2>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          addMutation.mutate(value, {
+            onSuccess: () => {
+              setValue('')
+            },
+          })
+        }}
+      >
+        <input
+          placeholder="enter something"
+          value={value}
+          onChange={(ev) => setValue(ev.target.value)}
+        />
+      </form>
+      <ul>
+        {data.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <div>
+        <button
+          onClick={() => {
+            clearMutation.mutate()
+          }}
+        >
+          Clear All
+        </button>
+      </div>
+      <ReactQueryDevtools initialIsOpen />
+    </div>
+  )
+}

examples/react/auto-refetching/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "target": "ES2017"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}