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
4. schema:
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. // };
23. module.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. };
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. // };

复制代码

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

搞了半天, 只有语法高亮, 没有定义跳转... 也可能是我太菜了
配置文件加载总是不成功. .js因为es module不能用, .cjs加载不上...
评论区也有吐槽配置不生效的, 不折腾了...

来源:https://www.cnblogs.com/lin-xii/p/vscode-graphql-cha-jian-cai-keng.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！