API Documentation / @pinia/colada / useQuery

Function: useQuery()

Ensures and return a shared query state based on the key option.

Param

The options of the query

Param

a getter or ref that returns the parameters for the _options

Call Signature

function useQuery<TData, TError, TDataInitial>(options): UseQueryReturn<TData, TError, TDataInitial>;

Ensures and return a shared query state based on the key option.

Type Parameters

TData

TData

TError

TError = { custom: Error; }

TDataInitial

TDataInitial = undefined

Parameters

options

The options of the query

UseQueryOptions<TData, TError, TDataInitial> | () => DefineQueryOptions<TData, TError, TDataInitial>

Returns

UseQueryReturn<TData, TError, TDataInitial>

Example

const { state } = useQuery({
  key: ['documents'],
  query: () => getDocuments(),
})

Call Signature

function useQuery<Params, TData, TError, TDataInitial>(setupOptions, paramsGetter): UseQueryReturn<TData, TError, TDataInitial>;

useQuery for dynamic typed query keys. Requires options defined with defineQueryOptions.

Type Parameters

Params

Params

TData

TData

TError

TError

TDataInitial

TDataInitial

Parameters

setupOptions

(params) => DefineQueryOptions<TData, TError, TDataInitial>

options defined with defineQueryOptions

paramsGetter

MaybeRefOrGetter<NoInfer<Params>>

a getter or ref that returns the parameters for the setupOptions

Returns

UseQueryReturn<TData, TError, TDataInitial>

Example

import { defineQueryOptions, useQuery } from '@pinia/colada'

const documentDetailsQuery = defineQueryOptions((id: number ) => ({
  key: ['documents', id],
  query: () => fetchDocument(id),
}))

useQuery(documentDetailsQuery, 4)
useQuery(documentDetailsQuery, () => route.params.id)
useQuery(documentDetailsQuery, () => props.id)