Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building GraphQL Applications with Relay - GraphQL Manchester #1

53 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Building GraphQL Applications with Relay - GraphQL Manchester #1

  1. 1. HELLO! I’m Chris Engineering @ Sainsbury’s @chrisgrice | chris.grice@sainsburys.co.uk
  2. 2. Building GraphQL Applications with Relay
  3. 3. 1 yearsince adopting GraphQL 3 servicesnow in production with GraphQL
  4. 4. A JavaScript framework for building data- driven React applications Relay
  5. 5. WHAT IS RELAY? Let’s start from the beginning... ?
  6. 6. Declarative views make your code more predictable and easier to debug https://reactjs.org/
  7. 7. view = f(data)
  8. 8. REACT GRAPHQL ???RELAY
  9. 9. PRINCIPLES DECLARATIVE COLOCATE D DYNAMIC
  10. 10. ∎ Get what you ask for ∎ Relay determines how and when to get it ∎ Requests your data efficiently DECLARATIVE
  11. 11. COLOCATED ∎ GraphQL queries sit next to your views ∎ Query aggregation and composition ∎ Driven by COMPONENTS
  12. 12. DYNAMIC ∎ Update your data with Mutations ∎ Automatic consistency ∎ Optimistic updates!
  13. 13. HOW? 3 PARTS relay- compiler relay-runtime react-relay
  14. 14. relay-compiler ∎ Compiles your GraphQL into transformed, optimised queries. ∎ Supports additional @directives to add new features.
  15. 15. relay-runtime ∎ Fully-featured GraphQL runtime. ∎ Reads, writes, and caches objects. ∎ Supports mutations, subscriptions, live queries, more!
  16. 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. 17. DEMO TIME
  18. 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. 19. THANKSAny questions?
  20. 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. 21. CREDITS Special thanks to all the people who made and released these awesome resources for free: ∎ Presentation template by SlidesCarnival ∎ Photographs by Unsplash

×