Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything together

The Apollo and GraphQL stack

How everything fits together

Sashko StubailoOpen Source Lead, Apollo

@stubailo

The goal of the Apollo team and community:

Make building great applications simpler and more straightforward, with GraphQL.

Today's apps can be complex:

● Multiple frontends for different platforms● Multiple backends where data lives● Need for team coordination across different

languages, technologies, and contexts

In this presentation, I'd like to show you how Apollo and GraphQL can address these concerns.

Let's set the stage...

React

Android

iOS

Angular

MongoDB

Oracle

Salesforce

PostgreSQL

Microservice

What is GraphQL?

Schema definition Query language Community of tools

Why does GraphQL have so many benefits?

GraphQL organizes the mess of ad-hoc, underspecified endpoints.

What is Apollo?A set of projects designed to leverage GraphQL and work together

to create a great workflow.

Client-side tooling

● Apollo Client

● Apollo iOS

● Apollo Android

● Dev tools

● apollo-codegen

● eslint-plugin-graphql

Server-side tooling

● Apollo Server

● Graphql-tools

○ Schema creation

○ Mocking

○ Stitching

● Apollo Optics

Core benefits from Apollo + GraphQL

1. Easy, fast, and simple development2. Better maintenance, security, and coordination, especially

between teams3. Ultimate understanding into how your app data works

Let's look at them one by one.

1. Easy, fast, and simple development

GraphQL is easier than ever before

Apollo Client

Apollo Server

BackendBackend Backend

React

Existing REST API

● Today, it's just as fast and easy to build with GraphQL as any other API technology.

● Huge benefits from a flexible and declarative approach to data.

● Save time by describing what you need, not how to get it

A GraphQL API in just a few lines of codehttps://launchpad.graphql.com/v7mnw3m03

Easily attach GraphQL data to Reacthttps://codesandbox.io/s/jvlrl98xw3

Adding new features to your app

● This is where GraphQL really shines● In the UI, just add a new component● Use the existing fields in a new way, or add a few,

but no need to create an entire new endpoint● You can build on the work you've already done● GraphQL is like a component-based API

Migrating an existing app

Spend less time managing data

● Less time worrying about data: ○ Loading state tracking○ Normalizing and storing data○ Error handling○ Async request management

● Less time building new endpoints:○ Just build the types and fields you need

What's the Apollo team's goal here?

● We want to make sure the best option is also the easiest● You shouldn't have to decide between simple and complicated● Huge focus on documentation to make things easy● Constant improvement: Apollo Client 2.0 is 5x faster and 2x smaller

2. Safety and coordination

Check your API calls ahead of time

+

Use the interaction between GraphQL schema and queries.

Great article by Zach Silviera: https://zach.codes/supercharging-react-app-development/

eslint-plugin-graphql

apollo-codegen

Validating code across the stack

● Validate your frontend code is correct as you write it, using eslint-plugin-graphql and static type generation with apollo-codegen

● Use a CI setup to check against newly deployed schemas to ensure your frontend remains valid

● Find breaking changes in the schema with @entria/graphql-findbreakingchanges. Extra useful when you don't have the frontend code.

Mocking and Schema Stitching in graphql-tools

https://dev-blog.apollodata.com/graphql-tools-2-0-with-schema-stitching-8944064904a5

New workflows

● "GraphQL-First" - develop the schema in parallel with the frontend using mocking, then connect them

● Using schema stitching, develop different parts of your API in isolation, and combine with mocking to achieve a hybrid mocked/real API

● Eliminate unneeded blockers across teams

Why GraphQL?

● GraphQL is the only technology that combines a strongly-typed static schema with a specific query language

● No "select * from users"● Queries more often live next to UI code, not somewhere in a totally

different place, making it easier to connect UI+queries

3. Understanding your data

Understand the data available

● Same system for building and validating the API makes it complete reliable

● Opt-in systems like Swagger, or manually maintained API docs, are often incomplete or out of date

Query language

● No way to select * in GraphQL● You know exactly which fields are

being accessed● GraphQL is the only tech I know of that

combines a description of the API with a requirement to ask for specific fields

Track API field usage with Optics

What to do with this information?

● Know which fields to target for deprecation● Know where to start optimizing● Move from fields to operations to see what is affected

Fine-grained data requirements

● Without GraphQL, all similar requests for data blend together

● It's hard to trace back to UI performance

● You want to see information per query, not per endpoint

Optics and devtools

Similar information, across the stack: The future of Apollo

Per-field performance

Easy to know where to fix the problem

● Client side: Avoid fetching fields, split up queries, @defer● Server side: Make the server faster, do better caching

So what's the next step for GraphQL insights?

Apollo Tracing

Broad server support

● Node● Ruby● Scala (Sangria)● Java● Elixir● OCaml● Even Wordpress →

My hopes for the Apollo Tracing standard

● Performance data built into every GraphQL server● Visualize data in more places, such as GraphiQL or Apollo

Client Devtools● Support more kinds of information, for example underlying

backend timing● Support for schema stitching

Let's work together on it!

Zooming out

The "Apollo Platform"

Apollo Optics

Apollo Client

Apollo Server

Backend Backend Backend

React, etc

Developer tools, code analysis, and more

Apollo iOS/Android

Swift, Java

The future of the Apollo platform

● Continue to prioritize incremental adoption and integrate with every technology imaginable

● More tools and features that take advantage of GraphQL across the whole stack

● Build on more community-driven standards, like Tracing

Core benefits from Apollo + GraphQL

1. Easy, fast, and simple development2. Better maintenance, security, and coordination, especially

between teams3. Ultimate understanding into how your app data works

Now we see how using all of the tools together gets us these benefits.

Important: We can choose which ones we want.

Let's help people use GraphQL, together!

Talk to me if you have ideas about Apollo or GraphQL.

Sashko Stubailo

@stubailo

[email protected]

summit.graphql.com

REACTBRAZIL for 25% off