快速开始

1import {2  QueryClient,3  QueryClientProvider,4  useQuery,5} from '@tanstack/solid-query'6import { Switch, Match, For } from 'solid-js'7 8const queryClient = new QueryClient()9 10function Example() {11  const query = useQuery(() => ({12    queryKey: ['todos'],13    queryFn: fetchTodos,14  }))15 16  return (17    <div>18      <Switch>19        <Match when={query.isPending}>20          <p>Loading...</p>21        </Match>22        <Match when={query.isError}>23          <p>Error: {query.error.message}</p>24        </Match>25        <Match when={query.isSuccess}>26          <For each={query.data}>{(todo) => <p>{todo.title}</p>}</For>27        </Match>28      </Switch>29    </div>30  )31}32 33function App() {34  return (35    <QueryClientProvider client={queryClient}>36      <Example />37    </QueryClientProvider>38  )39}

1// ❌ react version2useQuery({3  queryKey: ['todos', todo],4  queryFn: fetchTodos,5})6 7// ✅ solid version8useQuery(() => ({9  queryKey: ['todos', todo],10  queryFn: fetchTodos,11}))

1import { For, Suspense } from 'solid-js'2 3function Example() {4  const query = useQuery(() => ({5    queryKey: ['todos'],6    queryFn: fetchTodos,7  }))8  return (9    <div>10      {/* ✅ Will trigger loading fallback, data accessed in a suspense boundary. */}11      <Suspense fallback={'Loading...'}>12        <For each={query.data}>{(todo) => <div>{todo.title}</div>}</For>13      </Suspense>14      {/* ❌ Will not trigger loading fallback, data not accessed in a suspense boundary. */}15      <For each={query.data}>{(todo) => <div>{todo.title}</div>}</For>16    </div>17  )18}

1import {2  QueryClient,3  QueryClientProvider,4  useQuery,5} from '@tanstack/solid-query'6import { Match, Switch } from 'solid-js'7 8const queryClient = new QueryClient()9 10export default function App() {11  return (12    <QueryClientProvider client={queryClient}>13      <Example />14    </QueryClientProvider>15  )16}17 18function Example() {19  // ❌ react version -- supports destructing outside reactive context20  // const { isPending, error, data } = useQuery({21  //   queryKey: ['repoData'],22  //   queryFn: () =>23  //     fetch('https://api.github.com/repos/TanStack/query').then(24  //       (res) => res.json()25  //     ),26  // })27 28  // ✅ solid version -- does not support destructuring outside reactive context29  const query = useQuery(() => ({30    queryKey: ['repoData'],31    queryFn: () =>32      fetch('https://api.github.com/repos/TanStack/query').then((res) =>33        res.json(),34      ),35  }))36 37  // ✅ access query properties in JSX reactive context38  return (39    <Switch>40      <Match when={query.isPending}>Loading...</Match>41      <Match when={query.isError}>Error: {query.error.message}</Match>42      <Match when={query.isSuccess}>43        <div>44          <h1>{query.data.name}</h1>45          <p>{query.data.description}</p>46          <strong>👀 {query.data.subscribers_count}</strong>{' '}47          <strong>✨ {query.data.stargazers_count}</strong>{' '}48          <strong>🍴 {query.data.forks_count}</strong>49        </div>50      </Match>51    </Switch>52  )53}

1import {2  QueryClient,3  QueryClientProvider,4  useQuery,5} from '@tanstack/solid-query'6import { createSignal, For } from 'solid-js'7 8const queryClient = new QueryClient()9 10function Example() {11  const [enabled, setEnabled] = createSignal(false)12  const [todo, setTodo] = createSignal(0)13 14  // ✅ passing a signal directly is safe and observers update15  // automatically when the value of a signal changes16  const todosQuery = useQuery(() => ({17    queryKey: ['todos'],18    queryFn: fetchTodos,19    enabled: enabled(),20  }))21 22  const todoDetailsQuery = useQuery(() => ({23    queryKey: ['todo', todo()],24    queryFn: fetchTodo,25    enabled: todo() > 0,26  }))27 28  return (29    <div>30      <Switch>31        <Match when={todosQuery.isPending}>32          <p>Loading...</p>33        </Match>34        <Match when={todosQuery.isError}>35          <p>Error: {todosQuery.error.message}</p>36        </Match>37        <Match when={todosQuery.isSuccess}>38          <For each={todosQuery.data}>39            {(todo) => (40              <button onClick={() => setTodo(todo.id)}>{todo.title}</button>41            )}42          </For>43        </Match>44      </Switch>45      <button onClick={() => setEnabled(!enabled())}>Toggle enabled</button>46    </div>47  )48}49 50function App() {51  return (52    <QueryClientProvider client={queryClient}>53      <Example />54    </QueryClientProvider>55  )56}