docs(examples): Add example using TanStack Query and Router (#5625)

* docs: add example with query and router * chore: update lockfile * fix tests * prettier stuff * Downgrade prettier --------- Co-authored-by: Kevin Vandy <kevinvandy656@gmail.com> Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
TanStack · Jun 29, 2024 · 80e45cc · 80e45cc
1 parent bbe4ba3
commit 80e45cc
Show file tree

Hide file tree

Showing 33 changed files with 10,205 additions and 3,129 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -617,6 +617,10 @@
             {
               "to": "framework/react/examples/custom-features",
               "label": "Custom Features"
+            },
+            {
+              "to": "framework/react/examples/query-router-search-params",
+              "label": "Query Router Search Params"
             }
           ]
         },

diff --git a/examples/angular/filters/src/app/app.component.html b/examples/angular/filters/src/app/app.component.html
@@ -10,7 +10,7 @@
               @if (!header.isPlaceholder) {
                 <div
                   [ngClass]="{
-                    'cursor-pointer select-none': header.column.getCanSort()
+                    'cursor-pointer select-none': header.column.getCanSort(),
                   }"
                 >
                   <ng-container

diff --git a/examples/qwik/basic/package.json b/examples/qwik/basic/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "serve dist"
   },
   "devDependencies": {

diff --git a/examples/qwik/filters/package.json b/examples/qwik/filters/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "serve dist"
   },
   "devDependencies": {

diff --git a/examples/qwik/row-selection/package.json b/examples/qwik/row-selection/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "serve dist"
   },
   "devDependencies": {

diff --git a/examples/qwik/sorting/package.json b/examples/qwik/sorting/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "serve dist"
   },
   "devDependencies": {

diff --git a/examples/react/query-router-search-params/.gitignore b/examples/react/query-router-search-params/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/query-router-search-params/README.md b/examples/react/query-router-search-params/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/react/query-router-search-params/index.html b/examples/react/query-router-search-params/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/query-router-search-params/package.json b/examples/react/query-router-search-params/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "tanstack-table-example-query-router-search-params",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-router": "^1.36.3",
+    "@tanstack/react-table": "^8.17.3",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/router-vite-plugin": "^1.37.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/react/query-router-search-params/src/App.tsx b/examples/react/query-router-search-params/src/App.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createRouter, RouterProvider } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const queryClient = new QueryClient()
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  )
+}