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
}