GraphQL Tutorial #3 - Project (stack) Overview
Hey gang, in this GraphQL tutorial I'll explain the different technologies we'll be using in our stack to create our final project. We'll be using Node on the back-end to create a GraphQL server, and React on the front-end to query the server.
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
What You'll Learn
Builds a GraphQL server using Node.js and Apollo to query a MongoDB database
Full Transcript
okay so like I said we'll be creating this application throughout this playlist with graphic you out managing our data retrieval and manipulation now there's several different moving parts to this app so I just want to briefly go over all of the different parts and technologies were going to be using because I always think it's a good idea to have an overview of everything that we'll be working on and how everything is all fitting together okay so first of all we'll be making a graphic of our server on node.js using Express and this is where we'll describe how our graph looks the different types of data on our graph books and authors and the relationship between those data types how graphic you are can walk from one to another we'll also set out the different entry points into the graph that is where a query can enter and land on the graph and what information can be retrieved from it so all that stuff is going to go on to no js' using Express and graph q out so once we've done that we'll be then hooking up our graph to our server to a MongoDB instance on M lab and this is where our data will actually be stored okay so M lab is just an online service that allows us to quickly generate a MongoDB instance so it's an online database if you like for MongoDB and it just saves all the setup of creating a database locally so once we've done all the backend there we're then going to move on to the front-end and we'll be creating a client side app using react which will then be able to make queries to our graph to our server and retrieve data back which we can then show in the browser now on the front end also we'll be using this thing called Apollo right here and this is kind of like the glue layer for graph QL and it allows us to use graph QL on the front end inside react we'll learn more about that later on so that's kind of like the whole stack from afar and the different technologies we'll be using now the good thing about graph QL here is that it's platform agnostic and that basically means that you don't have to use it with specific technologies like react it can just as easily be used with angular or view on the front end or whatever you prefer on the front end as well likewise we don't need to use MongoDB to store our data we could use something like a sequel database if we wanted to or even a mixture of both it doesn't really matter what technology we use the idea behind it is still the same now I've chosen this stat because I think it's a good one which works well for our needs in this series so that there is how our project is going to look now to begin with we'll be creating our graph QL server on node.js but before we do that I want to give you a little preview of how making requests from the front end actually works and we'll be doing that using a tool called graphical alright so graphical is kind of like a dummy front-end application that allows us to test out our graph QL server over here and make requests to the graph QL server and retrieve data back so I'll be giving you an overview of that in the next video and just making some sample requests from the front end so you can get your head around how they're all working
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 6 of 60
1
2
3
4
5
▶
7
8
9
10
11
12
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
Related AI Lessons
⚡
⚡
⚡
⚡
Connecting Frontend to Backend: A Backend Engineer’s Reality Check
Medium · Programming
Build Secure Authentication System Using Access and Refresh Tokens
Medium · Python
5 PHP Features You're Probably Not Using (But Should)
Dev.to · Mahdyar
How to Use the any Type and When to Avoid It
Dev.to · Krunal Kanojiya
🎓
Tutor Explanation
DeepCamp AI