graphql 查询的 typescript 类型声明错误

Posted

技术标签:

【中文标题】graphql 查询的 typescript 类型声明错误【英文标题】:Error at typescript type declaration of graphql query 【发布时间】:2021-06-30 23:18:43 【问题描述】:

我正在使用 Nuxt.js (Vuex) + Apollo。

现在,我正在努力让 Typescript 进入这个项目,尤其是围绕 Graphql。我读了这个article 并生成了类型文件,但它不起作用。我无法在存储目录中的.ts 文件中导入查询。

生成的类型文件。 (~/graphql/types.d.ts)

declare module '*/activate.gql' 
  import  DocumentNode  from 'graphql'; <- another problem: ts says "error TS2307: Cannot find module 'graphql'"
  const defaultDocument: DocumentNode;
  

  export default defaultDocument;

这是由codegen.yml生成的:

schema: http://localhost:3000/graphql
generates:
  ./graphql/types.d.ts:
    documents: ./graphql/**/*.gql
    plugins:
      - typescript
      - typescript-graphql-files-modules

我无法在商店导入activate 查询。 (~/store/user.ts)

import activate from '~/graphql/mutations/activate.gql'; <- "error TS2307: Cannot find module '~/graphql/mutations/auth/activate.gql'"

根据上面的文档,这将工作......

enter image description here

目录结构在这里。

- graphql
  |- queries
  |- mutations
     |- activate.gql
  |- types.d.ts

- store
  |- user.ts

- codegen.yml

package.json的一部分:


  "dependencies": 
    "@nuxt/types": "^2.15.4",
    "@nuxtjs/apollo": "^4.0.1-rc.3",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/pwa": "^3.2.2",
    "@nuxtjs/sitemap": "^2.4.0",
    "@stripe/stripe-js": "^1.10.0",
    "cookie-universal-nuxt": "^2.1.4",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20",
    "nuxt": "^2.14.0",
    "nuxt-basic-auth-module": "^1.3.3",
    "nuxt-jsonld": "^1.5.0",
    "nuxt-typed-vuex": "^0.1.22",
    "redirect-ssl": "^2.0.0",
    "vee-validate": "^3.4.5",
    "vue": "^2.6.12",
    "vue-infinite-loading": "^2.4.5",
    "vue-lazyload": "^1.3.3",
    "vue-slick": "^1.1.15",
    "vue-template-compiler": "^2.6.12"
  ,
  "devDependencies": 
    "@graphql-codegen/cli": "^1.21.3",
    "@graphql-codegen/typescript": "^1.21.1",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
    "@graphql-codegen/typescript-operations": "^1.17.15",
    "@nuxtjs/google-fonts": "^1.2.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "eslint": "^7.9.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^6.2.2",
    "husky": "^4.3.0",
    "jest": "^26.1.0",
    "lint-staged": "^10.4.0",
    "node-sass": "^4.14.1",
    "prettier": "^2.1.2",
    "sass-loader": "^9.0.3",
    "vue-jest": "^3.0.4"
  ,


如果你能回答我将不胜感激......

【问题讨论】:

您是否安装了graphql 软件包?也许在您的问题中包含您的package.json。您将需要修复声明中的错误。这可能会解决您遇到的第二个错误。 感谢您的评论。我已经在这个项目中安装了graphql,可以在node_modules中找到graphql packege... 【参考方案1】:

我明白了!! 我不确定这个解决方案是不是最好的,但是,通过向global.d.ts 生成查询声明,我可以从任何地方导入查询而不会出错!!

如果你知道更好的解决方案,请告诉我。

codegen.yml:

schema: http://localhost:3000/graphql
generates:
  ./graphql/types.d.ts:
    documents: ./graphql/**/*.gql
    plugins:
      - typescript
  ./global.d.ts:
    documents: ./graphql/**/*.gql
    plugins: 
      - typescript-graphql-files-modules

【讨论】:

以上是关于graphql 查询的 typescript 类型声明错误的主要内容,如果未能解决你的问题,请参考以下文章

GraphQL 查询返回类型的“任何”数据类型

如何为 TypeScript 配置 `*.graphql` 导入?

根据我分配给根节点的类型,从根查询接收类型检查错误。 GraphQL,打字稿。表示

GraphQL:是不是有相当于 TypeScript 的“未知”?

如何使用 Apollo 工具为查询生成 Typescript 类型,包括 Apollo @client 和 @rest 指令?

typescript 中不同 GraphQL 语法的优缺点