如何使用 Graphql Codegen 设置类型答案

【问题标题】：How to set up Types with Graphql Codegen如何使用 Graphql Codegen 设置类型
【发布时间】：2022-01-04 22:08:34
【问题描述】：

我有一个使用 Urql 来查询 Hasura graphql 端点的 Vue 3 组件。我已经设法让相当简单的查询正常工作，现在正在尝试使组件类型安全。

我正在使用 graphql Codegen 来构建类型，它正在生成一个 Types 文件，但是生成的文件中出现了错误。

我对 Typescript 有点陌生，所以希望有人能够纠正我。我很想解决生成的 Types 文件中报告的问题。

我提供了以下内容：

工作 ListTodos.vue 组件的副本。
生成的类型文件 (graphql.d.ts) 的缩略副本。错误发生在第 975 - 989 行，因此我只提供了包含相关行的文件的简短版本。
报告的错误副本
我的 codegen.js 配置文件的副本。

欢迎提出任何建议。

1. ListTodos.vue

<script setup lang="ts">
    import { useQuery, gql } from '@urql/vue'

    const FETCH_TODOS = gql`
        query {
            todos {
                title
                user {
                    name
                }
                is_public
            }
        }
    `
    const result = useQuery({ 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>

2。生成的类型（缩写）显示错误下划线

3.错误

4. 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: true,
            },
        },
    },
}

【问题讨论】：

我进步了一点……
在上述配置的末尾添加了“noGraphQLTag: true”（尽管它已被弃用）并且 gql 标签的问题消失了
替换为：export const Document = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","selectionSet": {"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"todos"},"selectionSet":{ "kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind": "Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":" Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name" ,"value":"is_public"}}]}}]}}]} 与 DocumentNode 一样未知；
上述语句抛出以下错误：环境上下文中的“const”初始化程序必须是字符串或数字文字或文字枚举 reference.ts(1254) 以及上面显示的最后 4 个错误

标签： typescript vue.js graphql-codegen urql

【解决方案1】：

好的 - 我似乎已经解决了这个问题。

我从配置中删除了插件“typescript-vue-urql”，这似乎违反直觉，但生成的文件没有问题。

我还为查询添加了一个名称，然后从 Types 文件中导入了这个“名称”，然后键入了 useQuery 函数。

【讨论】：