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

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.

2f55ef3093479f2bb68b7ec5e1ead838?s=128

Mihai Cîrlănaru

July 11, 2018
Tweet

Transcript

  1. 3.

    Tips + Tricks Brief History The Story Agenda GraphQL at

    Hudl Relay Apollo Client 01 03 02 @MCirlanaru #FullStackCon
  2. 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
  3. 6.

    Our biggest mistake was betting too much on HTML5. Mark

    Zuckerberg CEO Facebook tcrn.ch/QhPf5K 2012 September 2012
  4. 8.

    React Europe 2015 Exploring GraphQL Lee Byron youtu.be/WQLzZf34FJ8 Relay: An

    Application Framework for React Joseph Savona youtu.be/IrgHurBjQbg
  5. 9.

    GraphQL A data querying language designed to describe the complex,

    nested data dependencies of modern applications. bit.ly/GraphQL-Relay-Intro 2015
  6. 11.

    Relay Store Component Server GraphQL write GraphQL query GraphQL response

    props Optimistic update Action* * description on how data should change @MCirlanaru #FullStackCon
  7. 12.
  8. 14.
  9. 15.
  10. 16.
  11. 17.
  12. 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
  13. 21.

    02The Story The GraphQL clients journey at Hudl • GraphQL

    at Hudl • Relay • Apollo Client @MCirlanaru #FullStackCon
  14. 24.

    Messaging DIY GraphQL client • simple • lightweight • fit

    for purpose @MCirlanaru #FullStackCon // … // …
  15. 25.

    Messaging DIY GraphQL client • simple • lightweight • fit

    for purpose • + caching @MCirlanaru #FullStackCon
  16. 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
  17. 27.

    Library • Complex component tree • Diverse data needs •

    Caching GraphQL Relay + @MCirlanaru #FullStackCon
  18. 28.

    Relay (Classic) TL;DR Component Relay container props* props * props

    with query results @MCirlanaru #FullStackCon
  19. 29.

    Relay container props* * props with query results <Route queries={rootQuery}>

    <Router render={applyRouterMiddleware(useRelay)} environment={RelayEnvironment}>
  20. 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
  21. 32.
  22. 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
  23. 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
  24. 35.
  25. 36.
  26. 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
  27. 38.
  28. 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
  29. 41.
  30. 43.

    03Tips + Tricks GraphQL Clients What we learned from using

    Relay and Apollo Client in a production environment @MCirlanaru #FullStackCon
  31. 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
  32. 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
  33. 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
  34. 47.
  35. 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