Error at typescript type declaration of graphql query

Question

I'm using Nuxt.js (Vuex) + Apollo.

Now, I'm working hard to get Typescript into this project, especially around Graphql. I read this article and generate type file but it does not work. I cannot import query at .ts file in store directory.

generated type file. (~/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;
}

this is generated by codegen.yml:

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

I cannot import activate query at store. (~/store/user.ts)

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

According to the above document, this will work...

enter image description here

Directory structure is here.

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

- store
  |- user.ts

- codegen.yml

Part of 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"
  },
}

I would greatly appreciate it if you could answer...

Do you have the graphql package installed? Maybe include your package.json in your question. You will need to fix the error in your declaration. This will probably solve the second error you get. — Florian Pallas
– Florian Pallas, Commented Apr 5, 2021 at 10:31
Thank you for comment. I have already installed graphql in this project and can find graphql packege in node_modules... — kjj455
– kjj455, Commented Apr 6, 2021 at 6:06

kjj455 · Accepted Answer · 2021-04-06 06:43:09Z

2

I got it!! I'm not sure about this solution is best, but, by generating declaration of queries to global.d.ts, I can import queries from anywhere without errors!!

If you know better solution, please imform me.

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

answered Apr 6, 2021 at 6:43

kjj455

611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error at typescript type declaration of graphql query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related