GraphQL: Enabling a new generation of API developer tools
1. Enabling a new generation of API developer tools
GraphQL
Sashko Stubailo
@stubailo
Apollo Open Source Lead, Meteor
2. Browser
Web Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F W E B A P P S
<HTML />
Sending HTML from a web
server to a browser
3. JavaScript UI
API Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F W E B A P P S
{ data }
Sending data from an API
server to a single-page app,
for better performance
4. JavaScript UI
API Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F A P P S
{ data }
Sending data from an API
server to multiple clients in
different environments
Native iOS app
6. CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F A P P S
Add an API gateway, now there’s
a development bottleneck
API gateway
7. Too many API
endpoints, one per UI
feature
API endpoints don’t
meet UI needs
Possible performance
or security issues to
ship faster
Takes too long to build
the API for a new
feature
Frontend team
develops API
Backend team
develops API
8. CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
T H E F U T U R E O F A P P S
The solution: GraphQL as the
translation layer between
frontend and backend
GraphQL API gateway
10. Flexible: “Make your own endpoints”
query Human {
human(id: "1000") {
name
height(unit: FOOT)
}
}
{
"human": {
"name": "Luke Skywalker",
"height": 5.6430448
}
}
• Choose from your API’s schema of types, fields, and arguments
• Computed fields, parameters, type conditions, and more
• Validates queries for you
11. Performance: Get what you need
• No need to hit multiple endpoints to
render one page
• Select only the fields that are needed
• Batch across all data requirements
• Eliminate unnecessary fetching with
fancy clients, such as Apollo and Relay
query Human {
human(id: "1000") {
name
avatar(size: SMALL)
friends {
name
}
}
}
12. Not just a tool: An open source spec
S E R V E R S
• Plain HTTP request
• React
• Angular
• Vue
• Polymer
• Native iOS/Android
C L I E N T S
• Node.js
• Ruby
• Python
• Scala
• Java
• Erlang
T O O L S
• API explorer (GraphiQL)
• Editor autocomplete
• Query validation
• Mocking
• Performance analysis
• Code generation
…and more
13. Think carefully about API needs
Hardcode special endpoints
User Interface Backend
W I T H R E S T
14. Ask for data
Get the data
User Interface Backend
W I T H G R A P H Q L
18. Static query analysis inside your code
Without running the code, find:
• Typos in fields
• Wrong arguments
• Deprecated fields
• Identify field usage
apollostack/eslint-plugin-graphql
19. Query autocompletion in your editor
We’re collaborating
with Facebook and
others on a new
language service to
power GraphQL
features across editors
and IDEs.
jimkyndemeyer/js-
graphql-intellij-plugin
20. Typed code generation: Swift, Java, TS, Flow
The above query combined with schema
information outputs the type definitions on
the right.
apollostack/apollo-codegen
22. 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
24. 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
GraphQL clients
25. Easy to bind data to your UI
Visit dev.apollodata.com for more
code snippets.
26. Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
27. Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
28. Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
30. Backend point of view
const HumanQuery = gql`
query Human {
human(id: "1000") {
name
height(unit: FOOT)
}
}
`;
Know exactly which parts of the code are using the fields and endpoints in the API,
at runtime and statically, to evaluate backend changes and ask UI devs
Query
human
Human
name
height
friends
31. Frontend point of view
query Human {
human {
name
weather
friends {
name
}
}
}
Get insight into query performance to fix loading problems without
diving into the backend, or have information to give backend team
query Human
33. A tool for GraphQL devs to understand their APIOptics
34. Conclusion
• GraphQL provides a shared language to
talk about data and queries
• A wealth of tools can make UI devs more
efficient than ever before
• UI developers get insights into
performance and caching
• API devs know who is using the data and
what to optimize for
35. Enabling a new generation of API
developer tools
GraphQL
Sashko Stubailo
@stubailo
Open Source Lead, Meteor
Want to work on GraphQL and
open source technology full time?
Email me at sashko@meteor.com!
Community docs and general information:
graphql.org
Our Medium publication, with tips and in-depth
articles about GraphQL:
dev-blog.apollodata.com
Apollo OSS and production tools: apollodata.com