OrvalでOpenAPIからVue Query向けコードを生成する｜Vue 3実務寄り

※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。

OpenAPI から型安全な API クライアントを生成できるようになると、次に「毎回 onMounted で取得して、ローディングとエラーを手で管理するの、地味に面倒だな」と感じてきました。同じデータを何度も取り直すのも無駄。ここで登場するのが Orval と TanStack Query（Vue Query）の組み合わせです。この記事では、より実務寄りのこの選択肢を整理します。

※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。

Orval＝OpenAPIからフロント寄りのコードを生成するツール
設定と生成
生成されたフックを使う
どちらを選ぶか
もっと体系的に学ぶなら（書籍）
次に読む

Orval＝OpenAPIからフロント寄りのコードを生成するツール

Orval は openapi.yaml から TypeScript の API クライアントを生成するツールです。OpenAPI Generatorと目的は同じですが、Orval はフロントエンド寄りで、TanStack Query（Vue 用は Vue Query）向けのフックまで生成できるのが強みです。

やりたいこと	向いている選択
まず型安全に呼べればいい（入門）	OpenAPI Generator（typescript-axios）
フロント寄り・実務で使いやすく	Orval
キャッシュや再取得も自動でやりたい	Orval ＋ TanStack Query

設定と生成

orval.config.ts に「入力（openapi）」「出力先」「モード（vue-query）」を書きます。

// orval.config.ts
import { defineConfig } from 'orval'

export default defineConfig({
  task: {
    input: './openapi/openapi.yaml',
    output: {
      target: './src/generated/api.ts',
      client: 'vue-query',   // Vue Query 向けフックを生成
    },
  },
})

npm i -D orval
npm i @tanstack/vue-query axios
npx orval

main.ts で Vue Query を有効化しておきます。

// main.ts
import { VueQueryPlugin } from '@tanstack/vue-query'
createApp(App).use(VueQueryPlugin).mount('#app')

生成されたフックを使う

Orval が useListTasks のようなフックを生成してくれるので、画面では呼ぶだけ。ローディング・エラー・データの3状態が最初から用意されています。

<script setup lang="ts">
import { useListTasks } from '@/generated/api'

const { data: tasks, isLoading, isError } = useListTasks()
</script>

<template>
  <p v-if="isLoading">読み込み中...</p>
  <p v-else-if="isError">取得に失敗しました</p>
  <ul v-else>
    <li v-for="t in tasks" :key="t.id">{{ t.title }}</li>
  </ul>
</template>

手書きの onMounted ＋ ref 3つが消えました。さらに TanStack Query は取得済みデータのキャッシュ・自動再取得・重複リクエストの排除を裏でやってくれます。同じ一覧を別画面で開いても、キャッシュがあれば即表示できます。