Question

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

是否有一种聪明的方法来定义使用JavaScript的更具可读性和可维护性的GraphQL查询/突变？当查询字符串混乱时，也很难找到缺少的括号。

我现在正在这样做：

data = {"entries": {"1": {"body": "ooo", "title": "jack"},"2": {"body": "ooo","title": "john"}}}
new_entry_1 = {"body": "nnnn", "title": "jack"}
new_entry_2 = {"body": "qqqq", "title": "jill"}

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指出的插件。

Answer 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

使用JavaScript定义GraphQL查询/突变的聪明方法

2 个答案: