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

調出這個控制臺

如有使用問題歡迎評論區找我，正在使用apollo客戶端

最后附上 插件GitHub地址