也许只有我这么认为,但我对用反引号定义 GraphQL 查询/突变感到非常恼火。这里的问题是,如果我必须对查询字符串进行一些更改,那么重新格式化反引号内的字符串是非常烦人的。
是否有一种巧妙的方法来使用 JavaScript 定义更具可读性和可维护性的 GraphQL 查询/突变?当查询字符串困惑时,也很难找到丢失的括号。
我现在正在这样做:
import gql from 'graphql-tag';
export const fancyMutation = gql`
mutation($id: ID!)
{
delete_something(id:$id) {
id
foo
bar
}
}
`;
最佳答案
您还可以将查询放入自己的文件中,例如具有 .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 指出的那样。
关于javascript - 使用 JavaScript 定义 GraphQL 查询/突变的巧妙方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51493335/