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

* Update Nx config

* Make nextjs examples work

* Fix 2 more next examples

* Fix solid and svelte examples

* Fix react prefetching example

* Fix svelte type

Author: lachlancollins

.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:

.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:

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

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

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",

examples/react/infinite-query-with-max-pages/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/load-more-infinite-scroll/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/nextjs/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/optimistic-updates-cache/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/optimistic-updates-ui/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/pagination/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

examples/react/prefetching/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

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>
+  )
+}

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)

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()],
 })

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()],
 })

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()],
 })

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()],
 })

examples/svelte/auto-refetching/sandbox.config.json

@@ -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>

examples/svelte/basic/sandbox.config.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",

examples/svelte/load-more-infinite-scroll/sandbox.config.json

@@ -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

examples/svelte/optimistic-updates-typescript/sandbox.config.json

@@ -4,11 +4,6 @@
     "defaultBase": "main"
   },
   "defaultBase": "main",
-  "pluginsConfig": {
-    "@nrwl/js": {
-      "analyzeSourceFiles": false
-    }
-  },
   "nxCloudAccessToken": "ZDdkNDA4MGEtYjNmYi00MWI4LWE1N2QtYTdlNmYxMGJlZWM2fHJlYWQ=",
   "parallel": 5,
   "namedInputs": {

examples/svelte/playground/sandbox.config.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/*\"",