A brief introduction to Relay, and how to build GraphQL backed web applications usint it.

1. HELLO!
I’m Chris
Engineering @ Sainsbury’s
@chrisgrice | chris.grice@sainsburys.co.uk

2. Building GraphQL
Applications with
Relay

3. 1 yearsince adopting GraphQL
3 servicesnow in production with GraphQL

4. A JavaScript framework for building data-
driven React applications
Relay

5. WHAT IS
RELAY?
Let’s start from the beginning...
?

6. Declarative views make your
code more predictable and
easier to debug
https://reactjs.org/

7. view = f(data)

8. REACT
GRAPHQL
???RELAY

9. PRINCIPLES
DECLARATIVE COLOCATE
D
DYNAMIC

10. ∎ Get what you ask for
∎ Relay determines how and when to get it
∎ Requests your data efficiently
DECLARATIVE

11. COLOCATED
∎ GraphQL queries sit next to your views
∎ Query aggregation and composition
∎ Driven by COMPONENTS

12. DYNAMIC
∎ Update your data with Mutations
∎ Automatic consistency
∎ Optimistic updates!

13. HOW?
3 PARTS
relay-
compiler
relay-runtime react-relay

14. relay-compiler
∎ Compiles your GraphQL into transformed,
optimised queries.
∎ Supports additional @directives to add new
features.

15. relay-runtime
∎ Fully-featured GraphQL runtime.
∎ Reads, writes, and caches objects.
∎ Supports mutations, subscriptions, live
queries, more!

16. react-relay
∎ Lets you use Relay inside of React.
∎ APIs to fetch data.
∎ Define your queries.
∎ Define the data dependencies for your
components.

17. DEMO TIME

18. QueryRenderer
FragmentContainer
FragmentContainer
FragmentContainer
Query Home_Query {
posts {
...Post_posts
}
}
fragment PostList_posts on Post {
...PostDetail_post
comments {
...CommentList_comments
}
}
fragment PostDetail_post on Post {
id
title
content
}
fragment PostDetail_post on Comment {
content
author
}

19. THANKSAny questions?

20. Links to resources mentioned in this talk
● Repo for demo: https://github.com/cgrice/relay-demo
● Relay
● Thinking in Relay
● Apollo Client
● Using GraphQL @ Sainsbury’s

21. CREDITS
Special thanks to all the people who made and released these
awesome resources for free:
∎ Presentation template by SlidesCarnival
∎ Photographs by Unsplash