Trying to understand the connection between the "..." notation in React and GraphQL. Are they
1) Using the same general Javascript syntax? If so, what does it mean - since my understanding was specific to React. (I thought it meant pass the properties inherited from the parent's to a child."
2) Unrelated syntax that happen to be the same in React and GraphQL.
I saw it used in GraphQL in this example from the ApolloClient tutorial
tutorial: const PokemonQuery = gql` query PokemonQuery($id: ID!) {
Pokemon(id: $id) {
... PokemonCardPokemon
} } ${PokemonCard.fragments.pokemon}
In this example, PokemonCardPokemon is a GraphQL fragment. The tutorial says, "Note that we select the fragment in the query using the ... syntax, and that we additionally include the fragment after the query with ${PokemonCard.fragments.pokemon}."
#2
JavaScript/React and GraphQL each use the ... operator for their own purposes without knowledge of how the other uses it.
In JavaScript, ... is used with Arrays and array-like objects to either collect or spread their values.
Example, spreading an array's values so they're passed as separate arguments.
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
In GraphQL, ... is used to apply Fragments or named sets of fields that can be reused throughout the query.
{ 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.