GraphQL in 2020

A presentation at Geekle - React.js Global Online Summit 2020 in September 2020 in by Charly Poly

Slide 1

Slide 1

GraphQL in 2020 Photo by Nicolas Gras 1

Slide 2

Slide 2

Who am I GraphQL in 2020 Charly POLY @whereischarly 2

Slide 3

Slide 3

Who am I GraphQL in 2020 Charly POLY Lead Sr. Software Engineer at Double @whereischarly 2

Slide 4

Slide 4

Who am I GraphQL in 2020 Charly POLY Lead Sr. Software Engineer at Double Big fan and user of GraphQL since 4 years @whereischarly 2

Slide 5

Slide 5

GraphQL in 1’ GraphQL in 2020

  1. Schema 1 2 3 4 5 6 7 8 9 type Project { name: String tagline: String contributors: [User] } type Query { project(name: String!): Project } 3

Slide 6

Slide 6

GraphQL in 1’ GraphQL in 2020

  1. Schema 1 2 3 4 5 6 7 8 9 type Project { name: String tagline: String contributors: [User] } type Query { project(name: String!): Project } 1 const resolvers = { Query: { 2 project: (parent, args, context, info) => ( 3 projects.find(p => p.name === args.name) 4 ), 5 }, 6 7 };
  2. Resolvers 3

Slide 7

Slide 7

GraphQL in 1’ GraphQL in 2020

  1. Schema 1 2 3 4 5 6 7 8 9 type Project { name: String tagline: String contributors: [User] } type Query { project(name: String!): Project } 1 const resolvers = { Query: { 2 project: (parent, args, context, info) => ( 3 projects.find(p => p.name === args.name) 4 ), 5 }, 6 7 };
  2. Resolvers 1 { project(name: “GraphQL”) { 2 tagline 3 } 4 5 } 3. Query 3

Slide 8

Slide 8

GraphQL in 1’ GraphQL in 2020

  1. Schema
  2. JSON data 1 2 3 4 5 6 7 8 9 1 { “project”: { 2 “tagline”: “A query language for APIs” 3 } 4 5 } type Project { name: String tagline: String contributors: [User] } type Query { project(name: String!): Project } 1 const resolvers = { Query: { 2 project: (parent, args, context, info) => ( 3 projects.find(p => p.name === args.name) 4 ), 5 }, 6 7 };
  3. Resolvers 1 { project(name: “GraphQL”) { 2 tagline 3 } 4 5 } 3. Query 3

Slide 9

Slide 9

GraphQL in 2015 GraphQL in 2020 initial public release server: graphql@0.0.2 (+ express) client: relay@0.1.0 @whereischarly 4 . 1

Slide 10

Slide 10

GraphQL in 2015 GraphQL in 2020 initial public release server: graphql@0.0.2 (+ express) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @whereischarly import { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString, } from ‘graphql’; var schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: ‘RootQueryType’, fields: { hello: { type: GraphQLString, resolve() { return ‘world’; }, }, }, }), }); 4 . 2

Slide 11

Slide 11

GraphQL in 2016 GraphQL in 2020 Ecosystem awakening graphql-tools apollo-server apollo-client (+ react-apollo) graphiql Libraries to boost development @whereischarly 5 . 1

Slide 12

Slide 12

GraphQL in 2016 GraphQL in 2020 Ecosystem awakening graphql-tools 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 @whereischarly import { makeExecutableSchema } from ‘@graphql-tools const resolvers = // const typeDefs = # ... schema { query: Query mutation: Mutation }; const executableSchema = makeExecutableSchema({ typeDefs, resolvers, }); 5 . 2

Slide 13

Slide 13

GraphQL in 2016 - intermission @whereischarly GraphQL in 2020 6

Slide 14

Slide 14

GraphQL in 2018 - intermission @whereischarly GraphQL in 2020 7 . 1

Slide 15

Slide 15

GraphQL in 2018 - intermission @whereischarly GraphQL in 2020 7 . 2

Slide 16

Slide 16

GraphQL in 2018 - intermission GraphQL in 2020 Build smooth user-experiences “Ask for what you want”, optimistic UIs @whereischarly 7 . 2

Slide 17

Slide 17

GraphQL in 2018 - intermission GraphQL in 2020 Build smooth user-experiences “Ask for what you want”, optimistic UIs Solve data-complexity issue on front-end side Apollo cache, typed mutations, DDD APIs @whereischarly 7 . 2

