GraphQL can be one of the best ways to make your product development more fun and productive. In this presentation I talk about how GraphQL makes your life simpler, and how to write and deploy a GraphQL API with Apollo Server 2.0 and serverless deployment via Netlify Functions.

1. Serverless GraphQL for Product
Developers
Take your productivity to the next level, on top
of your existing backends.
Sashko Stubailo, @stubailo
Open Source at Apollo, apollographql.com

2. Data management
is more important
than ever
UI
Data management
API
Backends and
storage
InternetNow that apps are built with
APIs and thick clients, it’s not
enough to just generate the
right HTML per-request.

3. From “How GraphQL Replaces Redux” by Mark Johnson on Medium

4. Multiple platforms and services
Backend Backend Backend Backend Backend
iOS Android Web VR Assistant

5. Loads of complexity in frontend tooling
Reducers
Sagas
Advanced requirements Disparate tools
Middleware
Selectors
Action creators
Thunks
Promises
Observables
Local state
Server-side rendering
Caching
Pagination
Offline
Optimistic UI
Error handling
Realtime
Mutations
Loading states

6. Apollo and GraphQL organize your data
Backend Backend Backend Backend Backend
iOS Android Web VR Assistant

7. Simplify frontend code
Reducers
Sagas
Middleware
Selectors
Action creators
Thunks
Promises
Observables
Local state
Server-side rendering
Caching
Pagination
Offline
Optimistic UI
Error handling
Realtime
Mutations
Loading states
const GET_DOGS = gql`
query {
dogs {
id
breed
displayImage
}
}
`;
const Feed = () => (
<Query query={GET_DOGS}>
{({ loading, error, data }) => {
if (loading) return <Fetching />;
if (error) return <Error />;
return <DogList data={data.dogs} />;
}}
</Query>
);

8. From “Reducing our Redux code with React Apollo” by Peggy Rayzis on Medium

9. How does GraphQL provide these benefits?
1. Schema describes
available data
2. Queries describe
requirements
3. Tools improve
productivity
type Dog {
id: String!
breed: String!
displayImage: String
images: [Image]
subbreeds: [String]
}
query {
dogs {
id
breed
displayImage
}
}
<Query query={X}>
({ data, error, loading }) => {
...
}
</Query>

10. OK, so how do we get this
in real life?

11. Put GraphQL over your
existing APIs
Continue to use your existing backends
Don’t re-implement business logic or
permissions rules
Make the translation layer as thin as possible, so
it doesn’t become a bottleneck
Diagram from Medium’s blog post:

12. GraphQL is a client-focused API
We’ve seen teams have the most success
when the API directly serves the needs of the
frontend
Empower frontend developers to add fields
as needed
Implement your GraphQL API in JavaScript
This means we need the GraphQL API to be
simple and fast to develop...

13. Apollo Server 2.0
➔ Dramatically simpler API
➔ Production optimizations built in
➔ Runs everywhere with the same code

14. Let’s implement GraphQL over REST for puppy photos

15. Define the
schemaUse the concise and readable
GraphQL schema language
const typeDefs = gql`
type Query {
dogs: [Dog]
dog(breed: String!): Dog
}
type Dog {
id: String!
breed: String!
displayImage: String
images: [Image]
subbreeds: [String]
}
type Image {
url: String!
id: String!
}
`;

16. Define a REST
data source
Caching and deduplication of
the API is handled for you
class DogAPI extends RESTDataSource {
baseURL = "https://dog.ceo/api";
async getDogs() {
const dogs = await this.get(`breeds/list/all`);
return _.map(dogs, createDog);
}
async getDisplayImage(breed) {
return this.get(`breed/${breed}/images/random`);
}
// ...
}

17. Write resolvers
Map data source methods to
the schema
const resolvers = {
Query: {
dogs: async (root, args, { dataSources }) => {
return dataSources.dogAPI.getDogs();
},
dog: async (root, { breed }, { dataSources }) => {
return dataSources.dogAPI.getDog(breed);
}
},
Dog: {
displayImage: async ({ breed }, args, { dataSources }) => {
return dataSources.dogAPI.getDisplayImage(breed);
},
images: async ({ breed }, args, { dataSources }) => {
return dataSources.dogAPI.getImages(breed);
}
}
};

