Appearance

useQuery ​

The useQuery method allows you to use the original useQuery.

  • The result is the same as the original function.
  • The functionKey is [method, path, params].
  • data and error are fully typed.
  • You can pass queries options as fourth parameter.

TIP

You can find more information about useQuery on the @tanstack/vue-query documentation.

Example ​

vue
<script setup lang="ts">
import { $api } from "./api";

const { data, error, isLoading } = $api.useQuery("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>
ts
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 ​

ts
const query = $api.useQuery(method, path, options, queryOptions, queryClient);

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
  • queryClient