问题描述
我正在使用 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'"
根据上面的文档,这将起作用...
目录结构在这里。
- 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"
},}
如果您能回答我将不胜感激...
解决方法
我明白了!!
我不确定这个解决方案是最好的,但是,通过为 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