![Page 1: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/1.jpg)
Enabling a new generation of API developer tools
GraphQL
Sashko Stubailo @stubailo
Apollo Open Source Lead, Meteor
![Page 2: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/2.jpg)
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
![Page 3: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/3.jpg)
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
![Page 4: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/4.jpg)
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
![Page 5: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/5.jpg)
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
![Page 6: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/6.jpg)
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
![Page 7: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/7.jpg)
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
![Page 8: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/8.jpg)
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
![Page 9: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/9.jpg)
Best of both worlds?Let’s look at the benefits…
![Page 10: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/10.jpg)
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
![Page 11: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/11.jpg)
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 } } }
![Page 12: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/12.jpg)
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
![Page 13: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/13.jpg)
Think carefully about API needs
Hardcode special endpoints
User Interface Backend
W I T H R E S T
![Page 14: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/14.jpg)
Ask for data
Get the data
User Interface Backend
W I T H G R A P H Q L
![Page 15: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/15.jpg)
A better API experience
![Page 16: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/16.jpg)
T O O L S
![Page 17: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/17.jpg)
GraphiQL query editor
GraphQL APIs are inherently self-documenting
![Page 18: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/18.jpg)
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
![Page 19: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/19.jpg)
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
![Page 20: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/20.jpg)
Typed code generation: Swift, Java, TS, Flow
The above query combined with schema information outputs the type definitions on the right.
apollostack/apollo-codegen
![Page 21: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/21.jpg)
![Page 22: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/22.jpg)
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
![Page 23: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/23.jpg)
C L I E N T S
![Page 24: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/24.jpg)
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
![Page 25: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/25.jpg)
Easy to bind data to your UI
Visit dev.apollodata.com for more code snippets.
![Page 26: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/26.jpg)
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is integrated tooling to understand your app.
![Page 27: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/27.jpg)
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is integrated tooling to understand your app.
![Page 28: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/28.jpg)
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is integrated tooling to understand your app.
![Page 29: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/29.jpg)
P R O D U C T I O N I N S I G H T S
![Page 30: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/30.jpg)
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
![Page 31: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/31.jpg)
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
![Page 32: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/32.jpg)
Optics Built entirely with Apollo and GraphQL!
![Page 33: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/33.jpg)
A tool for GraphQL devs to understand their APIOptics
![Page 34: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/34.jpg)
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
![Page 35: GraphQL: Enabling a new generation of API developer tools](https://reader034.vdocuments.us/reader034/viewer/2022051502/58f0134d1a28ab4e3c8b4569/html5/thumbnails/35.jpg)
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 [email protected]!
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