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

# graphql.config.yml  //in root directory
# 使用URL的方式, 只有語法提示, 沒有定義跳轉
# schema: http://localhost:5910/graphql
schema:
  - ./bff/src/schemas/*.gql
  - ./bff/src/schemas/**/*.gql
  - ./bff/src/schemas/**/**/*.gql

• 需要按照graphql-config的格式, 添加配置文件
• 有語法提示、支持定義跳轉
• 目前仍在維護
• 唯一可惜的是, 沒有引用查詢

有常規的語法提示了, 而且自定義類型也可以提示. 支持定義跳轉

vscode-graphql

• 個人開發者插件, 堅持與否, 全看心情
• 上一次的發佈時間, 在2019年... 驗證了第一條
• 插件代碼庫 (iemmp.com) 已經丟失了.......
• 按照quick start配置
  • 有高亮, 但是不太符合預期
  • 有語法提示
  • 沒有定義跳轉

整體效果不是很理想, 故放棄

Apollo GraphQL

// module.exports = {
//   client: {
//     service: {
//       name: "my-service-name",
//       localSchemaFile: "./src/schemas/*.graphql",
//     },
//   },
// };
// module.exports = {
//   client: {
//     service: {
//       name: "github",
//       url: "http://localhost:5910/graphql", 
//       // optional headers
//       headers: {
//         authorization: "Bearer lkjfalkfjadkfjeopknavadf",
//       },
//       // optional disable SSL validation check
//       skipSSLValidation: true,
//     },
//   },
// };
module.exports = {
  service: {
    endpoint: {
      url: "http://localhost:5910/graphql",
      headers: {
        // optional
        authorization: "Bearer lkjfalkfjadkfjeopknavadf",  
      },
      skipSSLValidation: true, // optional, disables SSL validation check
    },
  },
};

// export default {
//   service: {
//     endpoint: {
//       url: "http://localhost:5910/graphql",
//       headers: {
//         // optional
//         authorization: "Bearer lkjfalkfjadkfjeopknavadf",
//       },
//       skipSSLValidation: true, // optional, disables SSL validation check
//     },
//   },
// };

• 不支持es module
• 更新時間還在22年
• issue關閉速度相當一般...

搞了半天, 只有語法高亮, 沒有定義跳轉... 也可能是我太菜了

配置文件載入總是不成功. .js因為es module不能用, .cjs載入不上...

評論區也有吐槽配置不生效的, 不折騰了...

本文來自博客園，作者：林十二XII

轉載請註明原文鏈接：https://www.cnblogs.com/lin-xii/p/vscode-graphql-cha-jian-cai-keng.html