Блог

У меня есть компонент Vue 3, использующий Urql для запроса конечной точки Hasura graphql. Мне удалось заставить работать довольно простой запрос, и теперь я пытаюсь сделать тип компонента безопасным.

Я использую кодовый код graphql для создания типов, и он генерирует файл типов, но в результирующем сгенерированном файле возникают ошибки.

Я немного новичок в машинописи, поэтому надеюсь, что кто-нибудь сможет меня исправить. Я стремлюсь решить проблемы, о которых сообщается в сгенерированном файле типов.

Я предоставил следующее:

1. Копия рабочего компонента ListTodos.vue.
2. Исправленная копия сгенерированного файла типов (graphql.d.ts). Ошибка возникает в строках 975-989, поэтому я предоставил короткую версию файла только с соответствующими строками.
3. Копия сообщенных ошибок
4. Копия моей codegen.js файл конфигурации.

Любые предложения приветствуются.

1. ListTodos.vue

 lt;script setup lang="ts"gt;  import { useQuery, gql } from '@urql/vue'   const FETCH_TODOS = gql`  query {  todos {  title  user {  name  }  is_public  }  }  `  const result = useQuery({ query: FETCH_TODOS }) lt;/scriptgt;  lt;templategt;  lt;div v-if="result.fetching.value"gt;Loading..lt;/divgt;  lt;div v-else-if="result.error.value"gt;{{ result.error.value }}lt;/divgt;  lt;div v-elsegt;  lt;ulgt;  lt;li v-for="todo of result.data.value.todos"gt;  lt;h4gt;{{ todo.title }}lt;/h4gt;  lt;pgt;{{ todo.user.name }}lt;/pgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/templategt;  

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

Хорошо, кажется, я решил проблему.

Я удалил плагин «typescript-vue-urql» из конфигурации, который кажется интуитивно понятным, но сгенерированный файл тогда не имел проблем.

Я также добавил имя для запроса, затем импортировал это «имя» из файла типов, а затем ввел функцию useQuery.