CRUD Tutorial - React, GraphQL, NodeJS, MySQL | EP 1 - Queries and Mutations
Vložit
- čas přidán 22. 02. 2021
- Best Tech Resume Template: papermoontech.com/pmcsrtk/pedro
Use code: PEDRO for 20% off ^
Tech Stack:
- ReactJS
- NodeJS
- ExpressJS
- GraphQL / Express GraphQL / Apollo Client
- TypeScript
- MySQL
- TypeOrm
Code: github.com/machadop1407/CRUD-...
Episodes:
- Ep1: • CRUD Tutorial - React,...
- Ep2: • CRUD Tutorial - React,...
- Ep3: • CRUD Tutorial - React,...
- Ep4: • CRUD Tutorial - React,...
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3d0QauN
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- MySQL
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial - Věda a technologie
why aren t u adding nodemone and typescript as a dev? is it not necessary?
It is not necessary, but I usually put them as a dev dependency. I for some reason forgot while I was recording to make them a dev dependency, but overall it won't cause any issues!
I am going to pin ur comment so that people see, cause it is indeed better to put them as dev dependencies!
@@PedroTechnologies i hope the part 2 will release soon rn i am learning from you and ben awad cause u use similar technologies ^^
Part 2 coming Thursday! Ben Awad is awesome! He made me get into typeorm!
What's the best way to to setup typescript as a dev?
superb tutorial! I learned a lot and I solved my 1 week problem in just 1 video. Thanks PedroTech
very useful, can't wait to see the next video, thanks Pedro
Thank you! Next video coming Thursday!
10mins in and I had to pause, like and subscribe. Brilliant introduction and explanations. Thanks for making this video.
This makes me very happy! If you have any doubts through out the videos, please ask me! I know GraphQL is a hard topic in the beginning, but I like to help :)
You are awesome, Pedro
Thank you for what you are doing, man
awesome series of viceo, i just love your way of teaching
This series is great thanks :)
Great tutorial. Thanks!
Awesome tutorial to get started with graphQL
Hey Pedro, I like this video. I have worked with restful APIs and now I learning GraphQL and I had a few misconceptions but this video clarified them. I am going to try to do this but instead of that ORM, I’m going to try it with Prisma
Awesome! I have yet to try prisma! I used to use sequelize, but the typescript support was limited so I changed to typeorm. Prisma looks awesome!
@@PedroTechnologies I actually learned about ORMs about 2 weeks ago. I've heard about sequelize when I was learning SQL vs NoSQL database but it was only a mention. Then, I had to use Prisma for a technical challenge and I liked it. I am going to try to do a login/signup page again using this video to try to understand it better. Do you know when you are releasing the next part? I already subscribed cause I like the video
Awesome! Thank you for subscribing! Next part comes Thursday for sure! My schedule is monday, wednesday, and friday, but this week got a bit messed up!
Great lesson,now i can change data through nodejs!Awesome!
Glad I could help!
Thanks for the good explanation
If you are getting an error
"createConnection decrepated symbol used"
then you should:
1) import { DataSource } from "typeorm";
2) const main = async () => {
await new DataSource({ .....
Really good advice, and don't forget to initialize it afterwards. Mine looked like this:
type: "mysql",
host: "localhost",
port: 3306,
database: "CS-Demo",
username: "root",
password: "8Fifteenpm",
logging: true,
synchronize: true,
entities: [Users],
});
try {
await dataSource.initialize();
console.log("Data Source has been initialized!");
} catch (error) {
console.error("Error during Data Source initialization:", error);
return; // Stop further execution in case of connection failure
}
thank you!
Time to buckle up, and get my notepad for this 1hr tutorial 😇
Hahaha If you have any questions while you're watching, please feel free to ask me here! I love this tech stack so it would be awesome to help you guys!
Great Tutorial - just wondering how do you add more tables to the schema - what is the pattern for this ?
I know this is a year old but this really gave me some good info on using graphql, its very useful especially using a db to store the data. But what I want to do is do the same thing but instead of using nodejs or typescript I wanted to do is use golang, just to do the crud backend part but ive searched online how to do that just simple backend crud operations, there are some but the hard part for me that I'm struggling is trying to connect with the MySQL database, just to be able to create data but I keep seeing how the tutorials are asking to use docker to create the MySQL database, i just use the MySQL benchmark to do that, but then the next step is to use something called golang-migrate to migrate the schema I'm going to use for the grahpql but i just get a bash error saying there is no file or directory in my database, but i do have one create, so i do another one that doesn't use migrate instead it used gorm but with this one i have to add something to a module for models and then i get some compilation errors in the terminal so that doesn't work. So what I'm saying is can you make a video on how to create a crud just the backend part with graphql, golang and MySQL, just to see how you will connect with the database and create some data and save it, if not is it possible if you could help me with just the connection part. please and thanks for reading my huge comment, sorry if it got long.
Hi Perdo, great video! I just want to ask why you put question mark end of your entity fields?(g.e. name! : string). I mean I understand that it does not complain we put the question mark but what is the main reason?
For those who run "tsc --init" then get "tsc: command not found", run (npm): " sudo npm install -g typescript"
O+ brabo do yt ashaushuahsuas
Kkkkkkk
Arigato, after digging many articles this is just what I was looking for. (No Apollo server - bare Graphql.js, a code-first approach, no raw query - some kind of ORM, and an actual CRUD with a real database). I almost got it down. Now my question is, for further research, do we get an any additional value using tools like Apollo and Nexus? Thanks for the video.
Hi Pedro!
Which vscode extension do you use for the folder icons?
good video like u!
Thanks for the visit!
Is createConnection() deprecated now? If so what is the best approach now
Thanks!
Thank you Shamiul!
Have you created a CRUD (MySQL) without using Graphql or Sequelize, pure SQL in the routes or controllers?
Where would you add arguments like "first" or "offset" to make it paginated?
Thank you i am learning few in react i am switching to this kind of framework
Bro kindly upload to github so that i will analyze code by code
This is my favourite tech stack!
I completely forgot hahaha I am doing it right now!
@@PedroTechnologies HAHA its ok bro! thanks
I think one advantage of making advanced videos is that there are fewer resources so your content stands out. I might be wrong though.
Great series.
Can you please tell us some benefits of the stack you choose over other alternatives say ... express-graphql/apollo-server, mysql/postgres, type-grapql/graphql-codegen?
I completely agree! I want to make more advanced videos, the reach will be pretty bad though cause beginner videos get more views. But tbh I prefer advanced videos cause I can help some people who want to transition from beginner to advanced!
THank you! I like postgres too, but I am more used to MySQL so i prefer to use it. In regards to express-graphql and apollo server, both are great options! I prefer the syntax for express-graphql and some benchmarks show it executes queries faster (debatable though). I really like type-graphql, but I still don't feel completely comfortable using it!
thanks
Thank you for watching!
Hi Pedro, i have a problem with the connection (I have the same code like you). I get the following error: "Connection \"default\" was not found.". I searched a lot in the internet, but I found nothing. If you could help me, I would be really greatful. Greetings Tim
Hi pedro i'm getting this error while creating mutation Type '{ type: GraphQLObjectType; args: { name: GraphQLScalarType; image: GraphQLScalarType; city: GraphQLScalarType; wifi: GraphQLScalarType; coffee: GraphQLScalarType; }; resolve(parent: any, args: any): any; }' is not assignable to type 'GraphQLFieldConfig'.
I need help with workbench setup which is not showing on this video ...!
Pedro, I'm pretty new to creating my own backend and I have a noob question. If I were to follow your tutorial and deploy the application to the web, would anyone who is using my application be able to use the database? Or would I need to take extra steps to actually host a public server like that
I too would like to know the answer to this question. Did you ever figure this out?
I am wondering if I should learn typescript for a couple of days.
I know I should but am not sure how useful it is.
Anyway, thank you Pedro.
I would say that for a beginner it is better to wait and learn TS later. But if you feel comfortable with stuff like react or node, then typescript is really important. Every job requires you to use it because JavaScript is very prone to bugs. I know TS is a bit annoying in the beginning, but with time you will definitely start writing TS automatically
@@PedroTechnologies Following your nice advice, I completed the series and I love Typescript now.
By the way, at 9:00 in this video isn't it "node ./dist/index.js" in "scripts"?
Anyway, Great great thanks.
When deploying to the server, is it safe to have the mysql username and password in typescript?
Amazing content as always and can you please tell what is dev dependency and how to do it.
Dev dependencies are node packages that doesn't go into your actual project package but are there to help your developer experience.
Dev dependencies are usually linters (such as ESLint), formatters (such as Prettier), CLI tools (command line tools that do some project setups, code generations etc) and some more helpful tools.
In the pinned comment, Nodemon and Typescript are mentioned. Nodemon is a watcher that auto-restarts your server whenever you change your code base with ctrl+save. And Typescript is a language support things like types, autocomplete, linter, debug for .ts (typescript) files I think.
You can install dev dependencies with npm's `--save-dev` flag. Like this: `npm install "your-package" --save-dev`.
And your installed dev dependency packages go into "devDependencies" property of your project folder's package.json file.
How to add middlewares for specific mutations?
How does your editor automatically import the functions from the package?
It is an extension called react snippets
Any idea why autocomplete wouldn't be working? Everything else works fine.
this is aweseom you are my light thanks
subscribes ok
Hahaha thank you!
Hey @PedroTech , I love your content, recently i watched some of yoour yt vids to learn to use react for one sideproyect of mine. Now i´ve finished it and i need some help making it a build that i could put up on a server.
Its a CRUD app made with React.js MaterialUi Css, Express.js and Node.js
Could you give me a little advice, if you make a video about that sometimes it would be great, i think thats the only part that i miss from your tutorial videos.
Thanks in advance, keep it up.
Hey, thank you for watching the videos! I have a video on deploying a React, Node, Express, MySQL server. czcams.com/video/lwOsI8LtVEQ/video.html Just ignore the mysql part cause you are not using it!
@@PedroTechnologies thanks a lot for answering, actually im also using mySql so it will be usefull too!
As a fulltime vue developer, i was a little close to a component based js framework. But it was very hard to sit and learn react for once cause all of these arbitrary differences that vue and react have... you´v made that very easy for me. That been said thx for the effort and knowledge .
regards :D
There is a question. Why should we use GraphQL?
You skipped a bunch of stuff, yarn? tsc? Where did that come from?
i didnt understand at 2:16, the comand 'tsc' , cause i didnt see you installing it before ?
Hey, sorry about that! That is a typescript command, you need to install typescript globally for that to work. Here is the video where I explain this: czcams.com/video/SEnAS_ooHeA/video.html
Thankx pedro...👍
Awsome video!!
why do we need to put fields:()=>({}) instead of fields:()=>{}, what difference does it make?
When you write an arrow function like this: () => {}, it will return undefined, not an object, {} in this case is a scope. When you use it like this: () => ({}), you are returning a value that is an object.
Which software are you using to create this nice video?
I used to use OBS, but I find QuickTime Player to have better quality, so I used that for this video!
Hi Pedro!
I love your videos do you by any chance have a discord where we can join?
Yes! Link in the description!
Error => [nodemon] clean exit - waiting for changes before restart
I’m studying your youtube lecture, youtube clone ! When will the lecture updated?? Thank you 😊😊😊
Hey, I am very sorry about that, but I ended that series a couple months ago! It was taking too much of my time and I wasn't being able to handle it with my studies.
@@PedroTechnologies ok thankyou!!!! Then is it enough to just listen to the lectures that are currently available , youtube lecture??
There is value in the videos imo, but since I didn't finish the series I wouldn't recommend it! However if you want to, you can pick op from where we left and try to finish it!
can i follow this up with postgres? would that be different ?
If you use typeorm, it will be exactly the same!
@@PedroTechnologies thank you
How much changes will I do if i use Javascript instead of Typescript?
I believe you can't use typeorm with javascript, so that would be the only issue. The rest would be pretty much the same.
@@PedroTechnologies Okay Thanks :)
SOLUTION FOUND! Im getting this error when doing @entity(): unable to resolve signature of class decorator when called as an expression.
The runtime will invoke the decorator with 2 arguments, but the decorator expects 1.
Solution:
i had to go into the typeorm module
and go to the decorator folders
and go to each Entity.d.ts, PrimaryGeneratedColumn.d.ts and Column.d.ts file and add & any to every export declare function
timecode 15:35 script doesn't work for me,node cannot find module ts-node, i had to install ts-node globally,only then script worked
Interesting, I believe maybe I had ts-node installed globally!
Boa pedrao vc é brabo irmao, entra discord hj p nx coda junto po
Vou ajudar o povo no discord hj kkkkkkk Soq sempre entro por pouco tempo pq to em semana de prova!
@@PedroTechnologies De boas mano!!! Ontem eu tb tava corrido cm a cs50 hj eu entro pra nx troca ideia
Why are u not using type-graphql? It saves the trouble of creating additional types.
I love type-graphql, but I am still new to it so I want to practice more to make a video! I have been using type-graphql for about 2 months now on a side project, so I should use it in a future video soon!
@@PedroTechnologies any access to ur great side project just for knowledge u know :P
Hahaha it isn't open source! I am seeing where it goes, maybe a startup! But honestly we are just building an MVP for now, should make a video on it!
@@PedroTechnologies sure pro bro.
how to use mongodb can you explain plzz
I have a video series teaching the MERN stack! If you want to see, here is the link: czcams.com/play/PLpPqplz6dKxUYV3x_dqyNuPW0JAut9w3L.html
“src” is pronounced “source” not “S-R-C” because src is just short for source, it’s not an abbreviation like npm.
Yes! I just like to say src hahaha maybe I should start saying source in future videos!
Aq é Brasil krl tem q rexpeita
Meus inscritos BR sao os melhores namoral
@@PedroTechnologies Vc é pica irmao
how can i run this using npm
Just substitute the commands like: yarn add = npm install, and yarn dev = npm dev, yarn init = npm init
@@PedroTechnologies yeah I just ran a command npm run dev and my app is running thanks man you're awesome
npm init -y
Do you have to do all this to create a single table in a SQL database with Graphql? I don't understand how it is possible that they publish such tools as Framaworks that "help".
Hi! Thank you very much for this tutorial... I´m just at the beginning and i get this error:
> server@1.0.0 dev
> nodemon ./src/index.ts
[nodemon] 2.0.13
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node ./src/index.ts`
"ts-node" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
[nodemon] app crashed - waiting for file changes before starting...
Can you help me, please? Thanks!!