在IntelliJ中,使Gatsby的GraphQL模式识别,并使查询自动补全生效
本帖将介绍如何在IntelliJ IDE中让Gatsby的GraphQL模式被识别,并实现JS代码上的GraphQL查询自动补全功能。
方式
在电脑上安装IDW的JS GraphQL。
首先,您需要在IDE中安装JS GraphQL插件。
打开「偏好设置」→「插件」→「市场」,搜索「GraphQL」,然后安装JS GraphQL。

我会重新启动IDE。
启动Gatsby开发服务器
在终端上启动 Gatsby 开发服务器,并等待 GraphQL 的端点 http://localhost:8000/___graphql 出现。
gatsby develop

创建GraphQL配置文件
在项目根目录上右键点击,然后选择「新建」→ 「GraphQL 配置文件」。

创建一个名为.graphqlconfig的文件,将其内容设置为以下内容:
{
"name": "Gatsby Schema",
"schemaPath": "gatsby.graphql",
"extensions": {
"endpoints": {
"Gatsby GraphQL Endpoint": {
"url": "http://localhost:8000/___graphql",
"headers": {
"user-agent": "JS GraphQL"
},
"introspect": false
}
}
}
}
生成Gatsby的GraphQL模式文件
当打开.graphqlconfig文件时,在编辑器的第7行上会显示执行按钮(▶),然后点击该按钮。

执行此操作时,将会生成一个名为gatsby.graphql的GraphQL模式文件。

从上面可以看出,在IDE中识别了Gatsby的GraphQL模式,并且可以自动补全查询。
尝试补完
在GraphQL的字符串中,按下Ctrl + Space会自动补全字段等内容。

结束
这里介绍的使用方法的示例项目在GitHub上可找到。
在IntelliJ-GraphQL中的suin/gatsby-playground。
非常感谢你阅读到最后。在Twitter上,我会发布一些没有在Qiita上写的技术话题等内容,如果你能关注我,我会很高兴的→ Twitter@suin
不仅支持IntelliJ IDE,还支持WebStorm,IntelliJ IDEA,Android Studio,RubyMine,PhpStorm以及PyCharm。