ci(examples): test examples in CI (TanStack#6813)

lachlancollins · web-flow · commit 2aeb0bf684d9 · 2024-02-03T15:53:29.000+11:00
* Update Nx config

* Make nextjs examples work

* Fix 2 more next examples

* Fix solid and svelte examples

* Fix react prefetching example

* Fix svelte type
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -15,7 +15,6 @@ concurrency:
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-  NX_CLOUD_AUTH_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
 
 jobs:
   test-and-publish:
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -12,11 +12,9 @@ concurrency:
   cancel-in-progress: true
 
 env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
   NX_CLOUD_DISTRIBUTED_EXECUTION: true
   NX_CLOUD_DISTRIBUTED_EXECUTION_AGENT_COUNT: 3
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-  NX_CLOUD_AUTH_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
-  NX_VERBOSE_LOGGING: true
 
 jobs:
   main:
diff --git a/examples/react/auto-refetching/next.config.js b/examples/react/auto-refetching/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@tanstack/query-example-react-refetch-interval",
+  "name": "@tanstack/query-example-react-auto-refetching",
   "private": true,
   "main": "index.js",
   "license": "MIT",
diff --git a/examples/react/infinite-query-with-max-pages/next.config.js b/examples/react/infinite-query-with-max-pages/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/load-more-infinite-scroll/next.config.js b/examples/react/load-more-infinite-scroll/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/nextjs/next.config.js b/examples/react/nextjs/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/optimistic-updates-cache/next.config.js b/examples/react/optimistic-updates-cache/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/optimistic-updates-ui/next.config.js b/examples/react/optimistic-updates-ui/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/pagination/next.config.js b/examples/react/pagination/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/prefetching/next.config.js b/examples/react/prefetching/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
diff --git a/examples/react/prefetching/src/pages/_app.js b/examples/react/prefetching/src/pages/_app.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function MyApp({ Component, pageProps }) {
+  const [queryClient] = React.useState(() => new QueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+    </QueryClientProvider>
+  )
+}
diff --git a/examples/react/prefetching/src/pages/index.js b/examples/react/prefetching/src/pages/index.js
@@ -1,11 +1,6 @@
 import React from 'react'
 import axios from 'axios'
-import {
-  useQuery,
-  useQueryClient,
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const getCharacters = async () => {
@@ -22,17 +17,7 @@ const getCharacter = async (selectedChar) => {
   return data
 }
 
-const queryClient = new QueryClient()
-
-export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Example />
-    </QueryClientProvider>
-  )
-}
-
-function Example() {
+export default function Example() {
   const queryClient = useQueryClient()
   const rerender = React.useState(0)[1]
   const [selectedChar, setSelectedChar] = React.useState(1)
diff --git a/examples/solid/basic-graphql-request/vite.config.ts b/examples/solid/basic-graphql-request/vite.config.ts
@@ -1,15 +1,6 @@
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import solid from 'vite-plugin-solid'
 
 export default defineConfig({
-  plugins: [solidPlugin()],
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: 'esnext',
-  },
-  resolve: {
-    preserveSymlinks: true,
-  },
+  plugins: [solid()],
 })
diff --git a/examples/solid/basic-typescript/vite.config.ts b/examples/solid/basic-typescript/vite.config.ts
@@ -1,15 +1,6 @@
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import solid from 'vite-plugin-solid'
 
 export default defineConfig({
-  plugins: [solidPlugin()],
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: 'esnext',
-  },
-  resolve: {
-    preserveSymlinks: true,
-  },
+  plugins: [solid()],
 })
diff --git a/examples/solid/default-query-function/vite.config.ts b/examples/solid/default-query-function/vite.config.ts
@@ -1,15 +1,6 @@
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import solid from 'vite-plugin-solid'
 
 export default defineConfig({
-  plugins: [solidPlugin()],
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: 'esnext',
-  },
-  resolve: {
-    preserveSymlinks: true,
-  },
+  plugins: [solid()],
 })
diff --git a/examples/solid/simple/vite.config.ts b/examples/solid/simple/vite.config.ts
@@ -1,15 +1,6 @@
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import solid from 'vite-plugin-solid'
 
 export default defineConfig({
-  plugins: [solidPlugin()],
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: 'esnext',
-  },
-  resolve: {
-    preserveSymlinks: true,
-  },
+  plugins: [solid()],
 })
diff --git a/examples/svelte/auto-refetching/sandbox.config.json b/examples/svelte/auto-refetching/sandbox.config.json
diff --git a/examples/svelte/basic/sandbox.config.json b/examples/svelte/basic/sandbox.config.json
diff --git a/examples/svelte/load-more-infinite-scroll/sandbox.config.json b/examples/svelte/load-more-infinite-scroll/sandbox.config.json
diff --git a/examples/svelte/optimistic-updates-typescript/sandbox.config.json b/examples/svelte/optimistic-updates-typescript/sandbox.config.json
diff --git a/examples/svelte/playground/sandbox.config.json b/examples/svelte/playground/sandbox.config.json
diff --git a/examples/svelte/simple/index.html b/examples/svelte/simple/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width" />
     <title>Vite + Svelte + TS</title>
   </head>
diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "test:types": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
     "@tanstack/svelte-query": "^5.18.1",
diff --git a/examples/svelte/simple/public/favicon.png b/examples/svelte/simple/public/favicon.png
diff --git a/examples/svelte/simple/sandbox.config.json b/examples/svelte/simple/sandbox.config.json
diff --git a/examples/svelte/simple/src/main.ts b/examples/svelte/simple/src/main.ts
@@ -2,7 +2,7 @@ import './app.css'
 import App from './App.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app
diff --git a/examples/svelte/ssr/sandbox.config.json b/examples/svelte/ssr/sandbox.config.json
diff --git a/examples/svelte/star-wars/sandbox.config.json b/examples/svelte/star-wars/sandbox.config.json
diff --git a/nx.json b/nx.json
@@ -4,11 +4,6 @@
     "defaultBase": "main"
   },
   "defaultBase": "main",
-  "pluginsConfig": {
-    "@nrwl/js": {
-      "analyzeSourceFiles": false
-    }
-  },
   "nxCloudAccessToken": "ZDdkNDA4MGEtYjNmYi00MWI4LWE1N2QtYTdlNmYxMGJlZWM2fHJlYWQ=",
   "parallel": 5,
   "namedInputs": {
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
     "preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm",
     "install:csb": "corepack enable && pnpm install --frozen-lockfile",
     "test": "pnpm run test:ci",
-    "test:pr": "nx affected --targets=test:eslint,test:lib,test:types,test:build,build --exclude=examples/**",
-    "test:ci": "nx run-many --targets=test:format,test:sherif,test:eslint,test:lib,test:types,test:build,build --exclude=examples/**",
+    "test:pr": "nx affected --targets=test:eslint,test:lib,test:types,test:build,build",
+    "test:ci": "nx run-many --targets=test:format,test:sherif,test:eslint,test:lib,test:types,test:build,build",
     "test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
     "test:format": "pnpm run prettier --check",
     "test:sherif": "sherif --ignore-package \"./integrations/*\"",

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@tanstack/query-example-react-refetch-interval",`
	`2`	`+ "name": "@tanstack/query-example-react-auto-refetching",`
`3`	`3`	`"private": true,`
`4`	`4`	`"main": "index.js",`
`5`	`5`	`"license": "MIT",`