Slide 18

Slide 18

GraphQL in 2018 - intermission GraphQL in 2020 Build smooth user-experiences “Ask for what you want”, optimistic UIs Solve data-complexity issue on front-end side Apollo cache, typed mutations, DDD APIs Microservices orchestration Apollo schema stitching Apollo Federation @whereischarly ➡ 7 . 2

Slide 19

Slide 19

GraphQL in 2018 GraphQL in 2020 Ecosystem on the rise Libraries: Apollo, Relay Concepts: Schema stitching, client cache, optimistic UI patterns Services: AWS App Sync, Apollo Optics, Prisma Faster and more robust development @whereischarly 8 . 1

Slide 20

Slide 20

GraphQL in 2018 GraphQL in 2020 First public GraphQL APIs @whereischarly 8 . 2

Slide 21

Slide 21

GraphQL in 2019 GraphQL in 2020 State of JS 2019 @whereischarly 9

Slide 22

Slide 22

GraphQL in 2020? @whereischarly GraphQL in 2020 10

Slide 23

Slide 23

GraphQL in 2020? GraphQL in 2020 GraphQL Code Generator GraphQL modules graphqless Hasura GraphQL Mesh AWS AppSync @whereischarly Relay Apollo Federation GraphQL Engine GraphCMS Prisma DGraph urql Gatsby Apollo Platform Hasura Apollo State management TypeGraphQL 10

Slide 24

Slide 24

GraphQL in 2020? GraphQL in 2020 GraphQL Code Generator GraphQL modules graphqless Hasura GraphQL Mesh AWS AppSync @whereischarly Relay Apollo Federation GraphQL Engine GraphCMS Prisma DGraph urql Gatsby Apollo Platform Hasura Apollo State management TypeGraphQL 10

Slide 25

Slide 25

GraphQL in 2020 GraphQL in 2020 “ GraphQL is much more than an efficient way of fetching data from the client side @whereischarly 11 . 1

Slide 26

Slide 26

GraphQL in 2020 GraphQL in 2020 “ GraphQL is much more than an efficient way of fetching data from the client side @whereischarly 11 . 2

Slide 27

Slide 27

GraphQL in 2020 GraphQL in 2020 “ GraphQL is much more than an efficient way of fetching data from the client side

  1. The GraphQL innovations on front-end side @whereischarly 11 . 2

Slide 28

Slide 28

GraphQL in 2020 GraphQL in 2020 “ GraphQL is much more than an efficient way of fetching data from the client side

  1. The GraphQL innovations on front-end side 2. GraphQL bridging the gaps on server-side @whereischarly 11 . 2

Slide 29

Slide 29

The GraphQL innovations on front-end side GraphQL as state management Photo by Taelynn Christopher 12 . 1

Slide 30

Slide 30

GraphQL as state management @whereischarly GraphQL in 2020 12 . 2

Slide 31

Slide 31

GraphQL as state management @whereischarly GraphQL in 2020 12 . 2

Slide 32

Slide 32

GraphQL as state management @whereischarly GraphQL in 2020 12 . 2

Slide 33

Slide 33

GraphQL as state management @whereischarly GraphQL in 2020 12 . 2

Slide 34

Slide 34

GraphQL as state management GraphQL in 2020 Recoil @whereischarly 12 . 2

Slide 35

Slide 35

GraphQL as state management GraphQL in 2020 “ GraphQL is a “data query and manipulation language for APIs” @whereischarly 12 . 3

Slide 36

Slide 36

GraphQL as state management GraphQL in 2020 “ GraphQL is a “data query and manipulation language for APIs” @whereischarly 12 . 3

Slide 37

Slide 37

GraphQL as state management GraphQL in 2020 Apollo Client mission @whereischarly 12 . 4

Slide 38

Slide 38

GraphQL as state management GraphQL in 2020 Apollo Client mission Apollo Client 1 & 2: build the best GraphQL Client @whereischarly 12 . 4

Slide 39

Slide 39

GraphQL as state management GraphQL in 2020 Apollo Client mission Apollo Client 1 & 2: build the best GraphQL Client Apollo Client 3: a library for interacting with a client-side data graph @whereischarly 12 . 4

Slide 40

Slide 40

GraphQL as state management GraphQL in 2020 Apollo Client mission Apollo Client 1 & 2: build the best GraphQL Client Apollo Client 3: a library for interacting with a client-side data graph Local state management with GraphQL @whereischarly 12 . 4

