GraphQL & beyond

Transcript

1. GRAPHQL & beyond @felipesoares_
2. why how when
3. @felipesoares6_ felipesoares6
8. GraphQL is a query language
9. & alternative to REST
11. +
12. graphs -> nodes -> edges
13. query language SELECT * FROM
14. type House { edge: Person } type Person { ... }
15. why?
17. 3 reasons
18. get just what you want
19. enables declarative data fetching
20. overfetching
21. underfetching
22. nice and smooth contracts
23. + typed schemas + docs
24. playground
25. clients everywhere
26. only exposes a single endpoint
27. consume the same endpoint in != ways
28. how?
29. -> schema -> queries -> mutations -> resolvers -> responses
30. schema
31. type Query { users: [User!]!, user: User! }
32. type User { id: ID!, name: String, email: String }
33. schema -> queries -> mutations resolvers responses
34. queries
35. GET /users query { users { id, name, email } }
36. mutations
37. POST /users mutation { createUser( name: “Felipeson”, email: “felipe@son.com” ) { id } }
38. schema queries mutations -> resolvers responses
39. resolvers
40. resolvers = { Query: { users: () => getUsers(), user: (_, { id }) => getUser(id), ???: () => fetch(‘api.com/top’) } }
41. schema queries mutations resolvers -> responses
42. responses
43. loading
44. “data”: { users: [ { id: “1”, name: “Felipe Soares”, email: “felipe@son.com” } ] } query { users { id, name, email } }
45. “errors”: [ { “message”: “error”, “location”: … , “fields”: ... } ] query { users { id, name, gender } }
46. how how
47. server-side bit.ly/2OYP9IS
48. prisma
49. data-base layer
51. application layer
53. client-side bit.ly/2zRBNUq
54. apollo
55. query
56. import gql from ‘graphql-tag’ import { Query } from ‘react-apollo’
57. const GET_USERS = gql` query { users { id, name, email } }`
58. <Query query={GET_USERS}> {({ load, error, data }) => { ... } </Query>
59. if (load) { return <Load load={load} /> }
60. if (data.users) { return <List items={data} /> }
61. if (error) { return <Error error={error} /> }
62. mutation
63. import gql from ‘graphql-tag’ import { Mutation } from ‘react-apollo’
64. const CREATE_USER = gql` mutation { createUser( name: “Felipeson”, email: “fe@lipe.com” ) { id, name, email } }`
65. <Mutation mutation={CREATE_USER}> {( createUser , { load, error, data }) => { ... } </Mutation>
66. <div> ... <UserForm submit={createUser} /> </div>
67. when?
68. is difficult to close the API contracts
69. overfetching underfetching
70. consume the same endpoint in != ways
71. consuming != APIs
72. learn something new!
73. thanks! @felipesoares6_ felipesoares6 bit.ly/2OYP9IS bit.ly/2zRBNUq client-side server-side