使用Webpack加载查询

您可以加载GraphQL查询.graphql文件，使用 Webpack。这个包graphql-tag包含一个易于设置的loader，并提供一些好处：

不在客户端处理 GraphQL AST
使查询与逻辑分离

在下面的示例中，我们创建了一个名为 currentUser.graphql的新文件：

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

您可以在webpack配置文件中添加规则来加载此文件。

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

如你所见，.graphql 或.gql 文件在导入时将被解析：

1
import React, { Component } from 'react';
2
import { graphql } from '@apollo/react-hoc';
3
import currentUserQuery from './currentUser.graphql';
4

5
class Profile extends Component { ... }
6
Profile.propTypes = { ... };
7

8
export default graphql(currentUserQuery)(Profile)

Jest

Jest不可以使用Webpack加载器。要在Jest中执行相同的转换，请使用jest-transform-graphql。

FuseBox

FuseBox不能使用Webpack加载器。为了在FuseBox中执行相同的转换，请使用fuse-box-graphql-plugin。

React native

React native不能使用Webpack加载器。为了在React native中执行相同的转换，请使用babel-plugin-import-graphql。

Create-React-App

create-react-app 不能使用 Webpack 加载器，除非发布。要在无需发布的 create-react-app 中执行相同的转换，请使用 graphql.macro.

1
import { loader } from 'graphql.macro';
2
const currentUserQuery = loader('./currentUser.graphql');

片段

您可以在片段中使用并包含 graphql 文件，让 Webpack 为您包含这些依赖项，类似于您在纯 JS 中使用带有 gql 标签的片段和查询的方式。

1
#import "./UserInfoFragment.graphql"
2

3
query CurrentUserForLayout {
4
  currentUser {
5
    ...UserInfo
6
  }
7
}

查看我们是如何导入另一个 .graphql 文件中的 UserInfo 片段（与在 JS 中导入模块相同的方式）。

以下是在另一个 .graphql 文件中定义片段的示例。

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

与 React Native 集成

基本的 HTTP 网络通信