Post on 14-Apr-2017
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 different environments
Native iOS app
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
Splitting into microservices, waterfall loading and multiple APIs
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 bottleneckAPI 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
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
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
A better API experience
T O O L S
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
C L I E N T S
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.
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is integrated tooling to understand your app.
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 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
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