query-options.md

title
queryOptions

{{ $frontmatter.title }}

The queryOptions method allows you to construct type-safe Query Options.

queryOptions can be used together with @tanstack/vue-query APIs that take query options, such as useQuery, useQueries and QueryClient.fetchQuery among many others.

If you would like to use a query API that is not explicitly supported by openapi-vue-query, this is the way to go.

Examples

useQuery example rewritten using queryOptions.

::: code-group

<script setup lang="ts">
import { useQuery } from "@tanstack/vue-query";
import { $api } from "./api";

const { data, error, isLoading } = useQuery(
  $api.queryOptions("get", "/users/{user_id}", {
    params: {
      path: { user_id: 5 },
    },
  }),
);
</script>

<template>
  <div>
    <template v-if="!data || isLoading">
      Loading...
    </template>
    <template v-else-if="error">
      An error occured: {{ error.message }}
    </template>
    <template v-else>
      {{ data.firstname }}
    </template>
  </div>
</template>

import createFetchClient from "openapi-fetch";
import createClient from "openapi-vue-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

useQuery uses queryOptions under the hood.

:::

Usage with useQueries.

::: code-group

import { useQueries } from '@tanstack/vue-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 },
        },
      })
    ))
  })
);

import createFetchClient from "openapi-fetch";
import createClient from "openapi-vue-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

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 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 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 for more information.
• queryOptions
  • Additional query options to pass through.

Returns

• Query Options
  • Fully typed thus data and error will be correctly deducted.
  • queryKey is [method, path, params].
  • queryFn is set to a fetcher function.