Skip to content

Using GraphQL

pospi edited this page Jun 23, 2017 · 1 revision

When first writing GraphQL queries and binding them to your components, things can be quite confusing at first. This page lists a set of guidelines to help demystify some of GraphQL's concepts, conventions & inner workings.

  • Each component has to declare its query dependencies in full, from the root of the query. This will result in quite a lot of duplication throughout your codebase, but this is necessary for components & their data dependencies to remain isolated.
  • In each case, only declare the fields the component you're working on is actually using. If there are other bits of UI which request different fields, they'll all be merged together intelligently into a single query by Apollo at runtime.
  • To enable better code reuse one can utilise fragments, which are super helpful for reducing code duplication & making API updates easier. These are simply defined as gql strings and then merged into your queries using variable interpolation (eg ${myFragment}) so that they can then be referenced in the query fields (eg. ...myFragment).
  • Always declare an id field for every record you query. Failure to do so leaves Apollo unable to determine where to cache the record in the Redux store, leading to the error "the application attempted to write an object with no provided id but the store already contains an id".
Clone this wiki locally