graphql / vscode-graphql

MIGRATED: VSCode GraphQL extension (autocompletion, go-to definition, syntax highlighting)
https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql
MIT License
557 stars 71 forks source link

Implementation details required #144

Closed ScreamZ closed 4 years ago

ScreamZ commented 4 years ago

Hello,

I'm trying to make a good integration for my React GraphQL project.

I was using GraphQL code Generator at first but I switched to GraphQL config because i can also generate code using it.

Context

I'm using three separated project (2 frontend: 1 mobile app using React Native and one web app using ReactJS. 1 backend using apollo server).

I'm trying to get types / import completion in the frontend apps, also validate schema against remote schema.

Issues / Success

✅ I'm able to

⛔️ I'm not able to

Specifications

My folder structure with the .gql file

Screenshot 2019-11-30 at 10 10 20
VSCODE Version: 1.40.2
Commit: f359dd69833dd8800b54d458f6d37ab7c78df520
Date: 2019-11-25T14:52:45.129Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.0.0 (MACOS catalina 10.15.1 (19B88))
"dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@next/bundle-analyzer": "^9.1.4",
    "apollo-boost": "^0.4.4",
    "date-fns": "^2.8.1",
    "graphql": "^14.5.8",
    "i18next": "^19.0.1",
    "i18next-browser-languagedetector": "^4.0.1",
    "next": "9.1.4",
    "next-compose-plugins": "^2.2.0",
    "next-plugin-graphql": "^0.0.2",
    "next-with-apollo": "^4.3.0",
    "react": "16.12.0",
    "react-cookie-consent": "^2.5.0",
    "react-dom": "16.12.0",
    "react-i18next": "^11.2.3"
  },
  "devDependencies": {
    "@graphql-codegen/typescript": "canary",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.9.1",
    "@graphql-codegen/typescript-operations": "^1.9.1",
    "@test-graphql-cli/codegen": "canary",
    "@test-graphql-cli/coverage": "canary",
    "@test-graphql-cli/validate": "canary",
    "@types/node": "^12.12.14",
    "@types/react": "^16.9.13",
    "graphql-cli": "canary",
    "husky": "^3.1.0",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
    "tslint": "^5.20.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.1.0",
    "tslint-react-hooks": "^2.2.1",
    "typescript": "^3.7.2"
  },

Logs Of TS Server || GraphQL Language Service

GraphQL server I had nothing before switching to rc instead of config. But I had no completion before too…

Caught the error Error: Request initialize failed with message: ".graphqlconfig" file is not available in the provided config directory: /Users/ahanss/js-dev/perso/jymiz-renew/staff.jymiz.com
Please check the config directory.
[Info  - 10:00:45 GMT+0100 (Central European Standard Time)] Using tsserver from: /Users/screamz/js-dev/perso/site-renew/staff.site.com/node_modules/typescript/lib
[Info  - 10:00:45 GMT+0100 (Central European Standard Time)] <syntax> Forking...

Thanks

acao commented 4 years ago

your first issue has been addressed, however there is no plan to continue supporting #import syntax in graphql as I understand, as that is not spec, and this is soon to become the official GraphQL extension.

you should find a lot of features are working across the workspace, including fragment completion, as long as you use documents to include them in the new graphql config@3 pattern