javascript - React 和 GraphQL 中使用的 "..."语法是什么？它是更通用的 Javascript 吗？

Question

试图理解 React 和 GraphQL 中“...”符号之间的联系。他们是吗

1) 使用相同的通用 Javascript 语法？如果是这样，那是什么意思——因为我的理解是特定于 React 的。 (我认为这意味着将从父项继承的属性传递给子项。”

2) React 和 GraphQL 中碰巧相同的无关语法。

我在 example from the ApolloClient tutorial 中看到它在 GraphQL 中的使用

tutorial: const PokemonQuery = gql`   query PokemonQuery($id: ID!) {
    Pokemon(id: $id) {
      ... PokemonCardPokemon
    }   }   ${PokemonCard.fragments.pokemon}

在此示例中，PokemonCardPokemon 是一个 GraphQL 片段。教程说，“请注意，我们使用 ... 语法在查询中选择片段，并且我们在查询后使用 ${PokemonCard.fragments.pokemon} 额外包含片段。”

Answer 1

#2

JavaScript/React 和 GraphQL 各自使用 ... 运算符来实现自己的目的，而不知道对方如何使用它。

---

在 JavaScript 中，... 与数组和类数组对象一起用于 collect或 spread他们的值(value)观。

例如，展开数组的值以便将它们作为单独的参数传递。

var list = [ 5, 3, 10 ];
console.log(Math.min(...list));           // 3

// shorter and simpler than...
console.log(Math.min.apply(Math, list));  // 3

// and means the same as...
console.log(Math.min(5, 3, 10));          // 3

---

在 GraphQL 中，... 用于应用 Fragments或可在整个查询中重复使用的命名字段集。

{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

You can see how the above query would be pretty repetitive if the fields were repeated. The concept of fragments is frequently used to split complicated application data requirements into smaller chunks, especially when you need to combine lots of UI components with different fragments into one initial data fetch.