📄 tanstack/query/v5/docs/framework/solid/reference/useQuery

File: useQuery.md | Updated: 11/15/2025

Source: https://tanstack.com/query/v5/docs/framework/solid/reference/useQuery



TanStack

Query v5v5

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Solid logo

Solid

Version

v5

Search...

+ K

Menu

Getting Started

Guides & Concepts

API Reference

ESLint

Examples

Plugins

Framework

Solid logo

Solid

Version

v5

Menu

Getting Started

Guides & Concepts

API Reference

ESLint

Examples

Plugins

On this page

useQuery

Copy Markdown

tsx

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  () => ({
    queryKey,
    queryFn,
    enabled,
    select,
    placeholderData,
    deferStream,
    reconcile,
    gcTime,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    staleTime,
    throwOnError,
  }),
  () => queryClient,
)


const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  () => ({
    queryKey,
    queryFn,
    enabled,
    select,
    placeholderData,
    deferStream,
    reconcile,
    gcTime,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    staleTime,
    throwOnError,
  }),
  () => queryClient,
)

Usage example
-------------

Here are some examples of how to use the useQuery primitive in Solid Query.

### Basic

The most basic usage of useQuery is to create a query that fetches data from an API.

tsx

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}


import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

### Reactive Options

The reason why useQuery accepts a function that returns an object is to allow for reactive options. This is useful when query options depend on other values/signals that might change over time. Solid Query can track the passed function in a reactive scope and re-run it whenever the dependencies change.

tsx

import { useQuery } from '@tanstack/solid-query'

function App() {
  const [filter, setFilter] = createSignal('all')

  const todos = useQuery(() => ({
    queryKey: ['todos', filter()],
    queryFn: async () => {
      const response = await fetch(`/api/todos?filter=${filter()}`)
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <div>
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
      </div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}


import { useQuery } from '@tanstack/solid-query'

function App() {
  const [filter, setFilter] = createSignal('all')

  const todos = useQuery(() => ({
    queryKey: ['todos', filter()],
    queryFn: async () => {
      const response = await fetch(`/api/todos?filter=${filter()}`)
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
  }))

  return (
    <div>
      <div>
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('active')}>Active</button>
        <button onClick={() => setFilter('completed')}>Completed</button>
      </div>
      <Show when={todos.isError}>
        <div>Error: {todos.error.message}</div>
      </Show>
      <Show when={todos.isLoading}>
        <div>Loading...</div>
      </Show>
      <Show when={todos.isSuccess}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Show>
    </div>
  )
}

### Usage with Suspense

useQuery supports triggering SolidJS Suspense and ErrorBoundary components when the query is in a pending or error state. This allows you to easily handle loading and error states in your components.

tsx

import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
    throwOnError: true,
  }))

  return (
    <ErrorBoundary fallback={<div>Error: {todos.error.message}</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}


import { useQuery } from '@tanstack/solid-query'

function App() {
  const todos = useQuery(() => ({
    queryKey: 'todos',
    queryFn: async () => {
      const response = await fetch('/api/todos')
      if (!response.ok) {
        throw new Error('Failed to fetch todos')
      }
      return response.json()
    },
    throwOnError: true,
  }))

  return (
    <ErrorBoundary fallback={<div>Error: {todos.error.message}</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          <div>Todos:</div>
          <ul>
            <For each={todos.data}>{(todo) => <li>{todo.title}</li>}</For>
          </ul>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}

useQuery Parameters
-------------------

useQuery Return Value - Store<QueryResult<TData, TError>>
---------------------------------------------------------

useQuery returns a SolidJS store with the following properties:

  • ##### status: QueryStatus
    • Will be:
      • pending if there's no cached data and no query attempt was finished yet.
      • error if the query attempt resulted in an error. The corresponding error property has the error received from the attempted fetch
      • success if the query has received a response with no errors and is ready to display its data. The corresponding data property on the query is the data received from the successful fetch or if the query's enabled property is set to false and has not been fetched yet data is the first initialData supplied to the query on initialization.
  • ##### isPending: boolean
    • A derived boolean from the status variable above, provided for convenience.
  • ##### isSuccess: boolean
    • A derived boolean from the status variable above, provided for convenience.
  • ##### isError: boolean
    • A derived boolean from the status variable above, provided for convenience.
  • ##### isLoadingError: boolean
    • Will be true if the query failed while fetching for the first time.
  • ##### isRefetchError: boolean
    • Will be true if the query failed while refetching.
  • ##### data: Resource<TData>
    • Defaults to undefined.
    • The last successfully resolved data for the query.
    • Important: The data property is a SolidJS resource. This means that if the data is accessed underneath a <Suspense> component, it will trigger the Suspense boundary if the data is not available yet.
  • ##### dataUpdatedAt: number
    • The timestamp for when the query most recently returned the status as "success".
  • ##### error: null | TError
    • Defaults to null
    • The error object for the query, if an error was thrown.
  • ##### errorUpdatedAt: number
    • The timestamp for when the query most recently returned the status as "error".
  • ##### isStale: boolean
    • Will be true if the data in the cache is invalidated or if the data is older than the given staleTime.
  • ##### isPlaceholderData: boolean
    • Will be true if the data shown is the placeholder data.
  • ##### isFetched: boolean
    • Will be true if the query has been fetched.
  • ##### isFetchedAfterMount: boolean
    • Will be true if the query has been fetched after the component mounted.
    • This property can be used to not show any previously cached data.
  • ##### fetchStatus: FetchStatus
    • fetching: Is true whenever the queryFn is executing, which includes initial pending as well as background refetches.
    • paused: The query wanted to fetch, but has been paused.
    • idle: The query is not fetching.
    • see Network Mode for more information.
  • ##### isFetching: boolean
    • A derived boolean from the fetchStatus variable above, provided for convenience.
  • ##### isPaused: boolean
    • A derived boolean from the fetchStatus variable above, provided for convenience.
  • ##### isRefetching: boolean
    • Is true whenever a background refetch is in-flight, which does not include initial pending
    • Is the same as isFetching && !isPending
  • ##### isLoading: boolean
    • Is true whenever the first fetch for a query is in-flight
    • Is the same as isFetching && isPending
  • ##### isInitialLoading: boolean
    • deprecated
    • An alias for isLoading, will be removed in the next major version.
  • ##### failureCount: number
    • The failure count for the query.
    • Incremented every time the query fails.
    • Reset to 0 when the query succeeds.
  • ##### failureReason: null | TError
    • The failure reason for the query retry.
    • Reset to null when the query succeeds.
  • ##### errorUpdateCount: number
    • The sum of all errors.
  • ##### refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>
    • A function to manually refetch the query.
    • If the query errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true option
    • cancelRefetch?: boolean
      • Defaults to true
        • Per default, a currently running request will be cancelled before a new request is made
      • When set to false, no refetch will be made if there is already a request running.

Edit on GitHub

timeoutManager

useQueries

Partners Become a Partner

Code RabbitCode Rabbit CloudflareCloudflare AG GridAG Grid NetlifyNetlify NeonNeon WorkOSWorkOS ClerkClerk ConvexConvex ElectricElectric SentrySentry PrismaPrisma StrapiStrapi UnkeyUnkey

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics