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 类型声明错误的主要内容,如果未能解决你的问题,请参考以下文章
如何为 TypeScript 配置 `*.graphql` 导入?
根据我分配给根节点的类型,从根查询接收类型检查错误。 GraphQL,打字稿。表示
GraphQL:是不是有相当于 TypeScript 的“未知”?
如何使用 Apollo 工具为查询生成 Typescript 类型,包括 Apollo @client 和 @rest 指令?