upstream-tanstack-query/docs/framework/solid/reference/functions/queryOptions.md

id, title, redirect_from

id	title	redirect_from
queryOptions	queryOptions	framework/solid/reference/queryOptions

Call Signature

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;

Defined in: packages/solid-query/src/queryOptions.ts:89

You can generally pass everything to queryOptions that you can also pass to useQuery. These options can be shared across hooks and imperative APIs such as queryClient.query. options.queryKey is required and is the query key to generate options for.

This overload is selected when initialData is set, so the resulting data is never undefined.

Type Parameters

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters

options

QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object

The DefinedInitialDataOptions to use — everything you can pass to useQuery, with initialData set.

Returns

QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>

The same options object, typed so that queryKey carries the inferred data type.

See

useQuery to run a query with these options.

Example

import { For } from 'solid-js'
import { queryOptions, useQuery } from '@tanstack/solid-query'

const postsOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  initialData: [],
})

function Posts() {
  // `postsQuery.data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
  // so the list stays visible alongside the error.
  const postsQuery = useQuery(() => postsOptions)

  return (
    <div>
      {postsQuery.isError ? <span>Error: {postsQuery.error.message}</span> : null}
      <ul>
        <For each={postsQuery.data}>{(post) => <li>{post.title}</li>}</For>
      </ul>
    </div>
  )
}

Call Signature

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;

Defined in: packages/solid-query/src/queryOptions.ts:139

You can generally pass everything to queryOptions that you can also pass to useQuery. These options can be shared across hooks and imperative APIs such as queryClient.query. options.queryKey is required and is the query key to generate options for.

Type Parameters

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters

options

QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object

The UndefinedInitialDataOptions to use — everything you can pass to useQuery.

Returns

QueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>

The same options object, typed so that queryKey carries the inferred data type.

See

useQuery to run a query with these options.

Example

A parameterized factory, so the same options object can be reused per id:

import { Match, Switch } from 'solid-js'
import { queryOptions, useQuery } from '@tanstack/solid-query'

const postOptions = (id: string) =>
  queryOptions({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })

function Post(props: { id: string }) {
  const postQuery = useQuery(() => postOptions(props.id))

  return (
    <Switch>
      <Match when={postQuery.isPending}>Loading...</Match>
      <Match when={postQuery.isError}>Error: {postQuery.error.message}</Match>
      <Match when={postQuery.isSuccess}>
        <h1>{postQuery.data.title}</h1>
      </Match>
    </Switch>
  )
}