Slide 41

Slide 41

GraphQL as state management GraphQL in 2020 Simple local state example 12 . 5

Slide 42

Slide 42

GraphQL as state management GraphQL in 2020 Example: darkMode settings @whereischarly 12 . 6

Slide 43

Slide 43

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 const { data } = useQuery(query isDarkMode { 2 darkMode @client 3 } 4 5) @whereischarly 12 . 6

Slide 44

Slide 44

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 const { data } = useQuery(query isDarkMode { 2 darkMode @client 3 } 4 5) @whereischarly 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import { TypePolicies, makeVar } from ‘@apollo/client’; export const DARK_MODE_KEY = ‘dark-mode’ export const darkMode = makeVar<boolean>(localStorage.getItem(DARK_MODE_KEY) || false) export const resolvers: TypePolicies = { Query: { fields: { darkMode: { read: () => darkMode(), }, }, }, }; export default resolvers 12 . 6

Slide 45

Slide 45

GraphQL as state management GraphQL in 2020 Example: darkMode settings 12 . 7

Slide 46

Slide 46

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 darkMode(true) 12 . 7

Slide 47

Slide 47

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 darkMode(true) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import { TypePolicies, makeVar } from ‘@apollo/client’; export const DARK_MODE_KEY = ‘dark-mode’ export const darkMode = makeVar<boolean>(localStorage.getI export const resolvers: TypePolicies = { Query: { fields: { darkMode: { read: () => darkMode(), }, }, }, }; export default resolvers 12 . 7

Slide 48

Slide 48

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 darkMode(true) updates useQuery() hook 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import { TypePolicies, makeVar } from ‘@apollo/client’; export const DARK_MODE_KEY = ‘dark-mode’ export const darkMode = makeVar<boolean>(localStorage.getI export const resolvers: TypePolicies = { Query: { fields: { darkMode: { read: () => darkMode(), }, }, }, }; export default resolvers 12 . 7

Slide 49

Slide 49

GraphQL as state management GraphQL in 2020 Example: darkMode settings @whereischarly 12 . 8

Slide 50

Slide 50

GraphQL as state management GraphQL in 2020 Example: darkMode settings 1 import { darkMode, DARK_MODE_KEY } from ‘./resolvers’ 2 3 const useUpdateDarkMode = () => useCallback( 4 (enabled: boolean) => { 5 localStorage.setItem(DARK_MODE_KEY, enabled) 6 darkMode(enabled) 7 }, 8 [], 9 ) @whereischarly 12 . 8

Slide 51

Slide 51

GraphQL as state management GraphQL in 2020 More advanced local state example 12 . 9

Slide 52

Slide 52

GraphQL as state management @whereischarly GraphQL in 2020 12 . 10

Slide 53

Slide 53

GraphQL as state management GraphQL in 2020 TodoList items are remote (GQL API) @whereischarly 12 . 10

Slide 54

Slide 54

GraphQL as state management GraphQL in 2020 TodoList items are remote (GQL API) The newly created Todo is local @whereischarly 12 . 10

Slide 55

Slide 55

GraphQL as state management GraphQL in 2020 TodoList items are remote (GQL API) The newly created Todo is local Totally transparent at component- level 1 const { data, error } = useMainTopicListQuery() 2 3 // data contains remote + local todos @whereischarly 12 . 10

Slide 56

Slide 56

GraphQL as state management GraphQL in 2020 Adding the TodoDraft to the list Query Apollo Cache @whereischarly TypePolicies read() functions useQuery() hooks 12 . 11

Slide 57

Slide 57

GraphQL as state management GraphQL in 2020

  1. Adding the TodoDraft to the list Query 1 const { data } = useQuery(query getMainTopicList($completedAfter: DateTime!) { 2 activeTopics: topicsList(first: 200, view: ACTIVE) { 3 hasAfter 4 items { 5 ...TopicListItem 6 } 7 } 8 } 9 10) @whereischarly 12 . 12

Slide 58

Slide 58

GraphQL as state management 1. Adding the TodoDraft to the list Query 1 const { data } = useQuery(query getMainTopicList($completedAfter: DateTime!) { 2 activeTopics: topicsList(first: 200, view: ACTIVE) { 3 hasAfter 4 items { 5 ...TopicListItem 6 } 7 } 8 } 9 10) @whereischarly GraphQL in 2020 1 const typePolicies: TypePolicies = { 2 Query: { 3 fields: { 4 topicsList: { 5 keyArgs: [‘view’, ‘first’], 6 // … 7 read: (existing, { args }) => { 8 const draft = todoDrafts() 9 return draft ? 10 { 11 …existing, 12 items: [ 13 draft, 14 …(existing ? existing.items : []), 15 ], 16 }: 17 existing 18 }, 19 }, 20 }, 21 }, 22 } 12 . 12

Slide 59

Slide 59

GraphQL as state management GraphQL in 2020 2. Todo isDraft local property 1 fragment TodoListItem on Todo { 2 id 3 reference 4 title 5 # … 6 isDraft @client 7 # … 8 } @whereischarly 1 export const resolvers: TypePolicies = { 2 // we augment the Todo type 3 Todo: { 4 fields: { 5 isDraft: { 6 read: (existing = false, { readField }) => isDraft(readField(‘id’)), 7 }, 8 }, 9 }, 10 }; 12 . 13

Slide 60

Slide 60

GraphQL as state management @whereischarly GraphQL in 2020 12 . 14

Slide 61

Slide 61

GraphQL as state management GraphQL in 2020 Full local state management capabilities @whereischarly 12 . 15

Slide 62

Slide 62

GraphQL as state management GraphQL in 2020 Full local state management capabilities State: managed by ApolloCache, along side with APIs data @whereischarly 12 . 15

Slide 63

Slide 63

GraphQL as state management GraphQL in 2020 Full local state management capabilities State: managed by ApolloCache, along side with APIs data Computed values: TypePolicies @whereischarly 12 . 15

Slide 64

Slide 64

GraphQL as state management GraphQL in 2020 Full local state management capabilities State: managed by ApolloCache, along side with APIs data Computed values: TypePolicies Actions: reactive variables or client.writeQuery() @whereischarly 12 . 15

Slide 65

Slide 65

GraphQL as state management GraphQL in 2020 Full local state management capabilities State: managed by ApolloCache, along side with APIs data Computed values: TypePolicies Actions: reactive variables or client.writeQuery() Reactions: Apollo ObservableQuery + reactive variables @whereischarly 12 . 15

Slide 66

Slide 66

GraphQL as state management GraphQL in 2020 Full local state management capabilities State: managed by ApolloCache, along side with APIs data Computed values: TypePolicies Actions: reactive variables or client.writeQuery() Reactions: Apollo ObservableQuery + reactive variables Tools: Apollo Client Dev tools @whereischarly 12 . 15

Slide 67

Slide 67

The GraphQL innovations on front-end side GraphQL Full-stack type safety Photo by Taelynn Christopher 13 . 1

Slide 68

Slide 68

GraphQL Full-stack type safety GraphQL in 2020 “ GraphQL introspection is a core - most underrated - feature of the language @whereischarly 13 . 2

Slide 69

Slide 69

GraphQL Full-stack type safety GraphQL in 2020 1 { 2 __schema { 3 types { 4 name 5 kind 6 fields { 7 name 8 type { 9 name 10 ofType { 11 name 12 } 13 } 14 } 15 } 16 } 17 } @whereischarly 13 . 3

Slide 70

Slide 70

GraphQL Full-stack type safety GraphQL in 2020 1 { 2 __schema { 3 types { 4 name 5 kind 6 fields { 7 name 8 type { 9 name 10 ofType { 11 name 12 } 13 } 14 } 15 } 16 } 17 } @whereischarly 13 . 3

Slide 71

Slide 71

GraphQL Full-stack type safety 1 { 2 __schema { 3 types { 4 name 5 kind 6 fields { 7 name 8 type { 9 name 10 ofType { 11 name 12 } 13 } 14 } 15 } 16 } 17 } @whereischarly GraphQL in 2020 1 { 2 “data”: { 3 “__schema”: { 4 “types”: [ 5 { 6 “name”: “Query”, 7 /* … */ 8 }, 9 { 10 “name”: “PrivateUser”, 11 “kind”: “OBJECT”, 12 “fields”: [ 13 { 14 “name”: “id”, 15 “type”: { 16 “name”: “String”, 17 “ofType”: null 18 } 19 }, 20 { 21 “name”: “birthday”, 22 “type”: { 23 “name”: “String”, 24 “ofType”: null 25 } 26 }, 27 { 13 . 3

Slide 72

Slide 72

GraphQL Full-stack type safety @whereischarly State of JS 2019 GraphQL in 2020 13 . 4

Slide 73

Slide 73

GraphQL Full-stack type safety GraphQL in 2020 Given a GraphQL Schema, generates: TypeScript types definition React Apollo hooks definition urql components Types for Flow, Java, Kotlin @whereischarly 13 . 5

Slide 74

Slide 74

GraphQL Full-stack type safety GraphQL in 2020 Typed React hooks generations @whereischarly 13 . 6

Slide 75

Slide 75

GraphQL Full-stack type safety GraphQL in 2020 TypedDocumentNode for simplicity @whereischarly 13 . 7

Slide 76

Slide 76

GraphQL Full-stack type safety GraphQL in 2020 “ We now have ‘cheap to maintain’ best-in-class TypeScript types in our front-end @whereischarly 13 . 8

Slide 77

Slide 77

GraphQL in 2020 GraphQL (Beyond type safety intermission) @whereischarly 13 . 9

Slide 78

Slide 78

GraphQL (Beyond type safety intermission) GraphQL in 2020 Better front-end developer experience GraphQL without queries GraphQL forms @whereischarly 13 . 10

Slide 79

Slide 79

GraphQL (Beyond type safety intermission) GraphQL in 2020 GraphQL without queries: gqless 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const User = graphql(({ user }: { user: User }) = <div> <h2>{user.name}</h2> <img src={user.avatarUrl({ size: 100 })} /> </div> )) const App = graphql(() => ( <div> {query.users.map(user => ( <User key={user.id} user={user} /> ))} </div> )) @whereischarly 13 . 11

Slide 80

Slide 80

GraphQL (Beyond type safety intermission) GraphQL in 2020 GraphQL without queries: gqless 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const User = graphql(({ user }: { user: User }) = <div> <h2>{user.name}</h2> <img src={user.avatarUrl({ size: 100 })} /> </div> )) const App = graphql(() => ( <div> {query.users.map(user => ( <User key={user.id} user={user} /> ))} </div> )) @whereischarly 1 query App { 2 users { 3 id 4 name 5 avatarUrl(size: 100) 6 } 7 }

  • TypeScript support 13 . 11

Slide 81

Slide 81

GraphQL (Beyond type safety intermission) GraphQL in 2020 GraphQL forms: Frontier 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import import import import gql from “graphql-tag”; { Frontier } from “frontier-forms”; { myApplicationKit } from “./uiKit”; { client } from “./apollo-client”; const mutation = gqlmutation($user: User!) { createUser(user: $user) { id } }; <Frontier client={client} mutation={mutation} uiKit={myApplicationKit} /> @whereischarly 13 . 12

Slide 82

Slide 82

GraphQL (Beyond type safety intermission) GraphQL in 2020 GraphQL forms: Frontier 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import import import import gql from “graphql-tag”; { Frontier } from “frontier-forms”; { myApplicationKit } from “./uiKit”; { client } from “./apollo-client”; const mutation = gqlmutation($user: User!) { createUser(user: $user) { id } }; <Frontier client={client} mutation={mutation} uiKit={myApplicationKit} /> @whereischarly 13 . 12

Slide 83

Slide 83

GraphQL bridging the gaps on server-side Photo by Alexander Andrews 14 . 1

Slide 84

Slide 84

GraphQL bridging the gaps on server-side Apollo @whereischarly Prisma GraphQL in 2020 AWS AppSync 14 . 2

Slide 85

Slide 85

GraphQL bridging the gaps on server-side Apollo GraphQL in 2020 Prisma What about more complex GraphQL APIs without a from-scratch development? @whereischarly 14 . 3

Slide 86

Slide 86

GraphQL bridging the gaps on server-side Apollo @whereischarly Hasura GraphQL in 2020 Prisma 14 . 4

Slide 87

Slide 87

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura Hasura translate GraphQL AST to SQL AST, providing blazing fast execution with minimum configuration @whereischarly 14 . 5

Slide 88

Slide 88

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura Custom logic support via Actions @whereischarly 14 . 6

Slide 89

Slide 89

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura @whereischarly 14 . 7

Slide 90

Slide 90

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support @whereischarly 14 . 7

Slide 91

Slide 91

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support Authentication / Authorization (JWT) @whereischarly 14 . 7

Slide 92

Slide 92

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support Authentication / Authorization (JWT) Remote schemas support (schema stitching) @whereischarly 14 . 7

Slide 93

Slide 93

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support Authentication / Authorization (JWT) Remote schemas support (schema stitching) Subscriptions support @whereischarly 14 . 7

Slide 94

Slide 94

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support Authentication / Authorization (JWT) Remote schemas support (schema stitching) Subscriptions support Actions for custom logic Trigger webhooks on database events @whereischarly 14 . 7

Slide 95

Slide 95

GraphQL bridging the gaps on server-side GraphQL in 2020 Hasura ACL support Authentication / Authorization (JWT) Remote schemas support (schema stitching) Subscriptions support Actions for custom logic Trigger webhooks on database events Bonus: one-click install on most cloud providers @whereischarly 14 . 7

Slide 96

Slide 96

GraphQL bridging the gaps on server-side Apollo GraphQL in 2020 Prisma What about old REST APIs and external services? @whereischarly 14 . 8

Slide 97

Slide 97

GraphQL bridging the gaps on server-side Apollo @whereischarly GraphQL Mesh GraphQL in 2020 Prisma 14 . 9

Slide 98

Slide 98

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh “ GraphQL Mesh leverages API definition standards to transform existing API to GraphQL APIs @whereischarly 14 . 10

Slide 99

Slide 99

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh Spotify GraphQL in 5’ @whereischarly 14 . 11

Slide 100

Slide 100

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh Spotify GraphQL in 5’ @whereischarly 14 . 12

Slide 101

Slide 101

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh Spotify GraphQL in 5’ @whereischarly 14 . 12

Slide 102

Slide 102

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh Spotify GraphQL in 5’ @whereischarly 14 . 12

Slide 103

Slide 103

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh Spotify GraphQL in 5’ @whereischarly 14 . 13

Slide 104

Slide 104

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh @whereischarly 14 . 14

Slide 105

Slide 105

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data @whereischarly 14 . 14

Slide 106

Slide 106

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation @whereischarly 14 . 14

Slide 107

Slide 107

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation Resolvers composition @whereischarly 14 . 14

Slide 108

Slide 108

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation Resolvers composition Caching @whereischarly 14 . 14

Slide 109

Slide 109

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation Resolvers composition Caching SDK generation @whereischarly 14 . 14

Slide 110

Slide 110

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation Resolvers composition Caching SDK generation @whereischarly 14 . 14

Slide 111

Slide 111

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL Mesh GraphQL proxy over your data Schema transformation Resolvers composition Caching SDK generation @whereischarly “ GraphQL Mesh doesn’t aim to create […] public GraphQL schema […], you should consider implementing another layer that exposes your public data […]. 14 . 14

Slide 112

Slide 112

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL API building in 2020 @whereischarly 14 . 15

Slide 113

Slide 113

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL API building in 2020 Apollo, Prisma, and AWS AppSync are not unique solutions @whereischarly 14 . 15

Slide 114

Slide 114

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL API building in 2020 Apollo, Prisma, and AWS AppSync are not unique solutions Hasura helps you build performant and powerful API @whereischarly 14 . 15

Slide 115

Slide 115

GraphQL bridging the gaps on server-side GraphQL in 2020 GraphQL API building in 2020 Apollo, Prisma, and AWS AppSync are not unique solutions Hasura helps you build performant and powerful API GraphQL Mesh brings you universal GraphQL @whereischarly 14 . 15

Slide 116

Slide 116

GraphQL in 2020 GraphQL in 2020 ⚡ Wrap-up @whereischarly 15

Slide 117

Slide 117

GraphQL in 2020 ⚡ GraphQL in 2020 Beyond a “Facebook & Apollo technology” The Guild Hasura Dgraph and many more individual contributors! @whereischarly 16 . 1

Slide 118

Slide 118

GraphQL in 2020 ⚡ GraphQL in 2020 Beyond fetching data from the client-side Better front-end developer experience (Full-stack type safety, …) Easier complex GraphQL API building (Hasura) Fast GraphQL Database (Dgraph, Hasura) GraphQL as a universal data language (state, GraphQL Mesh) @whereischarly 16 . 2

Slide 119

Slide 119

GraphQL: Looking forward GraphQL in 2020 GraphQL in 2021? Subscriptions / Async evolutions Apollo 3, Hasura @defer, @live Smarter client-side cache? Better mobile clients ecosystem? more public APIs? @whereischarly 17

Slide 120

Slide 120

Thank you! slides on noti.st/charlypoly @whereischarly @wittydeveloper Photo by Nicolas Gras 18