Navigating Your Transition to GraphQLA GraphQL-first approach to improving your API

Sashko Stubailo Tech Lead

Apollo Open Source

Danielle Man Developer

Apollo Services

Who are we?

• We build and maintain tools for the GraphQL community

• Excited about the developer experience enabled by GraphQL

• We went from 0 to GraphQL in two production apps, talked to many people who did the same

• We build new apps and features fast with a GraphQL-first workflow

apollodata.com

github.com/apollostack

Announced and open-sourced

July 2015

Production ready, new site

September 2016

Great tools, best practices, efficient

workflow

The future

Initial design at Facebook

2012

Looking back…

GraphQL First Development

Post

User

Comment

1. Design API schema Contract between frontend and backend with a shared schema language

2. Build UI and backend Parallelize with mocking, develop component-based UIs with GraphQL containers

3. Run in production Static queries make loading predictable, schema tells you which fields are being used

query Human

Design your schema1

• Database schema is not always relevant to frontend developers

• Apps are getting more complex, not all of your data is in a database!

D B S C H E M A

• Contract between frontend and backend

• Declares relationships across backend data sources

• Incrementally adopt - get the API you always wanted!

# A comment submitted by a usertype Comment { # The SQL ID of this comment id: Int!

# The GitHub user who posted the comment postedBy: User!

# The text of the comment content: String!

# The repository which this comment is about repoName: String!}

G R A P H Q L S C H E M A

GraphQL requests Backend fetches

Incremental GraphQL Adoption

Data-Layer RedesignCombine Queries

Simplify Development

Thousands of active usersGalaxy

Client

Elastic Search MongoDBAmazon Dynamo

DB

C L I E N T

A W S

Galaxy Server

Apollo Client

GraphQL Server

GraphQL from the Beginning

Schema ContractParallelize Development

Schema Ownership?

Built from scratch in under 3 monthsOptics

B A C K E N D F R O N T E N D

Design for different types of apps

Don’t overfit to specific features Computed fields live on the server

Components ask for exactly what they need

Generic Backend-for-

Streamline your Workflow2

B U I L D I N G A P P S

Product Design Engineering

R E A L I T Y

I D E A L

Change database

Rewrite mocked data for all endpoints using it

Change schema

Update one resolver

P E R - E N D P O I N T P E R - R E S O L V E RRest Mocking GraphQL Mocking

Component-First

Development

1. Painlessly adapted to schema changes

2. Connected front-end to back-end in under 2 days

3. Developed full app in less than 3 months

O U R E X P E R I E N C E

graphql-tools

20 contributors - thanks @DxCx, @sebastienbarre, @nicolaslopezj

Implement a Node.js GraphQL schema using the schema language directly, with support for all GraphQL features

github.com/apollostack/graphql-tools

graphql-tools

One-step data mocking based on schema types, customizable as much as you need.

Instrumental to GraphQL First development workflow.

github.com/apollostack/graphql-tools

graphql-toolsgithub.com/apollostack/graphql-tools

Find new workflows

Managing GraphQL Development At Scale - Nick Nance

Develop new features together

Pull request by @itajaja

Load Data with Queries 3

GraphQL clients

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

Incremental adoption for the client

Compatible Works with your existing client-side infrastructure

Un-opinionated Design your own schema, fit into your existing data model

Component-first Use GraphQL just one component at a time, test and reuse components

Post

User

Comment

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

Code generation for result types

Write GraphQL queries

Get static typing based on schema

• Fully featured in Apollo-iOS today • Community working on TypeScript and

Flow on apollo-codegen • Work with the easy to learn GraphQL

query language, get all of the benefits of native integration

github.com/apollostack/apollo-ios github.com/apollostack/apollo-codegen

Big thanks to @rricard for working on TS and Flow!

Apollo Client 0.5 dev.apollodata.com

Out today, big thanks to over 100 contributors, especially @jbaxleyiii, @rricard, @johnthepink, @abhiaiyer91, @kamilkisiela

Apollo Client 0.5

• 100% GraphQL spec support: if you can type it in GraphiQL, it will work. • Fully featured: Queries, mutations, fragments, optimistic UI, pagination, and more. • Tooling friendly: Redux dev tools, static analysis, and persisted queries. • Compatible: Use it with React, React Native, Angular 1, Angular 2, Vue.js, etc. • Flexible and customizable: Fits into any architecture, customizable caching. • Futuristic: Subscriptions and custom resolvers, ideas coming from the community.

The best part is — it’s just GraphQL.

GraphQL client conclusions

Use a caching client Get better UI consistency and avoid loading data you already have.

Incremental adoption and compatibility Important as you move older apps over to GraphQL, and if your tech choices change.

Static queries Predictable loading, better dev tools, clearer server insights, eventually move to persisted queries for performance and security.

Monitor in Production 4

1. Understand endpoint usage

2. Measure endpoint timing

3. Monitor server load

W H A T D O Y O U W A N T ?

……..

Performance

1. Know exactly what fields are used and how

2. Measure field resolver performance

3. Detect breaking schema changes

……..

W H A T C A N Y O U G E T ?

Performance

apollodata.com/optics

Execution traces Field latencies

Field usage

Optics

GraphQL-First workflow

Design your schema

Implement UI and backend in parallel

Get fine-grained production understanding

Sashko Stubailo Apollo Open Source

@stubailo

Danielle Man Apollo Services

@danimman

Huge thanks to the open source community!

Know anyone who wants to work on GraphQL technology full time? We’re hiring!