GraphQL Tutorial #9 - The Resolve Function
Skills:
API Design80%
Key Takeaways
This video tutorial demonstrates how to use the resolve function in GraphQL to fetch data from a backend server, using a dummy data array and the Lodash utility module.
Full Transcript
all right and so where are we up to well in the last video we created this Rick query right here and remember we said the requiring defines how we can jump into the graph to query data so imagine something on the front end some kind of application makes this requiring they say ok we're making a query for a book with an ID of 2 and we want these two fields the name and genre so when that query gets to our graph QL server it's going to look at it and say ok this requiere is a book query so I'm going to find that query inside our root query object type inside the fields and I find it right here and it looks inside that book field to know how to deal with this query and it says ok well I know what object type I'm dealing with now it's a book type also it looks at the arts property and says right well I'm expecting an ID to come along with this query do we have one yes we do is right here it's an ID of 2 so it takes this idea and it attaches it to this rx parameter right here so the inside the resolve function we have access to it so when we get this query it's going to fire up this resolve function and in here is where we're going to write the code to find that book now this book and this data could be stored in a no sequel database or a sequel database it doesn't really matter where it's stored we're gonna write some code here to go and grab it later on we'll be using MongoDB to store all of our data but for now I think what I'll do is just create an array to store some books in inside this feet file so underneath here let's just write a comment saying dummy data and then underneath I'm just gonna paste this in so don't want you to watch me doing it it's just a waste of your time so we have a book serrate right here and it's just basically some dummy data to store temporarily like I said later we'll be using MongoDB but we have three different book objects inside and each one of them have a name as Janvrin and an ID so this is the ID we're going to use to find the correct book so if a query comes in for the book ID of two we to get the book of ID 2 from this array right here or from a database later on so now it's our job inside this resolved function to take the ID from the args parameter right here an ID of 2 or whatever ID comes in and we're going to look at this array to find the book with that ID now I could do that with vanilla JavaScript but I'm going to make life easy for myself and install a utility module called lodash so I'll say npm install lodash to do that and what LO - is gonna allow us to do is a load of different tricks to find data or change data inside of this array plus lots of other things as well it's a really cool library so I'm going to say const underscore is equal to require low - alright then so down here we can use low - to look at this array and find the book with whatever ID has been attached to this args property so underneath this comment let's just say underscore dot find then we want to search through the books array and we need a second parameter which is going to determine how we're finding a particular book so the second parameter is going to be an ID property which is gonna be args ID all right so now when this query comes in we're gonna fire this resolve function we're gonna use lodash to look through the books array and we're going to return or find any book that has an ID equal to the ID that's been attached to the odds right here that the user sends along so in this case it's gonna look for a book with an ID of two and it's gonna give us that alright so what we need to do is return this value which comes back from this thing right here ok whatever we're sending back to the user we're gonna return so now when they make this request ultimately what's going to happen is they're gonna get that book returned to them all right so that is how we use the resolve function to find the data like say later on we'll be using a proper database rather than just this array up here but now we've done that we're kind of created nearly a full enough schema to work so in the next tutorial what we'll do is we'll test this out in graphical that tool that dummy tool on the front end that we can use to test different queries so make sure you delete this before you save anything and then I'll see you in the next video
Original Description
Hey all, in this GraphQL tutorial I'll show you how we can use the resolve function to go out and actually grab our data for the GraphQL server to return to the front-end.
DONATE :) - https://www.paypal.me/thenetninja
----- COURSE LINKS:
+ Course files - https://github.com/iamshaunjp/graphql-playlist
+ Atom editor - https://atom.io/a
+ CMDER - http://cmder.net/
+ Node Download - https://nodejs.org/en/
======== Other Tutorials =========
----- NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp
----- MONGODB TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u
----- REACT TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR
----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
======== Social Links ==========
Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Patreon - https://www.patreon.com/thenetninja
Playlist
Uploads from Net Ninja · Net Ninja · 12 of 60
1
2
3
4
5
6
7
8
9
10
11
▶
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
More on: API Design
View skill →Related Reads
📰
📰
📰
📰
Designing Better Backend Systems for Data That Cannot Be Lost
Dev.to · Marc Keebler
DNS Record Deletion in Node.js: List Identity Before Delete
Dev.to · QuintonShaw1483
Compile HTTP Error Indexes From Exception Classes; Humans Own Recovery Copy
Dev.to · Avery Lin
JavaScript Map: Store and Find Values Using Keys
Medium · JavaScript
🎓
Tutor Explanation
DeepCamp AI