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



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.

http://dev.apollodata.com

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

mailto:[email protected]

http://apollodata.com

GraphQL: Enabling a new generation of API developer tools

Technology

Transcript of GraphQL: Enabling a new generation of API developer tools