--- title: queryOptions --- # {{ $frontmatter.title }} The `queryOptions` method allows you to construct type-safe [Query Options](https://tanstack.com/query/latest/docs/framework/react/guides/query-options). `queryOptions` can be used together with `@tanstack/react-query` APIs that take query options, such as [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery), [useQueries](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries), [usePrefetchQuery](https://tanstack.com/query/latest/docs/framework/react/reference/usePrefetchQuery) and [QueryClient.fetchQuery](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientfetchquery) among many others. If you would like to use a query API that is not explicitly supported by `openapi-react-query`, this is the way to go. ## Examples [useQuery example](use-query#example) rewritten using `queryOptions`. ::: code-group ```tsx [src/app.tsx] import { useQuery } from '@tanstack/react-query'; import { $api } from "./api"; export const App = () => { const { data, error, isLoading } = useQuery( $api.queryOptions("get", "/users/{user_id}", { params: { path: { user_id: 5 }, }, }), ); if (!data || isLoading) return "Loading..."; if (error) return `An error occured: ${error.message}`; return <div>{data.firstname}</div>; }; ``` ```ts [src/api.ts] import createFetchClient from "openapi-fetch"; import createClient from "openapi-react-query"; import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript const fetchClient = createFetchClient<paths>({ baseUrl: "https://myapi.dev/v1/", }); export const $api = createClient(fetchClient); ``` ::: ::: info Good to Know Both [useQuery](use-query) and [useSuspenseQuery](use-suspense-query) use `queryOptions` under the hood. ::: Usage with [useQueries](https://tanstack.com/query/latest/docs/framework/react/reference/useQueries). ::: code-group ```tsx [src/use-users-by-id.ts] import { useQueries } from '@tanstack/react-query'; import { $api } from "./api"; export const useUsersById = (userIds: number[]) => ( useQueries({ queries: userIds.map((userId) => ( $api.queryOptions("get", "/users/{user_id}", { params: { path: { user_id: userId }, }, }) )) }) ); ``` ```ts [src/api.ts] import createFetchClient from "openapi-fetch"; import createClient from "openapi-react-query"; import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript const fetchClient = createFetchClient<paths>({ baseUrl: "https://myapi.dev/v1/", }); export const $api = createClient(fetchClient); ``` ::: ## Api ```tsx const queryOptions = $api.queryOptions(method, path, options, queryOptions); ``` **Arguments** - `method` **(required)** - The HTTP method to use for the request. - The method is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. - `path` **(required)** - The pathname to use for the request. - Must be an available path for the given method in your schema. - The pathname is used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. - `options` - The fetch options to use for the request. - Only required if the OpenApi schema requires parameters. - The options `params` are used as key. See [Query Keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for more information. - `queryOptions` - Additional query options to pass through. **Returns** - [Query Options](https://tanstack.com/query/latest/docs/framework/react/guides/query-options) - Fully typed thus `data` and `error` will be correctly deducted. - `queryKey` is `[method, path, params]`. - `queryFn` is set to a fetcher function.