GraphQL: Enabling a new generation of API developer tools

Enabling a new generation of API developer tools
GraphQL
Sashko Stubailo
@stubailo
Apollo Open Source Lead, Meteor

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

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

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
diﬀerent environments
Native iOS app

CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
Splitting into microservices,
waterfall loading and
multiple APIs

C L I E N T
S E R V E R
Add an API gateway, now there’s
a development bottleneck
API gateway

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

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

Best of both worlds?
Let’s look at the benefits…

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

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
}
}
}

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

Think carefully about API needs
Hardcode special endpoints
User Interface Backend
W I T H R E S T

Ask for data
Get the data
User Interface Backend
W I T H G R A P H Q L

GraphiQL query editor
GraphQL APIs are inherently self-documenting

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

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

Typed code generation: Swift, Java, TS, Flow
The above query combined with schema
information outputs the type definitions on
the right.
apollostack/apollo-codegen

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

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

Easy to bind data to your UI
Visit dev.apollodata.com for more
code snippets.

Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.

P R O D U C T I O N
I N S I G H T S

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

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

Optics Built entirely with Apollo
and GraphQL!

A tool for GraphQL devs to understand their APIOptics

Conclusion
• GraphQL provides a shared language to
talk about data and queries
• A wealth of tools can make UI devs more
eﬀicient than ever before
• UI developers get insights into
performance and caching
• API devs know who is using the data and
what to optimize for

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

GraphQL: Enabling a new generation of API developer tools

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to GraphQL: Enabling a new generation of API developer tools

Similar to GraphQL: Enabling a new generation of API developer tools (20)

Recently uploaded

Recently uploaded (20)

GraphQL: Enabling a new generation of API developer tools