---
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.