为什么需要 Apollo 的 graphql-tag

Question

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

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

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

Answer 1

它们可以只是普通字符串，您可以获得 IDE 扩展以在看到 gql 标记的地方为您提供语法高亮显示。字符串不便于操作，如果您尝试执行诸如添加额外字段、将多个查询合并在一起或 other interesting stuff 之类的操作。它还语义分离了以下字符串的差异和重要性。

Answer 2

查询本身可以发送到服务器而无需变成 DocumentNode 对象。但是，Apollo 不会仅向您的服务器发送查询。它实现了许多附加功能，包括响应的规范化缓存。为了缓存工作，我们需要将提供的查询解析为机器可读的格式。例如，通过这样做，我们可以知道所有这些查询实际上是等价的，如果我们已经有数据，可以从缓存中获取：

{
  foo
  bar
}

query SomeOperationName {
  foo
  bar
}

query { foo bar }

{
  bar
  qux: foo
}

为什么需要 Apollo 的 graphql-tag

Why do you need graphql-tag with Apollo

vue.js

graphql

apollo-client

graphql-tag