webstorm + graphql 插件 ： js Graphql

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

2. 配置文件
   在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地址