docs(examples/preact/optimistic-updates): add optimistic-updates example (#12404)

Author: sukvvon

docs/config.json

@@ -7027,6 +7027,10 @@
               "label": "Auto Refetching / Polling / Realtime",
               "to": "framework/preact/examples/auto-refetching"
             },
+            {
+              "label": "Optimistic Updates",
+              "to": "framework/preact/examples/optimistic-updates"
+            },
             {
               "label": "Pagination",
               "to": "framework/preact/examples/pagination"

examples/preact/optimistic-updates/.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/preact/optimistic-updates/README.md

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

examples/preact/optimistic-updates/eslint.config.js

@@ -0,0 +1,20 @@
+// @ts-check
+
+import { tanstackConfig } from '@tanstack/eslint-config'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+// @ts-ignore: no types for eslint-config-preact
+import preact from 'eslint-config-preact'
+import { defineConfig } from 'eslint/config'
+
+export default defineConfig([
+  ...preact,
+  ...tanstackConfig,
+  ...pluginQuery.configs['flat/recommended-strict'],
+  {
+    rules: {
+      'no-duplicate-imports': 'off',
+      'no-redeclare': 'off',
+      'no-unused-vars': 'off',
+    },
+  },
+])

examples/preact/optimistic-updates/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Query Preact Optimistic Updates Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/preact/optimistic-updates/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tanstack/query-example-preact-optimistic-updates",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:eslint": "eslint ./src",
+    "test:types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/preact-query": "^5.105.0",
+    "@tanstack/preact-query-devtools": "^5.105.0",
+    "msw": "^2.15.0",
+    "preact": "^11.0.1"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.6",
+    "@tanstack/eslint-plugin-query": "^5.105.0",
+    "eslint": "^9.36.0",
+    "eslint-config-preact": "^2.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}