1.目的
让你舒服的在webstorm js文件中写graphql query查询
-
graphql语法支持
- 智能提示schema
- 直接在webstorm预览query结果
2.安装
1.插件安装
preference=》plugins=》Browse Repositories =》搜索 js Graphql =》 install =》重启webstorm
image.png
ps:还要安装nodejs插件
image.png
- 配置文件
在package.json同级目录下 建立 graphql.config.json,具体使用参照https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/blob/master/resources/META-INF/graphql.config.json
分为了schema获取地址，和你想在webstorm中直接发请求的endpoint地址
我的配置文件
{
"README_schema" : "Specifies how to load the GraphQL schema that completion, error highlighting, and documentation is based on in the IDE",
"schema": {
"README_file" : "Remove 'file' to use request url below. A relative or absolute path to the JSON from a schema introspection query, e.g. '{ data: ... }' or a .graphql/.graphqls file describing the schema using GraphQL Schema Language. Changes to the file are watched.",
"README_request" : "To request the schema from a url instead, remove the 'file' JSON property above (and optionally delete the default graphql.schema.json file).",
"request": {
"url" : "http://domain/graphql",
"method" : "POST",
"README_postIntrospectionQuery" : "Whether to POST an introspectionQuery to the url. If the url always returns the schema JSON, set to false and consider using GET",
"postIntrospectionQuery" : true,
"README_options" : "See the 'Options' section at https://github.com/then/then-request",
"options" : {
"headers": {
"user-agent" : "JS GraphQL"
}
}
}
},
"README_endpoints": "A list of GraphQL endpoints that can be queried from '.graphql' files in the IDE",
"endpoints" : [
{
"name": "Default (http://domain/graphql)",
"url": "http://domain/graphql",
"options" : {
"headers": {
"user-agent" : "JS GraphQL",
"Authorization":"eyJhbGciOiJIUzI1NiJ9"
},
"credentials": "omit"
}
}
]
}
3.使用
安装好之后，新增了文件templete, 新建graphql文件,点击运行可以直接发送查询
image.png
调出这个控制台
currentError一般我是点那个刷新来重启服务
如有使用问题欢迎评论区找我，正在使用apollo客户端
最后附上 插件GitHub地址
