Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Relay + GraphQL: how it works (Hudl - Front End Guild)

Relay + GraphQL: how it works (Hudl - Front End Guild)

While on the backend GraphQL is slowly becoming the de facto way of requesting data for your application, on the front-end there are multiple ways to consume GraphQL endpoints, with no clear favourite so far. I will focus on Relay, the web client for GraphQL built by Facebook, showcasing how it interfaces with a GraphQL-enabled backend in order to retrieve the data needed for your React components and also demo how it is used at Hudl.

Mihai Cîrlănaru

June 16, 2016
Tweet

More Decks by Mihai Cîrlănaru

Other Decks in Technology

Transcript

  1. Relay way Dispatcher Store* View** Server Action * managed by

    the framework ** Relay wrapped components
  2. Relay way Relay Store Component Server GraphQL write GraphQL query

    GraphQL response props Optimistic update Action* * description on how data should change
  3. Relay is a new framework from Facebook that provides data-fetching

    functionality for React applications.” “ facebook.github.io/react/blog
  4. Relay-compliant GraphQL server provides: • A mechanism for refetching an

    object • A description of how to page through connections • Structure around mutations to make them predictable facebook.github.io/relay/docs/graphql-relay-specification Relay requirements