如何配置GraphQL Codegen为Vue3+Urql+Hasura项目生成类型并解决报错

1. 修正GraphQL Codegen配置 #

绝大多数声明文件报错是因为Vue项目默认开启了isolatedModules编译选项，该选项不允许在声明文件中使用const enum，直接修改codegen.js配置即可解决：

module.exports = {
    overwrite: true,
    generates: {
        './src/generated/graphql.d.ts': {
            schema: [
                {
                    'https://sample-backend-for-hasura-tutorial.hasura.app/v1/graphql': {
                        headers: {
                            'x-hasura-role': 'admin',
                            'x-hasura-admin-secret': 'secret',
                        },
                    },
                },
            ],
            documents: ['./src/**/*.vue'],
            plugins: ['typescript', 'typescript-operations', 'typescript-vue-urql'],
            config: {
                preResolveTypes: true,
                skipTypename: false,
                enumsAsTypes: true,
                constEnums: false, // 把原配置的true改为false
                useTypeImports: true // 新增该配置，自动使用import type导入类型，避免冗余导入报错
            },
        },
    },
}

2. 调整TypeScript配置 #

确保tsconfig.json的include字段包含生成的类型文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

3. 组件中使用生成的类型获得类型安全 #

重新运行codegen生成无错的类型文件后，给查询语句命名、引入对应生成的类型传入useQuery泛型即可：

<script setup lang="ts">
    import { useQuery, gql } from '@urql/vue'
    // 引入生成的查询类型
    import type { FetchTodosQuery } from './generated/graphql'

    const FETCH_TODOS = gql`
        query FetchTodos { // 给查询命名，codegen会自动生成对应名称的类型
            todos {
                title
                user {
                    name
                }
                is_public
            }
        }
    `
    // 传入泛型获得类型安全的返回结果
    const result = useQuery<FetchTodosQuery>({ query: FETCH_TODOS })
</script>

<template>
    <div v-if="result.fetching.value">Loading..</div>
    <div v-else-if="result.error.value">{{ result.error.value }}</div>
    <div v-else>
        <ul>
            <li v-for="todo of result.data.value.todos">
                <h4>{{ todo.title }}</h4>
                <p>{{ todo.user.name }}</p>
            </li>
        </ul>
    </div>
</template>

4. 可选：依赖版本校验 #

如果修改配置后仍有报错，升级所有codegen相关依赖到最新版本即可：

npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-vue-urql

内容的提问来源于stack exchange，提问作者maxweld