A Gentle Introduction to GraphQL Resolvers

Transcript

1. A Gentle Introduction to Resolvers Steve Kinney
2. @stevekinney Hi, I’m Steve. (@stevekinney)
3. @stevekinney What even is a resolver? • Short answer: It’s a function or method that resolves a value for a type or field in your schema. • Every field on every type is backed by a function called a resolver.
4. @stevekinney Resolving values and objects • If the return value of a function is a literal (e.g. a string or a number or a boolean). Cool, we’re done here. • Otherwise, if it’s an object, we’re going to dip down into that object and try to resolve it as well. • We’ll keep diving deeper until we’ve gotten to the bottom of things.
5. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Artist { id: Int name: String } type Query { artists: [Artist!] }
6. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox query { artists { id name } }
7. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Query: { artists() { return [{ id: 1, name: 'The National' }]; } } };
8. @stevekinney Resolvers can be asynchronous.
9. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Query: { artists() { return [...artists]; }, albums() { return new Promise(resolve => resolve([...albums])); }, songs() { return axios.get(‘/some-endpoint') .then(response => response.data); } } };
10. @stevekinney Siblings are executed in parallel.
11. @stevekinney Query Artists Albums ID Name Title Year ID
12. @stevekinney If a resolver returns a promise, we’re obviously going to have to—umm— resolve wait for it before diving down.
13. @stevekinney Query Artists Albums ID Name Title Year ID
14. @stevekinney
15. @stevekinney We should probably use GraphQL for this problem, right? • A user might want to pull up all of the artists in their library with their albums. • They might just want to see a list of albums. • Or, maybe, they just want to a big ol’ list of songs. • (We’re going to ignore playlists for now.)
16. @stevekinney What might our schema look like?
17. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Artist { id: Int name: String albums: [Album] songs: [Song] }
18. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Album { id: Int title: String year: Int artist: Artist songs: [Song] }
19. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Song { id: Int title: String time: Int artist: Artist album: Album }
20. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Query { artists: [Artist!] albums: [Album!] songs: [Song!] artist(id: Int!): Artist! album(id: Int!): Album! song(id: Int!): Song! } type Mutation { addArtist(name: String!): Artist addAlbum(title: String!, year: Int, artistId: Int): Album addSong(title: String!, time: Int, artistId: Int, albumId: Int): Song }
21. @stevekinney Let’s talk about our data.
22. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox [ { "id": 1, "name": "The National" }, { "id": 2, "name": "Camp Cope" }, { "id": 3, "name": "Rilo Kiley" } ]
23. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox [ { "id": 1, "artistId": 1, "title": "Trouble Will Find Me", "year": 2013 }, { "id": 2, "artistId": 2, "title": "How to Socialize and Make Friends", "year": 2018 } ]
24. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox [ { "title": "Done", "time": "4:47", "artistId": 2, "albumId": 5, "id": 1 }, { "title": "Flesh & Electricity", "time": "3:57", "artistId": 2, "albumId": 5, "id": 2 }, { "title": "West Side Story", "time": "5:32", "artistId": 2, "albumId": 5, "id": 3 }, ]
25. @stevekinney Alright, let’s get into writing a resolver.
26. @stevekinney Resolver functions get four arguments. • root or parent • args • context • info
27. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Query: { artists() { return [{ id: 1, name: 'The National' }]; } } };
28. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Query: { artists(root, args, context, info) { return [{ id: 1, name: 'The National' }]; } } };
29. @stevekinney So, when would you use args?
30. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Query { artists: [Artist!] artist(id: Int!): Artist! }
31. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox query { artist(id: 1) { id name } }
32. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Query: { // … artist(root, args) { return artists.find(artist => artist.id === args.id); } // … } };
33. @stevekinney What about descending down the tree?
34. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox type Artist { id: Int name: String albums: [Album] songs: [Song] }
35. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox Query: { // … Artist: { albums(artist) { // artist is the parent value return albums.filter(album => album.artistId === artist.id); }, songs(artist) { return songs.filter(song => song.artistId === artist.id); } }, // … } };
36. @stevekinney By default, resolvers will look to see if whatever you’re looking for is a property on the object.
37. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Artist: { // You don't need to do this. name(artist) { return artist.name; }, albums(artist) { return albums.filter(album => album.artistId === artist.id); }, songs(artist) { return songs.filter(song => song.artistId === artist.id); } } };
38. And now… @stevekinney Mutations
39. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Mutation: { addArtist(_, args) { const artist = { ...args, id: generateId() }; artists.push(artist); return artist; } } };
40. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const resolvers = { Mutation: { addArtist(_, args) { return axios.post('/artists', args) .then(response => response.data); } } };
41. And now… @stevekinney What about context?
42. @stevekinney What is context? • Short answer: It’s an object shared by all of the resolvers. • It's mutable. • It's destroyed between every request.
43. @stevekinney What might you store in context? • Authentication data • The request object in something like Express • API fetching functions • Database connections
44. Play: https://graph-jukebox.glitch.me/ Edit: https://glitch.com/edit/#!/graph-jukebox const server = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => ({ authScope: getScope(req.headers.authorization) }) }); // Resolver (root, args, context) => { if (context.authScope !== ADMIN) { throw AuthenticationError('not admin'); } // More stuff… };
45. @stevekinney Let’s poke around the working version of the application, shall we? • https://glitch.com/edit/#!/graph-jukebox • Let’s look at how to add additional properties. • Let’s look at an example that makes AJAX requests.
46. @stevekinney Fin.