From Relay To Apollo, A Story Of GraphQL Clients (FullStack London 2018)

GraphQL is becoming the norm for defining an application’s API, however, taking full advantage of it requires a deep knowledge of the popular GraphQL clients out there. Having used both Relay and Apollo in a production environment that serves millions of users, Mihai has a few tips and tricks to share.

In this talk he will provide a comparative view of the most popular JavaScript GraphQL clients (i.e. Relay and Apollo), focusing on their API, their biggest selling point, and how they are used in the wild. Additionally he will share the story behind the move from Relay to Apollo at Hudl, focusing on the motivation and lessons learned from this decision.

Transcript

1. From Relay To Apollo A Story Of GraphQL Clients @MCirlanaru #FullStackCon
2. Remote in Germany Mihai Cîrlănaru Senior Engineering Team Lead @MCirlanaru #FullStackCon
3. Tips + Tricks Brief History The Story Agenda GraphQL at Hudl Relay Apollo Client 01 03 02 @MCirlanaru #FullStackCon
4. 01Brief History How did GraphQL come into existence • Motivations • Growth @MCirlanaru #FullStackCon
5. Facebook Mobile Circa 2011 Architecture that can reuse as much of Facebook’s existing code as possible. Native App Web Services Data Services Web Browser youtu.be/WQLzZf34FJ8
6. Our biggest mistake was betting too much on HTML5. Mark Zuckerberg CEO Facebook tcrn.ch/QhPf5K 2012 September 2012
7. Data fetching for React applications at Facebook Daniel Schafer and Jing Chen youtu.be/9sc8Pyc51uU 2015
8. React Europe 2015 Exploring GraphQL Lee Byron youtu.be/WQLzZf34FJ8 Relay: An Application Framework for React Joseph Savona youtu.be/IrgHurBjQbg
9. GraphQL A data querying language designed to describe the complex, nested data dependencies of modern applications. bit.ly/GraphQL-Relay-Intro 2015
10. Relay A framework that provides data-fetching functionality for React applications. bit.ly/GraphQL-Relay-Intro 2015
11. Relay Store Component Server GraphQL write GraphQL query GraphQL response props Optimistic update Action* * description on how data should change @MCirlanaru #FullStackCon
13. Apollo Client A simple, incrementally adoptable GraphQL client built on Redux. bit.ly/GraphQL-Apollo-Intro 2016
15. 01Brief History How did GraphQL come into existence? • Motivations • Growth @MCirlanaru #FullStackCon 2018
18. www.bbc.co.uk/sport/football/44515740
19. www.npmjs.com/package/graphql 2018
20. Relay (Modern) • Overall simpler and more predictable API • Lightweight Apollo Client (v2) • No Redux as the caching layer • More customization, flexibility in the API (custom caching) @MCirlanaru #FullStackCon
21. 02The Story The GraphQL clients journey at Hudl • GraphQL at Hudl • Relay • Apollo Client @MCirlanaru #FullStackCon
22. Messaging GraphQL • Platform agnostic • Minimum round-trips • Flexible
23. Messaging Query Mutation GraphQL @MCirlanaru #FullStackCon
24. Messaging DIY GraphQL client • simple • lightweight • fit for purpose @MCirlanaru #FullStackCon // … // …
25. Messaging DIY GraphQL client • simple • lightweight • fit for purpose • + caching @MCirlanaru #FullStackCon
26. GraphQL Usage Quick expansion to core services of the Hudl platform. Messaging conversations message messageDetails … Library items videos playlists files storage … Teams team myTeams … Clips taggingSessions comments drawings … @MCirlanaru #FullStackCon
27. Library • Complex component tree • Diverse data needs • Caching GraphQL Relay + @MCirlanaru #FullStackCon
28. Relay (Classic) TL;DR Component Relay container props* props * props with query results @MCirlanaru #FullStackCon
29. Relay container props* * props with query results <Route queries={rootQuery}> <Router render={applyRouterMiddleware(useRelay)} environment={RelayEnvironment}>
30. Relay (Classic) bit.ly/Relay-Classic-Guide @MCirlanaru #FullStackCon + Encapsulation (data requirement co-location) + Well-defined patterns + “Battle tested” at Facebook Relay
31. Relay (Classic) bit.ly/Relay-Classic-Guide @MCirlanaru #FullStackCon + Encapsulation (data requirement co-location) + Well-defined patterns + “Battle tested” at Facebook - Complex API (especially mutations) - “Black box” (Relay Store) - No (easy) integration with state management frameworks like Redux - No (easy) way to persist cache Relay
33. Relay (Modern) A new version of Relay designed from the ground up to be easier to use, more extensible, and most of all to improve performance on mobile devices. bit.ly/Relay-Modern-Intro @MCirlanaru #FullStackCon + Simpler API + Lightweight (20% size of Relay Classic) Relay
34. Relay (Modern) A new version of Relay designed from the ground up to be easier to use, more extensible, and most of all to improve performance on mobile devices. bit.ly/Relay-Modern-Intro @MCirlanaru #FullStackCon + Simpler API + Lightweight (20% size of Relay Classic) - Elaborate migration process - Took a long time to market (May 2017) - Small community around it Relay
37. Apollo Client (v1) Migration + Great documentation + Simple to get started with + Lightweight + Easy to inspect and access its store + Built on top of Redux - Too much flexibility @MCirlanaru #FullStackCon
38. Apollo container props* * props with query results <Route> <ApolloProvider client={graphqlClient} store={store}> <Router>
39. Relay (Classic: v0.10.0) Apollo Client (v1: v1.4.14) @MCirlanaru #FullStackCon
40. Relay (Classic: v0.10.0) Apollo Client (v1: v1.4.14) @MCirlanaru #FullStackCon + Lightweight (½ size of Relay Classic) + Integration with Redux cache layer + Straightforward API - More boilerplate (imperative) - Complex API - “Black box” - “Spotty” documentation
42. Relay (Modern) Apollo Client (v2) @MCirlanaru #FullStackCon www.npmjs.com/package/react-relay www.npmjs.com/package/react-apollo
43. 03Tips + Tricks GraphQL Clients What we learned from using Relay and Apollo Client in a production environment @MCirlanaru #FullStackCon
44. Lessons Learned • Be pragmatic: use what makes sense for your project • Re-evaluate: don’t get too attached to one library • Be prepared: expect breaking changes From Relay to Apollo Client
45. Lessons Learned • Be pragmatic: use what makes sense for your project • Re-evaluate: don’t get too attached to one library • Be prepared: expect breaking changes From Relay to Apollo Client
46. Lessons Learned • Be pragmatic: use what makes sense for your project • Re-evaluate: don’t get too attached to one library • Be prepared: expect breaking changes From Relay to Apollo Client
47. YAGNI
48. Principle of extreme programming (XP) that states a programmer should not add functionality until deemed necessary. Extreme Programming and Agile Methods - XP/Agile Universe 2004 You Ain’t Gonna Need It
49. Thank you @MCirlanaru #FullStackCon