字符串插值和片段之间有什么显着区别吗？

Question

进行以下查询：

import gql from "graphql-tag";

const FOO = gql` {
  foo (id: "12") {
    id
    qux {
      id
    }
  }
}

const BAR = gql` {
  BAR (id: "12") {
    id
    qux {
      id
    }
  }
}

如果我们能保持代码干爽并定义一次 qux 就好了。

我看到两个解决方案：

字符串插值，从查询中取出 qux 并将其定义为字符串。这是 GitHub gist.
使用fragments.

但是使用#2 有一个警告：

If you are using fragments on unions and interfaces, you will need to use an IntrospectionFragmentMatcher

使用碎片有什么好处？

Answer 1

Apollo 文档在那里有点误导。使用接口或联合将需要您提供一个 IntrospectionFragmentMatcher，期间。那是因为 inline fragment 仍然是一个片段。如果您正在查询一个联合或接口字段，您将不得不为每个具体类型、内联或其他类型使用一个片段。所以我不会真的认为这是利用片段的"caveat"。

出于以下几个原因，您通常应该使用片段：

公约。任何已经熟悉 GraphQL 的人都可以查看您的代码并立即掌握正在发生的事情。任何为您的项目做出贡献的人都将能够更轻松地做到这一点。
额外验证。片段需要 "on" 条件来确保它们在正确的位置使用。使用带有错误字段的片段将产生比简单地请求错误字段（参见 here 示例）信息更丰富的错误消息。
更好的 DX。使用 webpack 加载器或 babel 插件，您可以将查询保存在单独的文件中并直接导入它们，而不必到处导入 graphql-tag。对于以这种方式存储的 GraphQL 文档，大多数 IDE 都支持语法高亮显示和其他优点。

使用字符串插值的主要好处是能够轻松地有条件地包含或排除字段。通过使用 @skip 和 @include 指令，这对于片段仍然是可能的，但是更加冗长。

字符串插值和片段之间有什么显着区别吗？

Any notable difference between string interpolations and fragments?

graphql

graphql-js

apollo-client

graphql-tag