vscode GraphQL插件踩坑

TLDR

vscode的GraphQL语法插件, 目前比较推荐Graphql Foundation的GraphQL: Language Feature Support
相关配置, 见[GraphQL: Language Feature Support](# GraphQL: Language Feature Support)
配置文件的语法规则, 参考GraphQL Config

背景

之前用的GraphQL插件, 只开启了语法高亮. 自己写的schema没什么问题, 排查问题时, 只能靠搜索, 太难了....

vscode有不少语法提示插件, 但很多不太适用了. 试用了几款, 踩了踩坑...

插件

GraphQL: Language Feature Support

1# graphql.config.yml  //in root directory
2# 使用URL的方式, 只有语法提示, 没有定义跳转
3# schema: http://localhost:5910/graphql
4schema:
5  - ./bff/src/schemas/*.gql
6  - ./bff/src/schemas/**/*.gql
7  - ./bff/src/schemas/**/**/*.gql

需要按照graphql-config的格式, 添加配置文件
有语法提示、支持定义跳转
目前仍在维护
唯一可惜的是, 没有引用查询

有常规的语法提示了, 而且自定义类型也可以提示. 支持定义跳转

vscode-graphql

个人开发者插件, 坚持与否, 全看心情
上一次的发布时间, 在2019年... 验证了第一条
插件代码库 (iemmp.com) 已经丢失了.......
按照quick start配置
- 有高亮, 但是不太符合预期
- 有语法提示
- ~~没有定义跳转~~

整体效果不是很理想, 故放弃

Apollo GraphQL

1// module.exports = {
2//   client: {
3//     service: {
4//       name: "my-service-name",
5//       localSchemaFile: "./src/schemas/*.graphql",
6//     },
7//   },
8// };
9// module.exports = {
10//   client: {
11//     service: {
12//       name: "github",
13//       url: "http://localhost:5910/graphql", 
14//       // optional headers
15//       headers: {
16//         authorization: "Bearer lkjfalkfjadkfjeopknavadf",
17//       },
18//       // optional disable SSL validation check
19//       skipSSLValidation: true,
20//     },
21//   },
22// };
23module.exports = {
24  service: {
25    endpoint: {
26      url: "http://localhost:5910/graphql",
27      headers: {
28        // optional
29        authorization: "Bearer lkjfalkfjadkfjeopknavadf",  
30      },
31      skipSSLValidation: true, // optional, disables SSL validation check
32    },
33  },
34};
35
36// export default {
37//   service: {
38//     endpoint: {
39//       url: "http://localhost:5910/graphql",
40//       headers: {
41//         // optional
42//         authorization: "Bearer lkjfalkfjadkfjeopknavadf",
43//       },
44//       skipSSLValidation: true, // optional, disables SSL validation check
45//     },
46//   },
47// };
48

不支持es module
更新时间还在22年
issue关闭速度相当一般...

搞了半天, 只有语法高亮, 没有定义跳转... 也可能是我太菜了😭

配置文件加载总是不成功. .js因为es module不能用, .cjs加载不上...

评论区也有吐槽配置不生效的, 不折腾了...