使用 JavaScript 定义 GraphQL 查询/突变的巧妙方法答案

【问题标题】：Clever way to define a GraphQL Query/Mutation with JavaScript使用 JavaScript 定义 GraphQL 查询/突变的巧妙方法
【发布时间】：2018-12-31 18:20:16
【问题描述】：

也许只有我一个人，但我非常讨厌用反引号定义我的 GraphQL 查询/突变。这里的问题是，如果我必须对查询字符串应用一些更改，那么在反引号内重新格式化字符串非常烦人。

有没有一种聪明的方法可以用 JavaScript 定义一个更易读和维护的 GraphQL Query/Mutation？查询字符串乱了，也很难找到丢失的括号。

我现在就是这样：

import gql from 'graphql-tag';

export const fancyMutation = gql`
mutation($id: ID!)
{
  delete_something(id:$id) {
    id
    foo
    bar
  }
}
`;

【问题讨论】：

标签： javascript webstorm graphql

【解决方案1】：

您还可以将查询放入自己的文件中，例如带有.graphql 或.gql 文件扩展名，use the graphql-tag/loader 可以从您需要的文件中加载查询。

在它自己的文件中给出这个查询：

query CurrentUserForLayout {
  currentUser {
    login
    avatar_url
  }
}

使用 webpack，您需要以下配置：

module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
},

然后你可以这样加载它：

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import currentUserQuery from './currentUser.graphql';

class Profile extends Component { ... }
Profile.propTypes = { ... };

export default graphql(currentUserQuery)(Profile)

更新：

您还可以在一个文件中包含多个查询：

query MyQuery1 {
  ...
}

query MyQuery2 {
  ...
}

然后您可以像这样加载它们：

import { MyQuery1, MyQuery2 } from 'query.gql'

除此之外，我不知道用于定义内联查询的其他选项。反引号不是 graphql 特定的。它只使用es6 template tags，例如样式化的组件确实定义了内联 css。您唯一的选择是获得一个可以识别 graphql 查询以提供编辑帮助和代码突出显示的 IDE。 IntelliJ 编辑器（IDEA、WebStorm、PyCharm）有一个插件，就像@Victor Vlasenko 指出的那样。

【讨论】：

这本身是每个文件一个查询/突变吗？
@Dude 不，您还可以在一个文件中进行多个查询。请参阅我的更新答案。

【解决方案2】：

JS GraphQL WebStorm 插件从 1.4.1 版本开始支持嵌入式 GraphQL 字符串。

从 WebStorm 菜单中选择 File -> Settings -> Plugins -> Browse repositories 并找到 JS GraphQL 插件。检查您是否至少安装了此插件的 1.4.1 版本。

安装后，它应该突出显示大括号，并允许您通过选择代码块并从 IDE 菜单中选择 Code -> Reformat code 来重新格式化字符串中的 GraphQL。

此插件项目页面位于此处：

https://github.com/jimkyndemeyer/js-graphql-intellij-plugin

【讨论】：