What → Why → How → Implement
GraphQL = A query language for your API ≠ SQL
Slide 4
Slide 4 text
What → Why → How → Implement
GraphQL = A query language for your API
GraphQL is a query language for APIs and a runtime for fulfilling
those queries with your existing data. GraphQL provides a
complete and understandable description of the data in your API,
gives clients the power to ask for exactly what they need and
nothing more, makes it easier to evolve APIs over time, and
enables powerful developer tools.
Slide 5
Slide 5 text
What → Why → How → Implement
GraphQL = A query language for your API
GraphQL is a query language for APIs and a runtime for fulfilling
those queries with your existing data. GraphQL provides a
complete and understandable description of the data in your API,
gives clients the power to ask for exactly what they need and
nothing more, makes it easier to evolve APIs over time, and
enables powerful developer tools.
① Describe your data ② Ask for what you want
Slide 6
Slide 6 text
What → Why → How → Implement
GraphQL = A query language for your API
GraphQL is a query language for APIs and a runtime for fulfilling
those queries with your existing data. GraphQL provides a
complete and understandable description of the data in your API,
gives clients the power to ask for exactly what they need and
nothing more, makes it easier to evolve APIs over time, and
enables powerful developer tools.
an API defines how a client can load data from a server
① Describe your data ② Ask for what you want
Slide 7
Slide 7 text
What → Why → How → Implement
GraphQL = A query language for your API
① It lets the client specify exactly what data it needs.
② It uses a type system to describe data.
③ It makes it easier to aggregate data from multiple sources.
an API defines how a client can load data from a server
Slide 8
Slide 8 text
What → Why → How → Implement
GraphQL is the better REST
Slide 9
Slide 9 text
What → Why → How → Implement
Slide 10
Slide 10 text
What → Why → How → Implement
GraphQL is the better REST
Resources
URL Route
Handle Controller
Multiple Endpoint
Graph
Schema
Resolver
One Endpoint
Slide 11
Slide 11 text
What → Why → How → Implement
Top Reasons to Use GraphQL
Slide 12
Slide 12 text
What → Why → How → Implement
History, Context & Adoption
① Increased mobile usage creates need for efficient data loading
② Variety of different frontend frameworks and platforms
③ Fast development & expectation for rapid feature development
Slide 13
Slide 13 text
What → Why → How → Implement
Top Reasons to Use GraphQL
① No more Over and Less - Overfetching and Underfetching
② Benefits of a Schema & Type System
③ Rich open-source ecosystem and an amazing community
Slide 14
Slide 14 text
What → Why → How → Implement
Thinking in graphs
Slide 15
Slide 15 text
What → Why → How → Implement
Thinking in graphs
Slide 16
Slide 16 text
What → Why → How → Implement
Slide 17
Slide 17 text
What → Why → How → Implement
Slide 18
Slide 18 text
What → Why → How → Implement
GraphQL 由幾個部分所組成
- TypeDefs
- Resolvers
- Queries (Query、Mutation)
- Schema
What → Why → How → Implement
GraphQL 由幾個部分所組成
- TypeDefs
- Resolvers
- Queries (Query、Mutation)
- Schema
➞ 定義資料 & Query 的型態
➞ 定義操作資料的⽅方式
➞ 定義 API 的抽象層
➞ 資料操作的最上層
API contain Schema contain Queries contain TypeDefs and Resolvers
Slide 21
Slide 21 text
What → Why → How → Implement
TypeDefs
type Person {
name: String!
age: Int!
}
type Post {
title: String!
author: Person!
}
type Person {
name: String!
age: Int!
posts: [Post!]!
}
type Query {
person: person!
persons: [person]
}
type Mutation {
}
Slide 22
Slide 22 text
What → Why → How → Implement
Resolvers
➞ how to fetch data
Slide 23
Slide 23 text
What → Why → How → Implement
Fetching Data with Queries
{
Persons {
name
},
Persons(last: 1) {
name
}
}
{
"data": {
"Persons": [
{
"name": "Johnny"
},
{
"name": "Sarah"
},
],
"Persons": [
{
“name": "Sarah"
Slide 24
Slide 24 text
What → Why → How → Implement
Writing Data with Mutations
mutation {
create(name: "Bob",
age: 36) {
id
}
}
{
"data": {
"create": {
"id": “cjklyey7p91",
}
}
}
Slide 25
Slide 25 text
What → Why → How → Implement
Realtime Updates with Subscriptions
➞ request-response-cycle
Slide 26
Slide 26 text
What → Why → How → Implement
Generally, a schema is simply a collection of GraphQL types.
However, when writing the schema for an API, there are some
special root types.
Schema
type Query {
person: person!
persons: [person]
}
type Mutation {
}
Slide 27
Slide 27 text
What → Why → How → Implement
Server based on Schema and Resolvers
① GraphQLObjectType + GraphQLSchema
② buildSchema + typeDefs + rootValue
③ makeExecutableSchema + typeDefs + resolvers
④ ApolloServer + typeDefs + resolvers
⑤ GraphQLServer + typeDefs + resolvers
Slide 28
Slide 28 text
What → Why → How → Implement
Server based on Schema and Resolvers
① GraphQLObjectType + GraphQLSchema
② buildSchema + typeDefs + rootValue
③ makeExecutableSchema + typeDefs + resolvers
④ ApolloServer + typeDefs + resolvers
⑤ GraphQLServer + typeDefs + resolvers
➞ graphql
➞ graphql
➞ graphql-tools
➞ apollo-server
➞ graphql-yoga
Slide 29
Slide 29 text
What → Why → How → Implement
① GraphQLObjectType + GraphQLSchema
➞ link
Slide 30
Slide 30 text
What → Why → How → Implement
② buildSchema + typeDefs + rootValue
➞ link
Slide 31
Slide 31 text
What → Why → How → Implement
③ makeExecutableSchema + typeDefs + resolvers
➞ link
Slide 32
Slide 32 text
What → Why → How → Implement
④ ApolloServer + typeDefs + resolvers
➞ link
Slide 33
Slide 33 text
What → Why → How → Implement
⑤ GraphQLServer + typeDefs + resolvers
➞ link
Slide 34
Slide 34 text
What → Why → How → Implement
3 Use Cases 3 Architecture
① GraphQL server with a connected database
② GraphQL layer that integrates existing systems
③ Hybrid approach with connected database and
integration of existing system
Slide 35
Slide 35 text
What → Why → How → Implement
3 Use Cases 3 Architecture
① GraphQL server with a
connected database
Slide 36
Slide 36 text
What → Why → How → Implement
3 Use Cases 3 Architecture
② GraphQL layer that
integrates existing systems
Slide 37
Slide 37 text
What → Why → How → Implement
3 Use Cases 3 Architecture
③ Hybrid approach with
connected database and
integration of existing system
Slide 38
Slide 38 text
What → Why → How → Implement
GraphQL 的前端與後端
Slide 39
Slide 39 text
What → Why → How → Implement
GraphQL 的前端與後端
① A GraphQL server that serves your API.
② A GraphQL client that connects to your endpoint.
➞ react + Apollo-client can replace the redux store flow
Slide 40
Slide 40 text
What → Why → How → Implement
➞ Client: Apollo Client、Relay
➞ Server: express-graphql、 apollo-server、
graphql-yoga
Slide 41
Slide 41 text
What → Why → How → Implement
➞ Client: Apollo Client、Relay
➞ Cache Gateway: Apollo Engine
➞ Server: express-graphql、 apollo-server、
graphql-yoga
➞ Database Layer: Prisma、join-monster
Slide 42
Slide 42 text
What → Why → How → Implement → Then ?
Slide 43
Slide 43 text
Thanks for listening.
2017/08/09 (Thus.) 10 Minutes for GraphQL
Wei-Yuan Chang
[email protected]
v123582.github.io