Webpack 加载器

你可以使用 Webpack 加载 .graphql 文件里的 GraphQL 查询语句。graphql-tag 包自带一个易于配置的加载器,它具有如下优点:

  1. 不在客户端处理 GraphQL 抽象语法树
  2. 将查询与逻辑分开

在下面的例子中,我们创建一个名为 currentUser.graphql 的新文件:

1
2
3
4
5
6
query CurrentUserForLayout {
currentUser {
login
avatar_url
}
}

你可以通过在 Webpack 配置文件中添加规则来加载此文件:

1
2
3
4
5
6
7
8
9
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
],
},

正如你所见,.graphql.gql 文件将在导入时被解析:

1
2
3
4
5
6
7
8
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)

Jest

Jest 不能使用 Webpack 加载器。要在 Jest 中进行相同的转换工作,请使用 jest-transform-graphql

FuseBox

FuseBox 不能使用 Webpack 加载器。要在 FuseBox 中进行相同的转换工作,请使用 fuse-box-graphql-plugin.

片段

你可以在 .graphql 文件中使用并包含片段,并且让 webpack 为你处理这些依赖关系,这与你在普通 JS 中使用 gql tag 的片段和查询方式类似。

1
2
3
4
5
6
7
#import "./UserInfoFragment.graphql"
query CurrentUserForLayout {
currentUser {
...UserInfo
}
}

看看我们如何从一个 .graphql 文件导入 UserInfo 片段(这与你在 JS 中导入模块的方法相同)。

这是在另一个 .graphql 文件中定义片段的示例:

1
2
3
4
fragment UserInfo on User {
login
avatar_url
}
Edit on GitHub