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

examples/solid/basic-graphql-request/.eslintrc.cjs

@@ -0,0 +1,6 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {}
+
+module.exports = config

examples/solid/basic-graphql-request/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.yalc
+yalc.lock

examples/solid/basic-graphql-request/README.md

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

examples/solid/basic-graphql-request/index.html

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

examples/solid/basic-graphql-request/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@tanstack/query-example-solid-basic-graphql-request",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/solid-query": "^5.102.8",
+    "@tanstack/solid-query-devtools": "^5.102.8",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
+    "solid-js": "^1.9.7"
+  },
+  "devDependencies": {
+    "typescript": "5.8.3",
+    "vite": "^6.4.1",
+    "vite-plugin-solid": "^2.11.6"
+  }
+}

examples/solid/basic-graphql-request/src/index.tsx

@@ -0,0 +1,176 @@
+/* @refresh reload */
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import { For, Match, Switch, createSignal } from 'solid-js'
+import { render } from 'solid-js/web'
+import { gql, request } from 'graphql-request'
+import type { Accessor, Setter } from 'solid-js'
+
+const endpoint = 'https://graphqlzero.almansi.me/api'
+
+const queryClient = new QueryClient()
+
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
+function App() {
+  const [postId, setPostId] = createSignal(-1)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SolidQueryDevtools />
+      <p>
+        As you visit the posts below, you will notice them in a loading state
+        the first time you load them. However, after you return to this list and
+        click on any posts you have already visited again, you will see them
+        load instantly and background refresh right before your eyes!{' '}
+        <strong>
+          (You may need to throttle your network speed to simulate longer
+          loading sequences)
+        </strong>
+      </p>
+      {postId() > -1 ? (
+        <Post postId={postId()} setPostId={setPostId} />
+      ) : (
+        <Posts setPostId={setPostId} />
+      )}
+    </QueryClientProvider>
+  )
+}
+
+function createPosts() {
+  return useQuery(() => ({
+    queryKey: ['posts'],
+    queryFn: async () => {
+      const {
+        posts: { data },
+      } = await request<{ posts: { data: Array<Post> } }>(
+        endpoint,
+        gql`
+          query {
+            posts {
+              data {
+                id
+                title
+              }
+            }
+          }
+        `,
+      )
+      return data
+    },
+  }))
+}
+
+function Posts(props: { setPostId: Setter<number> }) {
+  const state = createPosts()
+
+  return (
+    <div>
+      <h1>Posts</h1>
+      <div>
+        <Switch>
+          <Match when={state.status === 'pending'}>Loading...</Match>
+          <Match when={state.status === 'error'}>
+            <span>Error: {(state.error as Error).message}</span>
+          </Match>
+          <Match when={state.data !== undefined}>
+            <>
+              <div>
+                <For each={state.data}>
+                  {(post: any) => (
+                    <p>
+                      <a
+                        onClick={() => props.setPostId(post.id)}
+                        href="#"
+                        style={
+                          // We can find the existing query data here to show bold links for
+                          // ones that are cached
+                          queryClient.getQueryData(['post', post.id])
+                            ? {
+                                'font-weight': 'bold',
+                                color: 'green',
+                              }
+                            : {}
+                        }
+                      >
+                        {post.title}
+                      </a>
+                    </p>
+                  )}
+                </For>
+              </div>
+              <div>{state.isFetching ? 'Background Updating...' : ' '}</div>
+            </>
+          </Match>
+        </Switch>
+      </div>
+    </div>
+  )
+}
+
+function createPost(postId: Accessor<number>) {
+  return useQuery(() => ({
+    queryKey: ['post', postId()],
+    queryFn: async () => {
+      const { post } = await request<{ post: Post }>(
+        endpoint,
+        gql`
+        query {
+          post(id: ${postId()}) {
+            id
+            title
+            body
+          }
+        }
+        `,
+      )
+
+      return post
+    },
+    enabled: !!postId(),
+  }))
+}
+
+function Post(props: { postId: number; setPostId: Setter<number> }) {
+  const state = createPost(() => props.postId)
+
+  return (
+    <div>
+      <div>
+        <a onClick={() => props.setPostId(-1)} href="#">
+          Back
+        </a>
+      </div>
+      <Switch>
+        <Match when={!props.postId || state.status === 'pending'}>
+          Loading...
+        </Match>
+        <Match when={state.status === 'error'}>
+          <span>Error: {(state.error as Error).message}</span>
+        </Match>
+        <Match when={state.data !== undefined}>
+          <>
+            <h1>{state.data?.title}</h1>
+            <div>
+              <p>{state.data?.body}</p>
+            </div>
+            <div>{state.isFetching ? 'Background Updating...' : ' '}</div>
+          </>
+        </Match>
+      </Switch>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+if (!root) throw new Error('Missing #root element')
+
+render(() => <App />, root)

examples/solid/basic-graphql-request/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

examples/solid/basic-graphql-request/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})