如何使用 Graphql Codegen 设置类型

Question

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

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

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

我提供了以下内容：

工作 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,
            },
        },
    },
}

Answer 1

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

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

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

如何使用 Graphql Codegen 设置类型

How to set up Types with Graphql Codegen

typescript

vue.js

urql

graphql-codegen