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

【问题标题】：Any notable difference between string interpolations and fragments?字符串插值和片段之间有什么显着区别吗？
【发布时间】：2020-03-09 16:07:53
【问题描述】：

进行以下查询：

import gql from "graphql-tag";

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

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

如果我们可以保持代码 DRY 并定义一次 qux，那就太好了。

我看到了两种解决方案：

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

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

如果您在联合和接口上使用片段，则需要使用 IntrospectionFragmentMatcher

使用片段有什么好处？

【问题讨论】：

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

【解决方案1】：

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

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

公约。任何已经熟悉 GraphQL 的人都可以查看您的代码并立即掌握发生了什么。任何为您的项目做出贡献的人都可以更轻松地做到这一点。
附加验证。片段需要“开启”条件，以确保它们在正确的位置使用。使用带有错误字段的片段将产生比简单地请求错误字段更能提供信息的错误消息（参见here 示例）。
更好的 DX。使用 webpack 加载器或 babel 插件，您可以将查询保存在单独的文件中并直接导入它们，而无需在任何地方导入 graphql-tag。大多数 IDE 支持以这种方式存储的 GraphQL 文档的语法突出显示和其他好东西。

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

【讨论】：