构建时出现 TypeScript 错误，因为我导入提取的 .graphql 文件并且无法解析类型

Posted 2023-03-08

【中文标题】构建时出现 TypeScript 错误，因为我导入提取的 .graphql 文件并且无法解析类型

【英文标题】：TypeScript errors when building because I import extracted .graphql files and the type can't be resolved

【发布时间】：2020-12-23 19:02:38

【问题描述】：

我有以下文件 @/graphql/mutations.graphql 包含：

mutation addCharacterToUser($userId: ID!, $characterId: ID!) 
    addCharacterToUser(userId: $userId, characterId: $characterId) 
        characterIds
    


mutation newCharacter ($name: String!, $age: Int!) 
    newCharacter(character: name: $name, age: $age) 
        id
    

现在我在我的一个 Vue.js 组件中使用它（我将 TypeScript 与 Vue.js 一起使用）。 但是，当我运行 npm run build 时，我收到以下错误：

 error  in C:/Development/Project/src/components/character/CharacterCreationDialog.vue

ERROR in C:/Development/Project/src/components/character/CharacterCreationDialog.vue(59,50):
59:50 Cannot find module '@/graphql/character/mutations.graphql' or its corresponding type declarations.
    57 | <script lang="ts">
    58 | import Vue from 'vue'
  > 59 | import  addCharacterToUser, newCharacter  from '@/graphql/character/mutations.graphql'
       |                                                  ^
    60 | 
    61 | export default Vue.extend(
    62 |   name: 'CharacterCreationDialog',

我研究了一些东西，但我无法真正理解问题所在。我对 TypeScript 的经验很少。

【问题讨论】：

好像要加babel loader才能支持加载gql文件

【参考方案1】：

您的项目工作区中似乎没有安装所需的模块@/graphql/character/mutations.graphql。你能试试看我是否错过了这个模块吗？

检查您在 package.json 中的依赖关系，并确保您可以运行 npm install 而没有错误。

【讨论】：

我应该错过哪个模块？使用vue ui 整个依赖管理有点自动化，所以我没有真正的概述

您可以尝试运行npm list 以查看您的工作区中安装了哪些依赖项/模块，并可能将其通过管道传送到graphql 的grep？使用此代码npm list | grep 'graphql'

graphql/character/mutations.graphql 来自我的项目，它不是已安装的依赖项