使用转换器编译查询

如果您希望在您的 JavaScript 文件中与您的GraphQL查询，您通常使用graphql-tag库来编写它们。这需要将查询字符串处理为 GraphQL AST，这将增加您应用程序的启动时间，尤其是如果您有大量的查询。

为了避免这种运行时开销，您可以预先使用graphql-tag通过转换器，如Babel和SWC进行编译。以下是您可以采取的几种方法：

使用babel-plugin-graphql-tag
使用graphql-tag-swc-plugin
使用graphql-tag.macro
使用ts-transform-graphql-tag为 TypeScript

如果希望将您的 GraphQL 代码保存在独立的文件中（.graphql 或 .gql），您可以使用 babel-plugin-import-graphql. 此插件在内部仍然使用 graphql-tag，但使用方式透明。您只需 import 尽管理解为操作符/或片段，就像从您的 GraphQL 文件导出一样。这具有与上述方法相同的预编译优势。

使用 babel-plugin-graphql-tag

此方法允许您像平常一样使用 graphql-tag 库，当使用此 Babel 插件处理文件时，对该库的调用将被预编译的结果替换。

在开发依赖中安装插件

1
# with npm
2
npm install --save-dev babel-plugin-graphql-tag
3

4
# or with yarn
5
yarn add --dev babel-plugin-graphql-tag

然后在您的 .babelrc 配置文件中添加插件：

1
{
2
  "plugins": [
3
    "graphql-tag"
4
  ]
5
}

这样！所有使用 import gql from 'graphql-tag' 的用法都将被删除，gql 的调用将被编译的版本替换。

使用 graphql-tag-swc-plugin

此插件与 babel-plugin-graphql-tag类似，但针对 swc，这是一个基于快速 rust 的 Babel 替代方案。

在开发依赖中安装插件

1
# with npm
2
npm install --save-dev graphql-tag-swc-plugin
3

4
# or with yarn
5
yarn add --dev graphql-tag-swc-plugin

然后在您的 .swcrc 配置文件中添加插件：

1
{
2
  jsc: {
3
    experimental: {
4
      plugins: [
5
        ["graphql-tag-swc-plugin",
6
          {
7
            importSources: ["@apollo/client", "graphql-tag"],
8
            gqlTagIdentifiers: ["gql"]
9
          },
10
        ],
11
      ],
12
    },
13
  },
14
}

有关配置和功能的更多信息，请参阅 graphql-tag-swc-plugin文档。

使用 graphql-tag.macro

这种方法的明确性更高，因为你将所有对graphql-tag的调用都更改为对graphql-tag.macro的调用，它导出一个gql函数，你可以像原始版本一样使用它。这个宏需要babel-macros插件，它将执行与之前相同的方法，但仅在来自宏导入的调用上执行，同时将常规调用留给graphql-tag库处理。

你为什么要选择这种方法呢？主要是因为它需要更少的配置（babel-macros与所有类型的宏都兼容，所以如果你已经安装了它，就无需做任何其他操作），还有明确性。你可以在这篇博客中了解更多关于使用babel-macros的原因。

要使用它，前提是您已安装 babel-macros并配置，只需更改这个：

1
import gql from 'graphql-tag';
2

3
const query = gql`
4
  query HelloWorld {
5
    hello {
6
      world
7
    }
8
  }
9
`;

改为这个

1
import gql from 'graphql-tag.macro'; // <-- Use the macro
2

3
const query = gql`
4
  query HelloWorld {
5
    hello {
6
      world
7
    }
8
  }
9
`;

使用 babel-plugin-import-graphql

在开发依赖中安装插件

1
# with npm
2
npm install --save-dev babel-plugin-import-graphql
3

4
# or with yarn
5
yarn add --dev babel-plugin-import-graphql

然后在您的 .babelrc 配置文件中添加插件：

1
{
2
  "plugins": [
3
    "import-graphql"
4
  ]
5
}

现在任何从 GraphQL 类型导入的import语句都将返回一个可选用的 GraphQL 文档节点对象。

1
import React, { Component } from 'react';
2
import { graphql } from '@apollo/react-hoc';
3
import myImportedQuery from './productsQuery.graphql';
4
// or for files with multiple operations:
5
// import { query1, query2 } from './queries.graphql';
6

7
class QueryingComponent extends Component {
8
  render() {
9
    if (this.props.data.loading) return <h3>Loading...</h3>;
10
    return <div>{`This is my data: ${this.props.data.queryName}`}</div>;
11
  }
12
}
13

14
export default graphql(myImportedQuery)(QueryingComponent);

使用 ts-transform-graphql-tag

在开发依赖中安装插件

1
# with npm
2
npm install --save-dev ts-transform-graphql-tag
3

4
# or with yarn
5
yarn add --dev ts-transform-graphql-tag

阅读 ts-transform-graphql-tag 文档以获取 Webpack 或 FuseBox 使用说明。

片段

所有这些方法都支持使用片段。

对于前两种方法，您可以在不同的 gql 调用中定义片段（可以是同一文件或不同文件中的）。然后，您可以使用插值将它们包含到主查询中，例如：

1
import gql from 'graphql-tag';
2
// or import gql from 'graphql-tag.macro';
3

4
const fragments = {
5
  hello: gql`
6
    fragment HelloStuff on Hello {
7
      universe
8
      galaxy
9
    }
10
  `
11
};
12

13
const query = gql`
14
  query HelloWorld {
15
    hello {
16
      world
17
      ...HelloStuff
18
    }
19
  }
20

21
  ${fragments.hello}
22
`;

使用 babel-plugin-import-graphql，您只需将您的片段包含在您的 Graphql 文件中，并与此片段使用的内容一起使用，甚至可以单独使用 #import 语法从单独的文件中导入。有关更多信息，请参阅 README。

服务器端渲染

使用 Apollo Client 与您的视图层