为什么你需要带有 Apollo 的 graphql-tag答案

【问题标题】：Why do you need graphql-tag with Apollo为什么你需要带有 Apollo 的 graphql-tag
【发布时间】：2020-04-09 10:18:39
【问题描述】：

按照一些教程和示例，我将 GraphQL API 集成到一个简单的 Vue 应用程序中。我正在使用 Apollo 与 API 和 graphql-tag 提供的模板文字进行交互来编写查询，如下所示：

gql`
    query getUser($userId: ID) {
        user(id: $userId) {
            name,
            email
        }
    }
`

但是，我不太了解 graphql-tag 包的必要性。据我了解，这个包将查询转换为 AST，但是在前端这样做的目的是什么，为什么需要 graphql-tag 包来做到这一点？ GraphQL 查询不能按原样发送到服务器吗？

【问题讨论】：

标签： vue.js graphql apollo-client graphql-tag

【解决方案1】：

它们可以只是纯字符串，您可以获取 IDE 扩展，以便在看到 gql 标记的位置突出显示语法。如果您尝试添加额外字段、将多个查询合并在一起或other interesting stuff 等操作，字符串操作起来很不方便。它还在语义上区分了以下字符串的区别和重要性。

【讨论】：

【解决方案2】：

查询本身可以发送到服务器而不被转换成DocumentNode 对象。但是，Apollo 并非仅向您的服务器发送查询。它实现了许多附加功能，包括响应的标准化缓存。为了使缓存起作用，我们需要将提供的查询解析为机器可读的格式。例如，通过这样做，我们可以看出所有这些查询实际上是等效的，并且如果我们已经拥有数据，则可以从缓存中获取：

{
  foo
  bar
}

query SomeOperationName {
  foo
  bar
}

query { foo bar }

{
  bar
  qux: foo
}

【讨论】：

不过，我没有从您的回答中得到为什么需要 graphql-tag，这似乎是 OP 所要求的。
@Mitya 我的理解是您不需要 graphql-tag，但如果您确实拥有它，graphql-tag 将帮助 Apollo 将这些对象识别为同一事物并缓存它们/减少缓存量。即它有助于阿波罗。
有趣 - 谢谢。