10 Minutes for GraphQL | WeiYuan

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 [email protected] v123582.github.io