I have successfully implemented a Vue 3 component that utilizes Urql to query a Hasura graphql endpoint. The query is functioning properly, but I am now focused on enhancing the type safety of the component.
My approach involves using graphql Codegen to generate types. However, I am encountering errors in the generated file that need to be addressed.
Although relatively new to Typescript, I am eager to learn and rectify any issues identified in the types file obtained from the code generation process.
In order to seek assistance, I have provided the following:
- A copy of the functional ListTodos.vue component.
- An abbreviated version of the Generated Types file (graphql.d.ts) highlighting errors found in lines 975 - 989 for easier reference.
- A summary of the reported errors.
- The configuration file for my code generator (codegen.js).
Your suggestions and guidance would be highly appreciated.
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. Generated Types (abbreviated) with error indicators https://i.sstatic.net/5wjvT.png
3. Errors
https://i.sstatic.net/DegOo.png
4. Codegen.js configuration file
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,
},
},
},
}