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

Question

也许只有我这么认为，但我对用反引号定义 GraphQL 查询/突变感到非常恼火。这里的问题是，如果我必须对查询字符串进行一些更改，那么重新格式化反引号内的字符串是非常烦人的。

是否有一种巧妙的方法来使用 JavaScript 定义更具可读性和可维护性的 GraphQL 查询/突变？当查询字符串困惑时，也很难找到丢失的括号。

我现在正在这样做:

import gql from 'graphql-tag';

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

Answer 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 指出的那样。