This document provides an introduction and overview of GraphQL. It discusses how GraphQL can help speed up development and reduce latency compared to REST APIs. GraphQL uses a single endpoint and allows clients to request specific data in a query rather than predefined endpoints. It also describes how GraphQL uses types and schemas to define the structure of data and queries, as well as resolvers to retrieve the data. Live coding examples are shown using React and Node. Advanced GraphQL features like interfaces, custom scalars, and code generation are also mentioned.

1. Introduction to GraphQL
@mdlavin from @LifeOmic
RVA Javascript 2019 - @mdlavin

2. Why GraphQL? Seriously.
I’m not selling GraphQL tools and
I’ve seen both in my development
Speed up development
Reduce web/mobile latency
RVA Javascript 2019 - @mdlavin

3. Why GraphQL?
On the client
• Great development tools for
prototyping
On the server
• No need to implement one-off
endpoints
• Great frameworks
Speed up development
Reduce web/mobile latency
RVA Javascript 2019 - @mdlavin

4. Why GraphQL?
On the client
• Request just the data needed
• Avoid multiple requests
On the server
• Compute and serialize only want
the client requests
Speed up development
Reduce web/mobile latency
RVA Javascript 2019 - @mdlavin

5. Compared to REST
REST
• Many URLs
• The URL that is requested designates
the data to be returned
• Fixed response attributes
• The result is always the same for each
type of URL*
GraphQL
• Single URL
• The same URL is used for all request
requests
• Dynamic response attributes
• The result includes only the data that is
requested
RVA Javascript 2019 - @mdlavin

6. Queries
• The client describes what it wants
• Either a Query or a Mutation
RVA Javascript 2019 - @mdlavin

7. Sample Queries
Request
POST /graphql
query GetBreweries {
breweries { name }
}
Response
{
data: {
breweries: [
{ name: “The Answer” },
{ name: “Triple Crossing” }
]
}
errors: []
}
RVA Javascript 2019 - @mdlavin

8. Schemas
• The API contract between the client and server
• Strictly typed
• Facilitates great tools
RVA Javascript 2019 - @mdlavin

9. Sample Schema
type Brewery {
name: String!
}
type Query {
breweries: [Brewery!]!
breweryByName(name: String!): Brewery
}
RVA Javascript 2019 - @mdlavin

10. Types
• The building blocks of a Schema
• Complex Types
RVA Javascript 2019 - @mdlavin

11. Samples Types
type Brewery {
name: String!
taps: Int!
beers(type Type): [Beer!]!
}
enum Type {
IPA SOUR STOUT
}
type Beer {
id: ID!
name: String!
ABV: Float!
type: Type
}
RVA Javascript 2019 - @mdlavin

12. Resolvers
• Teach the server how to compute each value
• Implementation detail
• Structure allows optimal composition and computation
22 November 2019

13. Sample Resolver
{
beers: async (parent: Brewery, args: Args, context: Context) => {
const beers = await context.storage.lookupBeers(parent.id);
const filteredBeers = beers.filter(beer => beer.type === args.type)
return filteredBeers;
}
}
RVA Javascript 2019 - @mdlavin

14. Live Coding!
React + Node built with Apollo
RVA Javascript 2019 - @mdlavin

15. Advanced features
Queries
Deferred results
Partial results
Types
Interfaces
Custom scalars
Schemas
Directives
Stitching
Codegen
GraphQL + TypeScript
RVA Javascript 2019 - @mdlavin

16. Questions?
.. or in person after
…or on twitter @mdlavin
RVA Javascript 2019 - @mdlavin