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.

Transcript

1. Relay + GraphQL how it works @mihai #london Mihai Cîrlănaru
2. Data fetching
3. Data fetching
4. Flux way Dispatcher Store View Server Action
5. Relay way Dispatcher Store* View** Server Action * managed by the framework ** Relay wrapped components
6. Relay way Relay Store Component Server GraphQL write GraphQL query GraphQL response props Optimistic update Action* * description on how data should change
8. What is Relay?
9. Relay is a new framework from Facebook that provides data-fetching functionality for React applications.” “ facebook.github.io/react/blog
10. Library example
11. Relay and GraphQL explained Component
12. Relay and GraphQL explained Component Relay container props* * props with query results props
13. Relay and GraphQL explained Relay container * props with query results props* GraphQL
15. Library code
16. Recap Relay Store Component Server GraphQL write GraphQL query props Optimistic update GraphQL response Action
17. Recap Server Relay Store props Action Component GraphQL write Optimistic update GraphQL query
18. Recap Relay Store Component Server GraphQL write GraphQL query props Optimistic update GraphQL response Action
19. Relay compliant
20. 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
21. Further reading facebook.github.io/relay graphql.org sync.hudl.com/display/DEV/GraphQL
22. Thank you questions? @mihai