GraphQL 的一大優勢即是其強型別特性。而 TypeScript 同樣強調型別安全，使得代碼更加健壯且易於維護。當這兩者相結合，我們可以擁有更強大、更靈活、且具有型別安全的程式碼。

今天，我們會探討如何在 Vue 專案中，利用 GraphQL Code Generator 來自動產生 GraphQL 的 TypeScript 定義，進而優化我們的開發流程。

文章範例程式碼 GitHub

範例程式碼 GitHub 連結

Day13 開始前分支：feat/day_12/02_implement_blog_list_view
Day13 進度完成分支：feat/day_13/add_graphql-code-generator

認識 GraphQL Code Generator

GraphQL Code Generator | GitHub

GraphQL Code Generator 能夠自動從 GraphQL Schema 生成 TypeScript 型別和相關程式碼。
它將 GraphQL 的強型別特性與 TypeScript 無縫結合，大大減少手動撰寫和維護的需要。透過此工具，開發者能夠提高開發效率，並確保型別的一致性和安全性。

安裝套件

請參考 GraphQL Code Generator 官方安裝教學

編寫設定檔

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  overwrite: true,
  // Day8 IDE 插件自動產生的 schema path, 也可以直接輸入遠端 API 的 url
  schema: './src/graphql/schema.graphql',
  // GraphQL Document 存放的路徑
  documents: ['src/**/*.vue', 'src/graphql/queries/*.ts'],
  emitLegacyCommonJSImports: false,
  generates: {
    'src/graphql/generated/': {
      preset: 'client',
      config: {
        useTypeImports: true,
      },
    },
  },
}

export default config

自動生成型別檔

執行以下命令，就可以在 src/graphql/generated 看到生成的型別檔

pnpm codegen

實戰：重構 GraphQL 查詢

先前，我們直接在 Vue 的單文件組件（SFC）中撰寫 GraphQL 查詢，但從模組化和可讀性的角度來看，這樣的做法其實不太理想。更好的做法是 — 將 GraphQL 查詢搬移到一個專門的資料夾管理。

再結合上一步驟 GraphQL Code Generator 自動產生的 graphql() 函數，還能增強型別的支援，大大提升開發效率和質量。

改寫 src/views/BlogListView.vue

將 GraphQL 查詢移動到 src/graphql/queries/index.ts

import { graphql } from '@/graphql/generated'

export const gqlGetAllPosts = graphql(`
    query getAllPost {
        posts {
            data {
                id
                title
                body
                user {
                    id
                    name
                    email
                }
                comments {
                    data {
                        id
                        name
                        email
                        body
                    }
                }
            }
        }
    }
`)

src/views/BlogListView.vue 的邏輯就變得很簡短了！

<script setup lang="ts">
import { computed } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import { gqlGetAllPosts } from '@/graphql/queries'
import ArticleList from '@/components/articles/ArticleList.vue'
import type { Post } from '@/graphql/generated/graphql'

const { result, loading, error } = useQuery(gqlGetAllPosts)

const posts = computed(() => (result.value?.posts?.data ?? []) as Post[])
</script>

確保 Schema 持續更新

有了自動化工具的幫忙，也要有好習慣才能避免低級錯誤，以下是建議：

• 定期檢查: 為了維護 GraphQL 的效能與正確性，定期檢查你的 Schema 是非常重要的。使用自動化工具可以幫助你監控 Schema 的改動。

• 版本控制: 當 Schema 有所變動時，確保這些變動被紀錄在版本控制系統中，如 Git。這樣可以追蹤 Schema 的變更歷史，並在必要時進行回滾。

Recap

今日學習了 GraphQL 與 TypeScript 的結合優勢，享受型別安全帶來的效率提升。這部分建議讀者親手開發才能感受到型別提示帶來的流暢感與安全感。

明天，我們將使用 GraphQL Variables 進行動態查詢，繼續實作單篇文章詳細頁的內容。敬請期待！