18. Put them together
Now you’ve got a
production-ready GraphQL API
const server = new ApolloServer({
typeDefs,
resolvers,
dataSources: () => ({
dogAPI: new DogAPI()
})
});

19. Demo: Running locally

20. OK, so where do we deploy this layer?
Since we want to think of this as a thin translation layer that makes
our development more productive, we don’t want to worry about
managing and scaling servers or containers…

21. Serverless is a
perfect fit for
GraphQL APIs!
Apollo Server runs on every
serverless provider:
➔ Lambda
➔ Azure Functions
➔ Google Cloud
UI
Apollo Client
Backends and
storage
Serverless
ApolloServer

22. Deploying UI and functions on Netlify
UI code
API code
CDN
AWS Lambda

23. Demo: Production deploy

24. Reducing friction in
API deployment
Netlify has made it not just easy to deploy
the API, but part of the same workflow as
frontend code
Deploy previews you’re used to for
frontend code for the API as well
Over time, I hope there are more options
that make API deployment accessible to
product developers

25. What about
monitoring?
You don’t want to just get performance
reports for a single endpoint.
You want to see the data in terms of how
you implemented the schema.
The fine-grained nature of GraphQL
enables you to see detailed information
about how your API is doing.

26. Apollo Engine: Tooling for GraphQL
➔ Monitor GraphQL resolvers for usage statistics,
performance, and errors
➔ Track schema changes over time
➔ Integrate into Slack, GitHub, Datadog, and more

27. Keep track of your
schema

28. GraphQL-focused performance tracing

29. Demo: Opening a PR with
a change
Deploying a new change is so easy, we’re gonna do it
right now! We’ll look for:
➔ Netlify deploy preview for frontend and
backend
➔ Engine schema check and diff

30. What about caching? The best option is to cache the underlying
REST calls, since those are already set up
to work with caching.
Serverless architectures don’t make it
easy to persist data across requests, but
we’ve got an answer!

31. Data Sources
➔ Modular pattern for accessing REST from GraphQL
➔ Built-in deduplication and data pipeline
➔ Caching built in with support for Redis and Memcached

32. Remember our
data source?
class DogAPI extends RESTDataSource {
baseURL = "https://dog.ceo/api";
async getDogs() {
const dogs = await this.get(`breeds/list/all`);
return _.map(dogs, createDog);
}
async getDisplayImage(breed) {
return this.get(`breed/${breed}/images/random`);
}
// ...
}

33. Caching backend
requests with
serverless
Apollo Server data sources
integrate with Redis, and you
can use any cloud provider
Reduce backend API requests
and speed up response times
UI
Apollo Client
Backends and
storage
Serverless
ApolloServer
Redis provider

34. Zooming out: Super productive development
Frontend
React for UI, Apollo for state
management, Netlify to deploy
API
Apollo Server 2.0 for GraphQL, Lambda with
Netlify functions for deployment, and Data
Sources + Redis for caching
Tooling
Apollo Engine for
performance tracing and
schema versioning

35. Improving your API and data
management will dramatically
increase velocity.
Key premise:

36. Reaching for the ideal
developer experience
React, Apollo, and serverless
technologies are coming together into a
simple and modern set of tools for:
➔ Data management
➔ API development
➔ API performance
➔ Deployment
➔ PR checks and previews
➔ Version tracking
➔ Performance tracking
What’s next? Two things...

37. They say
JavaScript can run
anywhere...
➔ Browser
➔ Mobile
➔ Server
➔ Cloud functions
➔ Google spreadsheets
And it turns out, now also
inside CDNs!

38. Apollo Server on
the edge
Bring your API and cache right
to your users
apollographql.com/edge
UI
Apollo Client
Backends and
storage
CloudFlare workers in
151 data centers
CDN cache
UI
Apollo Client

39. Next: Schema-based tooling
➔ The GraphQL schema describes the data available
➔ Engine keeps track of changes
➔ How can we use all this info to help you write your code?

40. Coming soon: Apollo for Visual Studio Code

41. Run queries and even realtime subscriptions

42. Get performance stats from your API as you type

43. A really productive API experience

44. We’re making using and developing
APIs fun and productive.
And serverless is going to be a big part of that.
github.com/apollographql • apollographql.com • @apollographql