GraphQL Tutorial #9 - The Resolve Function

Net Ninja · Beginner ·🔧 Backend Engineering ·8y ago
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
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Net Ninja · Net Ninja · 12 of 60

1 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

This video teaches how to use the resolve function in GraphQL to fetch data from a backend server. It demonstrates how to create a dummy data array, install and use the Lodash utility module, and implement the resolve function to return the requested data.

Key Takeaways
  1. Create a dummy data array to store books
  2. Install the Lodash utility module
  3. Implement the resolve function to fetch data from the array
  4. Use Lodash to find the book with the requested ID
  5. Return the requested data to the user
💡 The resolve function is used to fetch data from a backend server in GraphQL, and can be implemented using a utility module like Lodash to simplify the process.

Related Reads

Up next
Unlock CRAZY Performance: Native Code Compilation No JNI! #shorts #quarkusinsights #projectpanama
Quarkusio
Watch →