From learning to thinking in GraphQL

GraphQL has been unlocking tons of possibilities in the JavaScript world. Over the past years, we've witnessed a lot of improvements in the spec, a huge amount of toolings and whole new ecosystem around GraphQL.

Things are evolving really fast in the web and we are forced to keep learning and building products at this pace. Being new to GraphQL, a lot concerns and hurdles need to be overcome such as Authorization & Authentication, Storing Data, Caching, Project Structure & Organization, Real-time Events and many more.

In this talk I will share my journey from learning GraphQL, over building GraphQL apps and solving above challenges to thinking in GraphQL.

Transcript

1. From learning to thinking in GraphQL @glnnrys Glenn Reyes
2. Glenn Reyes ! @glnnrys Freelance JavaScript Engineer | React & GraphQL
4. What's GraphQL?
5. – graphql.org “GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.” What's GraphQL?
6. { me { name age bio twitter } } Ask for what you need
7. { me { name age bio twitter } } { "me" { "name": "Glenn", "age": 31, "bio": "Engineer", "twitter": "@glnnrys" } } Ask for what you need get exactly that
8. /api/v2/ /api/v2/user/143/ me friends REST
9. { me { name age bio twitter friends { name age } } } GraphQL
10. Core concepts Queries & Mutations Schemas & Types
11. GraphQL server
12. apollo-server const typeDefs = gql` type User { id: ID! name: String } type Query { me: User } `; const resolvers = { Query: { me: (obj, args, context) => getUserById(context.user.id), }, }; const server = new ApolloServer({ typeDefs, resolvers }); server.listen().then(({ url }) => { console.log(` Server ready at ${url}`); });
13. Graphpack
14. ⚡ Zero-config GraphQL server ⚡ Run server by single command ⚡ Uses Apollo-Server under the hood ⚡ TypeScript support ⚡ Live-Reload ⚡ ES features ⚡ Friendly Errors ⚡ Hides all the boilerplate Graphpack
15. src !"" resolvers.js #"" schema.graphql
16. CLI $ graphpack # start dev $ graphpack build # create build
17. "scripts": { "start": "graphpack"
 "build": "graphpack build" } package.json
