10 Minutes for GraphQL | WeiYuan

10 Minutes for GraphQL

Transcript

1. 10 Minutes for GraphQL WeiYuan
2. What → Why → How → Implement
3. What → Why → How → Implement GraphQL = A query language for your API ≠ SQL
4. 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.
5. 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
6. 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
7. 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
8. What → Why → How → Implement GraphQL is the better REST
9. What → Why → How → Implement
10. What → Why → How → Implement GraphQL is the better REST Resources URL Route Handle Controller Multiple Endpoint Graph Schema Resolver One Endpoint
11. What → Why → How → Implement Top Reasons to Use GraphQL
12. 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
13. 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
14. What → Why → How → Implement Thinking in graphs
15. What → Why → How → Implement Thinking in graphs
16. What → Why → How → Implement
17. What → Why → How → Implement
18. What → Why → How → Implement GraphQL 由幾個部分所組成 - TypeDefs - Resolvers - Queries (Query、Mutation) - Schema
19. What → Why → How → Implement GraphQL 由幾個部分所組成 - TypeDefs - Resolvers - Queries (Query、Mutation) - Schema ➞ 定義資料 & Query 的型態 ➞ 定義操作資料的⽅方式 ➞ 定義 API 的抽象層 ➞ 資料操作的最上層
20. What → Why → How → Implement GraphQL 由幾個部分所組成 - TypeDefs - Resolvers - Queries (Query、Mutation) - Schema ➞ 定義資料 & Query 的型態 ➞ 定義操作資料的⽅方式 ➞ 定義 API 的抽象層 ➞ 資料操作的最上層 API contain Schema contain Queries contain TypeDefs and Resolvers
21. 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 { }
22. What → Why → How → Implement Resolvers ➞ how to fetch data
23. What → Why → How → Implement Fetching Data with Queries { Persons { name }, Persons(last: 1) { name } } { "data": { "Persons": [ { "name": "Johnny" }, { "name": "Sarah" }, ], "Persons": [ { “name": "Sarah"
24. What → Why → How → Implement Writing Data with Mutations mutation { create(name: "Bob", age: 36) { id } } { "data": { "create": { "id": “cjklyey7p91", } } }
25. What → Why → How → Implement Realtime Updates with Subscriptions ➞ request-response-cycle
26. 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 { }
27. What → Why → How → Implement Server based on Schema and Resolvers ① GraphQLObjectType + GraphQLSchema ② buildSchema + typeDefs + rootValue ③ makeExecutableSchema + typeDefs + resolvers ④ ApolloServer + typeDefs + resolvers ⑤ GraphQLServer + typeDefs + resolvers
28. 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
29. What → Why → How → Implement ① GraphQLObjectType + GraphQLSchema ➞ link
30. What → Why → How → Implement ② buildSchema + typeDefs + rootValue ➞ link
31. What → Why → How → Implement ③ makeExecutableSchema + typeDefs + resolvers ➞ link
32. What → Why → How → Implement ④ ApolloServer + typeDefs + resolvers ➞ link
33. What → Why → How → Implement ⑤ GraphQLServer + typeDefs + resolvers ➞ link
34. 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
35. What → Why → How → Implement 3 Use Cases 3 Architecture ① GraphQL server with a connected database
36. What → Why → How → Implement 3 Use Cases 3 Architecture ② GraphQL layer that integrates existing systems
37. What → Why → How → Implement 3 Use Cases 3 Architecture ③ Hybrid approach with connected database and integration of existing system
38. What → Why → How → Implement GraphQL 的前端與後端
39. 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
40. What → Why → How → Implement ➞ Client: Apollo Client、Relay ➞ Server: express-graphql、 apollo-server、 graphql-yoga
41. What → Why → How → Implement ➞ Client: Apollo Client、Relay ➞ Cache Gateway: Apollo Engine ➞ Server: express-graphql、 apollo-server、 graphql-yoga ➞ Database Layer: Prisma、join-monster
42. What → Why → How → Implement → Then ?
43. Thanks for listening. 2017/08/09 (Thus.) 10 Minutes for GraphQL Wei-Yuan Chang v123582@gmail.com v123582.github.io