Presented by Danielle Man and Sashko Stubailo from the Apollo team at Meteor, at GraphQL Summit 2016 on 10/26/2016. We've seen countless examples of how GraphQL makes it easier to organize, maintain, and use APIs. If you’re building with it today, over a year after it was initially released, you can benefit from the experience of many teams that came before you. You can also leverage the wide array of tools built by the community to make it easier to adopt GraphQL alongside technologies you’re already using. In this talk, we’ve distilled lessons and architectural patterns from top companies, the open source community, and our own production apps to help you embark on your GraphQL journey.

1. Navigating Your
Transition to GraphQL
A GraphQL-first approach to improving your API
Sashko Stubailo
Tech Lead
Apollo Open Source
Danielle Man
Developer
Apollo Services

2. Who are we?
• We build and maintain tools for the
GraphQL community
• Excited about the developer experience
enabled by GraphQL
• We went from 0 to GraphQL in two
production apps, talked to many people
who did the same
• We build new apps and features fast
with a GraphQL-first workflow
apollodata.com
github.com/apollostack

3. Announced and
open-sourced
July 2015
Production ready,
new site
September 2016
Great tools, best
practices, efficient
workflow
The future
Initial design at
Facebook
2012
Looking back…

4. GraphQL First Development
Post
User
Comment
1. Design API schema
Contract between frontend and
backend with a shared schema
language
2. Build UI and backend
Parallelize with mocking,
develop component-based UIs
with GraphQL containers
3. Run in production
Static queries make loading
predictable, schema tells you
which fields are being used
query Human

5. Design your schema1

6. • Database schema is not
always relevant to frontend
developers
• Apps are getting more
complex, not all of your
data is in a database!
D B S C H E M A

7. • Contract between frontend and
backend
• Declares relationships across
backend data sources
• Incrementally adopt - get the
API you always wanted!
# A comment submitted by a user
type Comment {
# The SQL ID of this comment
id: Int!
# The GitHub user who posted the comment
postedBy: User!
# The text of the comment
content: String!
# The repository which this comment is about
repoName: String!
}
G R A P H Q L S C H E M A

8. GraphQL requests Backend fetches

9. Incremental GraphQL Adoption
Data-Layer Redesign
Combine Queries
Simplify Development
Thousands of active users
Galaxy

10. Client
Elastic Search MongoDB
Amazon Dynamo
DB
C L I E N T
A W S
Galaxy Server
Apollo Client
GraphQL Server

11. GraphQL from the Beginning
Schema Contract
Parallelize Development
Schema Ownership?
Built from scratch in under 3 months
Optics

12. B A C K E N D F R O N T E N D
Design for different types of apps
Don’t overfit to specific features Computed fields live on the server
Components ask for exactly
what they need
Generic Backend-for-

13. Streamline your Workflow
2

14. B U I L D I N G A P P S
Product Design Engineering

15. R E A L I T Y

16. I D E A L

17. Change database
Rewrite mocked data for all
endpoints using it
Change schema
Update one resolver
P E R - E N D P O I N T P E R - R E S O L V E R
Rest Mocking GraphQL Mocking

18. Component-
First
Development

20. 1. Painlessly adapted to schema changes
2. Connected front-end to back-end in under 2 days
3. Developed full app in less than 3 months
O U R E X P E R I E N C E

21. graphql-tools
20 contributors - thanks @DxCx,
@sebastienbarre, @nicolaslopezj
Implement a Node.js GraphQL
schema using the schema
language directly, with support
for all GraphQL features
github.com/apollostack/graphql-tools

22. graphql-tools
One-step data mocking based on
schema types, customizable as
much as you need.
Instrumental to GraphQL First
development workflow.
github.com/apollostack/graphql-tools

23. graphql-tools
github.com/apollostack/graphql-tools
Find new workflows
Managing GraphQL Development At Scale - Nick Nance
Develop new features together
Pull request by @itajaja

24. Load Data with Queries 3

25. GraphQL clients
Plain fetch
Simple
Predictable
No UI consistency and performance
features
Caching client
Some work required to set up and learn
Easy to update the UI
Manage data in one place
Great dev tools
GET

26. Incremental adoption for the client
Compatible
Works with your existing client-
side infrastructure
Un-opinionated
Design your own schema, fit
into your existing data model
Component-first
Use GraphQL just one
component at a time, test and
reuse components
Post
User
Comment

27. Static queries for perf and security
• Use fragments for static composition.
• Queries sent to the server are predictable,
and can be optimized.
• Data requirements of app can be fully
analyzed at build time.
• Better security with persisted queries.
Write your data requirements so that
tooling can separate them from your UI
code

28. Code generation for result types
Write GraphQL queries
Get static typing based on schema
• Fully featured in Apollo-iOS today
• Community working on TypeScript and
Flow on apollo-codegen
• Work with the easy to learn GraphQL
query language, get all of the benefits of
native integration
github.com/apollostack/apollo-ios
github.com/apollostack/apollo-codegen
Big thanks to @rricard for working on TS
and Flow!

29. Apollo Client 0.5
dev.apollodata.com
Out today, big thanks to over 100 contributors, especially @jbaxleyiii,
@rricard, @johnthepink, @abhiaiyer91, @kamilkisiela

30. Apollo Client 0.5
• 100% GraphQL spec support: if you can type it in GraphiQL, it will work.
• Fully featured: Queries, mutations, fragments, optimistic UI, pagination, and more.
• Tooling friendly: Redux dev tools, static analysis, and persisted queries.
• Compatible: Use it with React, React Native, Angular 1, Angular 2, Vue.js, etc.
• Flexible and customizable: Fits into any architecture, customizable caching.
• Futuristic: Subscriptions and custom resolvers, ideas coming from the community.
The best part is — it’s just GraphQL.

31. GraphQL client conclusions
Use a caching client
Get better UI consistency and avoid loading data you already have.
Incremental adoption and compatibility
Important as you move older apps over to GraphQL, and if your tech choices change.
Static queries
Predictable loading, better dev tools, clearer server insights, eventually move to
persisted queries for performance and security.

32. Monitor in Production 4

33. 1. Understand endpoint usage
2. Measure endpoint timing
3. Monitor server load
W H A T D O Y O U W A N T ?
……..
Performance

34. 1. Know exactly what fields are used and how
2. Measure field resolver performance
3. Detect breaking schema changes
……..
W H A T C A N Y O U G E T ?
Performance

37. apollodata.com/optics
Execution traces
Field latencies
Field usage
Optics

38. GraphQL-First workflow
Design your schema
Implement UI and backend in parallel
Get fine-grained production understanding

39. Sashko Stubailo
Apollo Open Source
@stubailo
Danielle Man
Apollo Services
@danimman
Huge thanks to the open source community!
Know anyone who wants to work on GraphQL
technology full time? We’re hiring!