20. Use tools and focus on writing GraphQL
21. github.com/glennreyes/graphpack
22. How to start writing GraphQL?
23. Create Mental Model Define Types Implement Resolvers How to start writing GraphQL?
24. First step Create mental model
26. User Post
27. User Post posts
28. User Post Photo coverPhoto profilePhoto posts
29. Second step Define types
30. # src/schema.graphql type User { coverPhoto: String! profilePhoto: String! displayName: String id: ID! username: ID! bio: String posts: [String!]! }
31. # src/schema.graphql type User { coverPhoto: String! profilePhoto: String! displayName: String id: ID! username: ID! bio: String posts: [String!]! }
32. # src/schema.graphql type User { coverPhoto: String! profilePhoto: String! displayName: String id: ID! username: ID! bio: String posts: [String!]! } posts: [String!]!
33. type Post { id: ID! createdAt: DateTime! message: String! } type User { coverPhoto: String! profilePhoto: String! displayName: String id: ID! username: ID! bio: String posts: [Post!]! } # src/schema.graphql
34. type Post { id: ID! createdAt: DateTime! message: String! } type User { coverPhoto: String! profilePhoto: String! displayName: String id: ID! username: ID! bio: String post: [Post!]! } # src/schema.graphql coverPhoto: String! profilePhoto: String!
35. type Photo { createdAt: String! filename: String! title: String url: String! updatedAt: DateTime! } type Post { id: ID! createdAt: DateTime! message: String! } type User { coverPhoto: Photo! profilePhoto: Photo! displayName: String id: ID! username: ID! bio: String post [Post!]! }
36. Prefer Object Types over Default Types
37. Third step Implement resolvers
38. # src/schema.graphql const resolvers = { Query: { user: (obj, args) => getUser(args.id), }, User: { posts: (obj, args) => getPostsByUser(args.id), }, };
39. How does the query look like?
41. { "user": { "profilePhotoId": "15942", "coverPhotoId": "159425", "displayName": "Glenn Reyes", "userName": "glnnrys", } } /api/user/glnnrys /api/photo/159425 { "photo": { "id": "159425", "url": "https://myimgcdn.com/159425.jpg", "taggedUsers": ["thekitze", "mmatuzo"] } } /api/user/thekitze { "user": { "profilePhotoId": "15934", "coverPhotoId": "159655", "displayName": "Kitze", "userName": "thekitze", } }
42. query getProfile { profile(username: "glnnrys") { coverPhoto profilePhoto displayName username bio posts { date id message } } }
43. import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const ProfilePage = props => ( <Query query={gql` query getProfile($username: ID!) { profile(username: $username) { profilePhoto displayName username bio } } `} variables={{ username: props.username }} > {({ data, loading }) => { if (loading) return 'Loading ...'; if (!data) return null; return <Profile data={data.profile} />; }} </Query> );
44. When it gets big and slow ...
45. Fourth step Defer expensive parts
47. Profile Posts
48. query getProfile { profile(username: "glnnrys") { coverPhoto profilePhoto displayName username bio } } query getPosts { profile(username: "glnnrys") { posts { date id message } } }
49. only available in the alpha preview of Apollo! query getProfile { profile(username: "glnnrys") { coverPhoto profilePhoto displayName username bio posts @defer { date id message } } }
50. How about mutations?
51. # src/schema.graphql type Mutation { changeProfilePhoto(input: ChangeProfilePhotoInput!): ChangeProfilePhotoPayload! }
52. # src/schema.graphql type Mutation { changeProfilePhoto( input: ChangeProfilePhotoInput! ): ChangeProfilePhotoPayload! } input ChangeProfilePhotoInput { user: User! file: File! } type ChangeProfilePhotoPayload { clientMutationId: ID! photo: Photo! }
53. ⭐ Naming – Verb + Object (eg. updateBio, submitPost) ⭐ Specificity – Make mutations as specific as possible ⭐ Input object – Single, unique & required ⭐ Unique Payload type – Like ChangeProfilePhotoPayload ⭐ Nesting is fine! https://blog.apollographql.com/designing-graphql-mutations-e09de826ed97
54. How about auth?
55. // src/context.js const context = (req) => { const isLoggedIn = req.user ? true : false; return { isLoggedIn, user, }; }; export default context; Context
57. Context is also great for access control
58. Batching requests
59. /api/user/1 /api/user/2 /api/user/3
60. /api/user/1 /api/user/2 /api/user/3 === /api/users/?ids=1,2,3
61. Dataloader for batching and caching
62. // src/context.js const context = { users: new DataLoader(keys => fetch(`/api/users/?ids=${keys.join(',')}`)), } // src/resolvers.js const resolvers { Query: { user: (obj, args, context) => context.users.load(args.id), }, };
63. Allows to avoid overfetching
64. Storing data
65. Storing data MySQL MongoDB PostgreSQL RethinkDB MariaDB
66. knex.js const knex = require('knex')({ client: 'mysql', version: '8.0', connection: { host : '127.0.0.1', user : 'your_database_user', password : 'your_database_password', database : 'myapp_test' } }); knex .select(['id', 'name', 'bio']) .from('people') .where({ gender: 'female' })
67. prisma.createPerson({ email: "alice@prisma.io", posts: { create: { title: "GraphQL Conf 2019" } } })
68. Folder structure
69. src !"" resolvers.js #"" schema.graphql Simple
70. src !"" models % !"" createSpeaker.js % !"" createTalk.js % !"" deleteSpeaker.js % !"" getSpeakerById.js % !"" getSpeakers.js % !"" getTalkById.js % #"" getTalks.js !"" resolvers % !"" Mutation.js % !"" Query.js % !"" Speaker.js % !"" Talk.js % #"" index.js #"" types !"" Mutation.graphql !"" Query.graphql !"" Speaker.graphql !"" Talk.graphql #"" schema.graphql By types
71. src !"" Mutation % !"" resolver.js % #"" type.graphql !"" Query % !"" helpers.js % !"" models.js % !"" resolver.js % #"" type.graphql !"" Speaker % !"" resolver.js % #"" type.graphql #"" Talk !"" resolver.js #"" type.graphql By feature
72. Always start simple Switch gruadually depending on your use case Dont worry much about folder structure!!
73. ⚡ GraphQL core concepts ⚡ Graphpack – Building zero-config GraphQL servers ⚡ Approach to write – Mental Model, Types, Resolvers, Defer ⚡ Mutations – Naming, Specifity, Unique Input & Payload type ⚡ Authentication & access control ⚡ Data storage – GraphQL not tied to any database ⚡ Batch and cache with Dataloader ⚡ Avoid bikeshedding on folder structure
74. Thank You! @glnnrys Glenn Reyes