Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr I’ve been exploring the space of declarative developer tools and frameworks for over five years. Most recently, I was the founding member of the Apollo project at Meteor Development Group. My greatest passion is to make software development simpler, and enable more people to create software to bring good to the world. https://medium.com/@stubailo @stubailo - Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria - Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform - Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter - Afterparty: An English Thing

1. The Apollo and
GraphQL stack
How everything fits together
Sashko Stubailo
Open Source Lead, Apollo
@stubailo

2. The goal of the Apollo team and community:
Make building great
applications simpler and more
straightforward, with GraphQL.

3. Today's apps can be complex:
● Multiple frontends for different platforms
● Multiple backends where data lives
● Need for team coordination across different
languages, technologies, and contexts
In this presentation, I'd like to show you how Apollo
and GraphQL can address these concerns.
Let's set the stage...
React
Android
iOS
Angular
MongoDB
Oracle
Salesforce
PostgreSQL
Microservice

4. What is GraphQL?
Schema definition Query language Community of tools

5. Why does GraphQL have so many benefits?
GraphQL organizes the mess of
ad-hoc, underspecified
endpoints.

6. What is Apollo?
A set of projects designed to leverage GraphQL and work together
to create a great workflow.
Client-side tooling
● Apollo Client
● Apollo iOS
● Apollo Android
● Dev tools
● apollo-codegen
● eslint-plugin-graphql
Server-side tooling
● Apollo Server
● Graphql-tools
○ Schema creation
○ Mocking
○ Stitching
● Apollo Optics

7. Core benefits from Apollo + GraphQL
1. Easy, fast, and simple development
2. Better maintenance, security, and coordination, especially
between teams
3. Ultimate understanding into how your app data works
Let's look at them one by one.

8. 1. Easy, fast, and simple
development

9. GraphQL is easier than ever before
Apollo Client
Apollo Server
BackendBackend Backend
React
Existing REST API
● Today, it's just as fast and easy to
build with GraphQL as any other
API technology.
● Huge benefits from a flexible and
declarative approach to data.
● Save time by describing what you
need, not how to get it

10. A GraphQL API in just a few lines of code
https://launchpad.graphql.com/v7mnw3m03

11. Easily attach GraphQL data to React
https://codesandbox.io/s/jvlrl98xw3

12. Adding new features to your app
● This is where GraphQL really shines
● In the UI, just add a new component
● Use the existing fields in a new way, or add a few,
but no need to create an entire new endpoint
● You can build on the work you've already done
● GraphQL is like a component-based API

13. Migrating an existing app

14. Spend less time managing data
● Less time worrying about data:
○ Loading state tracking
○ Normalizing and storing data
○ Error handling
○ Async request management
● Less time building new endpoints:
○ Just build the types and fields you need

15. What's the Apollo team's goal here?
● We want to make sure the best option is also the easiest
● You shouldn't have to decide between simple and complicated
● Huge focus on documentation to make things easy
● Constant improvement: Apollo Client 2.0 is 5x faster and 2x smaller

16. 2. Safety and coordination

17. Check your API calls ahead of time
+
Use the interaction between GraphQL schema and queries.

18. Great article by Zach Silviera: https://zach.codes/supercharging-react-app-development/

19. eslint-plugin-graphql

20. apollo-codegen

21. Validating code across the stack
● Validate your frontend code is correct as you write it, using
eslint-plugin-graphql and static type generation with apollo-codegen
● Use a CI setup to check against newly deployed schemas to ensure
your frontend remains valid
● Find breaking changes in the schema with
@entria/graphql-findbreakingchanges. Extra useful when you don't
have the frontend code.

22. Mocking and Schema Stitching in graphql-tools
https://dev-blog.apollodata.com/graphql-tools-2-0-with-s
chema-stitching-8944064904a5

23. New workflows
● "GraphQL-First" - develop the schema in parallel with the frontend
using mocking, then connect them
● Using schema stitching, develop different parts of your API in isolation,
and combine with mocking to achieve a hybrid mocked/real API
● Eliminate unneeded blockers across teams

24. Why GraphQL?
● GraphQL is the only technology that combines a strongly-typed static
schema with a specific query language
● No "select * from users"
● Queries more often live next to UI code, not somewhere in a totally
different place, making it easier to connect UI+queries

25. 3. Understanding your data

26. Understand the data available
● Same system for building and
validating the API makes it complete
reliable
● Opt-in systems like Swagger, or
manually maintained API docs, are
often incomplete or out of date

27. Query language
● No way to select * in GraphQL
● You know exactly which fields are
being accessed
● GraphQL is the only tech I know of that
combines a description of the API with
a requirement to ask for specific fields

28. Track API field usage with Optics

29. What to do with this information?
● Know which fields to target for deprecation
● Know where to start optimizing
● Move from fields to operations to see what is affected

30. Fine-grained data
requirements
● Without GraphQL, all similar requests
for data blend together
● It's hard to trace back to UI
performance
● You want to see information per query,
not per endpoint

31. Optics and devtools
Similar information, across the stack: The future of Apollo

32. Per-field performance

33. Easy to know where to fix the problem
● Client side: Avoid fetching fields, split up queries, @defer
● Server side: Make the server faster, do better caching
So what's the next step for GraphQL insights?

34. Apollo Tracing

35. Broad server support
● Node
● Ruby
● Scala (Sangria)
● Java
● Elixir
● OCaml
● Even Wordpress →

36. My hopes for the Apollo Tracing standard
● Performance data built into every GraphQL server
● Visualize data in more places, such as GraphiQL or Apollo
Client Devtools
● Support more kinds of information, for example underlying
backend timing
● Support for schema stitching
Let's work together on it!

37. Zooming out

38. The "Apollo Platform"
Apollo Optics
Apollo Client
Apollo Server
Backend Backend Backend
React, etc
Developer tools, code
analysis, and more
Apollo iOS/Android
Swift, Java

39. The future of the Apollo platform
● Continue to prioritize incremental adoption and integrate
with every technology imaginable
● More tools and features that take advantage of GraphQL
across the whole stack
● Build on more community-driven standards, like Tracing

40. Core benefits from Apollo + GraphQL
1. Easy, fast, and simple development
2. Better maintenance, security, and coordination, especially
between teams
3. Ultimate understanding into how your app data works
Now we see how using all of the tools together gets us these
benefits.
Important: We can choose which ones we want.

41. Let's help people
use GraphQL,
together!
Talk to me if you have ideas about
Apollo or GraphQL.
Sashko Stubailo
@stubailo
sashko@apollodata.com
summit.graphql.com
REACTBRAZIL for 25% off