3

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}."

Shouvik
  • 157
  • 10
  • What does it do where? Are you asking about the ES6 syntax? – SLaks Jan 08 '17 at 02:58
  • 1
    Possible duplicate of [What does the three dots in react do?](http://stackoverflow.com/questions/31048953/what-does-the-three-dots-in-react-do) – Shashank Kadne Jan 08 '17 at 03:00
  • Slaks and Shahank Kadne: clarified the question is if the "..." used so commonly in React is related to the "..." used in GraphQL fragments. Is it coincidence they are the same or are they both using a more general javascript notation? – Shouvik Jan 08 '17 at 03:36

1 Answers1

4

#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.

Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199