CRUD Tutorial - React, GraphQL, NodeJS, MySQL | EP 1 - Queries and Mutations

Поділитися
Вставка
  • Опубліковано 28 гру 2024

КОМЕНТАРІ •

  • @mehdiboujid8761
    @mehdiboujid8761 3 роки тому +11

    why aren t u adding nodemone and typescript as a dev? is it not necessary?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +2

      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!

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +3

      I am going to pin ur comment so that people see, cause it is indeed better to put them as dev dependencies!

    • @mehdiboujid8761
      @mehdiboujid8761 3 роки тому +1

      @@PedroTechnologies i hope the part 2 will release soon rn i am learning from you and ben awad cause u use similar technologies ^^

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +3

      Part 2 coming Thursday! Ben Awad is awesome! He made me get into typeorm!

    • @soltiscd
      @soltiscd 3 роки тому +1

      What's the best way to to setup typescript as a dev?

  • @VitalHipHop
    @VitalHipHop 3 роки тому +1

    Thanks!

  • @masj7786
    @masj7786 2 роки тому +10

    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({ .....

    • @NanWroblewski-he3gy
      @NanWroblewski-he3gy 8 місяців тому +1

      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
      }

    • @luanr9368
      @luanr9368 6 місяців тому

      thank you!

  • @romimaximus
    @romimaximus 3 роки тому +1

    i didnt understand at 2:16, the comand 'tsc' , cause i didnt see you installing it before ?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      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: ua-cam.com/video/SEnAS_ooHeA/v-deo.html

    • @romimaximus
      @romimaximus 3 роки тому

      Thankx pedro...👍

  • @hugoperez8501
    @hugoperez8501 3 роки тому +4

    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

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

    • @hugoperez8501
      @hugoperez8501 3 роки тому +1

      @@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

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

  • @domjag600
    @domjag600 2 роки тому +3

    Is createConnection() deprecated now? If so what is the best approach now

  • @ekeneidiagbor4678
    @ekeneidiagbor4678 3 роки тому +2

    10mins in and I had to pause, like and subscribe. Brilliant introduction and explanations. Thanks for making this video.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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 :)

  • @crecker05ru
    @crecker05ru 3 роки тому +1

    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

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Interesting, I believe maybe I had ts-node installed globally!

  • @chaddystrip
    @chaddystrip 3 роки тому +2

    superb tutorial! I learned a lot and I solved my 1 week problem in just 1 video. Thanks PedroTech

  • @lukelyu3264
    @lukelyu3264 3 роки тому +1

    For those who run "tsc --init" then get "tsc: command not found", run (npm): " sudo npm install -g typescript"

  • @SuboptimalEng
    @SuboptimalEng 3 роки тому +2

    Time to buckle up, and get my notepad for this 1hr tutorial 😇

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

  • @hvmanoid200
    @hvmanoid200 3 роки тому +2

    very useful, can't wait to see the next video, thanks Pedro

  • @nnaemekaish007
    @nnaemekaish007 3 роки тому +1

    I think one advantage of making advanced videos is that there are fewer resources so your content stands out. I might be wrong though.

    • @nnaemekaish007
      @nnaemekaish007 3 роки тому +1

      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?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      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!

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

  • @underrated_mono9770
    @underrated_mono9770 3 роки тому +2

    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.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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

    • @underrated_mono9770
      @underrated_mono9770 3 роки тому

      @@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.

  • @crecker05ru
    @crecker05ru 3 роки тому +1

    Great lesson,now i can change data through nodejs!Awesome!

  • @ashiqdey
    @ashiqdey 2 роки тому

    awesome series of viceo, i just love your way of teaching

  • @PanlasangMotour
    @PanlasangMotour 3 роки тому +2

    Thank you i am learning few in react i am switching to this kind of framework

  • @Lokoislive
    @Lokoislive 2 роки тому

    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.

  • @domjag600
    @domjag600 2 роки тому

    Great Tutorial - just wondering how do you add more tables to the schema - what is the pattern for this ?

  • @ИмяФамилия-г4ж
    @ИмяФамилия-г4ж Рік тому

    You are awesome, Pedro
    Thank you for what you are doing, man

  • @gmayas
    @gmayas 3 роки тому +1

    Have you created a CRUD (MySQL) without using Graphql or Sequelize, pure SQL in the routes or controllers?

  • @melod_reels
    @melod_reels 2 роки тому

    I need help with workbench setup which is not showing on this video ...!

  • @rabbyhossain6150
    @rabbyhossain6150 2 роки тому

    How to add middlewares for specific mutations?

  • @sob3ygrime
    @sob3ygrime 2 роки тому +1

    This series is great thanks :)

  • @hanieasemi
    @hanieasemi 3 роки тому

    There is a question. Why should we use GraphQL?

  • @PraxizC
    @PraxizC 3 роки тому

    Where would you add arguments like "first" or "offset" to make it paginated?

  • @triplodosheals
    @triplodosheals 3 роки тому

    Awesome tutorial to get started with graphQL

  • @erchis9
    @erchis9 3 роки тому

    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.

  • @Omer-fr1ze
    @Omer-fr1ze 2 роки тому

    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?

  • @ronyut1984
    @ronyut1984 3 роки тому

    Hi Pedro!
    Which vscode extension do you use for the folder icons?

  • @JorgeBlancoPhotography
    @JorgeBlancoPhotography 3 роки тому

    You skipped a bunch of stuff, yarn? tsc? Where did that come from?

  • @treefrog9392
    @treefrog9392 Рік тому

    Any idea why autocomplete wouldn't be working? Everything else works fine.

  • @efeimoloame9618
    @efeimoloame9618 3 роки тому +2

    How does your editor automatically import the functions from the package?

  • @mitchellwilson7649
    @mitchellwilson7649 3 роки тому +1

    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

    • @Yami1337Gaming
      @Yami1337Gaming 2 роки тому

      I too would like to know the answer to this question. Did you ever figure this out?

  • @mandarinnu
    @mandarinnu 3 роки тому +1

    Which software are you using to create this nice video?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      I used to use OBS, but I find QuickTime Player to have better quality, so I used that for this video!

  • @usmanmughal5916
    @usmanmughal5916 3 роки тому +1

    Why are u not using type-graphql? It saves the trouble of creating additional types.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

    • @usmanmughal5916
      @usmanmughal5916 3 роки тому +1

      @@PedroTechnologies any access to ur great side project just for knowledge u know :P

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      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!

    • @usmanmughal5916
      @usmanmughal5916 3 роки тому

      @@PedroTechnologies sure pro bro.

  • @arunkumar-te5cc
    @arunkumar-te5cc 2 роки тому

    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'.

  • @timelsaer6729
    @timelsaer6729 2 роки тому

    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

  • @mdmoinmoin8888
    @mdmoinmoin8888 3 роки тому

    Amazing content as always and can you please tell what is dev dependency and how to do it.

    • @erchis9
      @erchis9 3 роки тому

      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.

  • @gigakvachakhia4777
    @gigakvachakhia4777 3 роки тому +1

    can i follow this up with postgres? would that be different ?

  • @ricardotech
    @ricardotech 3 роки тому +1

    O+ brabo do yt ashaushuahsuas

  • @ManpreetSingh-ew8qs
    @ManpreetSingh-ew8qs 3 роки тому

    Awsome video!!
    why do we need to put fields:()=>({}) instead of fields:()=>{}, what difference does it make?

    • @gmnobrega0704
      @gmnobrega0704 3 роки тому

      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.

  • @Sergey-mr6be
    @Sergey-mr6be 3 роки тому

    Great tutorial. Thanks!

  • @giovanimadeira6845
    @giovanimadeira6845 3 роки тому

    Error => [nodemon] clean exit - waiting for changes before restart

  • @umerfarooq3121
    @umerfarooq3121 3 роки тому +1

    How much changes will I do if i use Javascript instead of Typescript?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      I believe you can't use typeorm with javascript, so that would be the only issue. The rest would be pretty much the same.

    • @umerfarooq3121
      @umerfarooq3121 3 роки тому

      @@PedroTechnologies Okay Thanks :)

  • @paulm.3572
    @paulm.3572 2 роки тому

    When deploying to the server, is it safe to have the mysql username and password in typescript?

  • @TrueHumanNature74
    @TrueHumanNature74 3 роки тому +1

    how to use mongodb can you explain plzz

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      I have a video series teaching the MERN stack! If you want to see, here is the link: ua-cam.com/play/PLpPqplz6dKxUYV3x_dqyNuPW0JAut9w3L.html

  • @chuyin2k2
    @chuyin2k2 3 роки тому

    Thanks for the good explanation

  • @김땡땡-v6c
    @김땡땡-v6c 3 роки тому +1

    I’m studying your youtube lecture, youtube clone ! When will the lecture updated?? Thank you 😊😊😊

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      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.

    • @김땡땡-v6c
      @김땡땡-v6c 3 роки тому +1

      @@PedroTechnologies ok thankyou!!!! Then is it enough to just listen to the lectures that are currently available , youtube lecture??

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

  • @flamebender6022
    @flamebender6022 3 роки тому +1

    Hi Pedro!
    I love your videos do you by any chance have a discord where we can join?

  • @shubhamkhandekaryt
    @shubhamkhandekaryt 3 роки тому +1

    how can i run this using npm

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Just substitute the commands like: yarn add = npm install, and yarn dev = npm dev, yarn init = npm init

    • @shubhamkhandekaryt
      @shubhamkhandekaryt 3 роки тому

      @@PedroTechnologies yeah I just ran a command npm run dev and my app is running thanks man you're awesome

  • @breadcho7446
    @breadcho7446 3 роки тому +2

    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.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Hey, thank you for watching the videos! I have a video on deploying a React, Node, Express, MySQL server. ua-cam.com/video/lwOsI8LtVEQ/v-deo.html Just ignore the mysql part cause you are not using it!

    • @breadcho7446
      @breadcho7446 3 роки тому

      ​@@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

  • @wjdrk70
    @wjdrk70 3 роки тому +1

    good video like u!

  • @twitchizle
    @twitchizle 3 роки тому +1

    thanks

  • @Danni_Design
    @Danni_Design Рік тому

    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

  • @IkraamDev
    @IkraamDev 3 роки тому +1

    “src” is pronounced “source” not “S-R-C” because src is just short for source, it’s not an abbreviation like npm.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +2

      Yes! I just like to say src hahaha maybe I should start saying source in future videos!

  • @gmayas
    @gmayas 3 роки тому

    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".

  • @trerou4300
    @trerou4300 3 роки тому +1

    this is aweseom you are my light thanks
    subscribes ok

  • @ricardotech
    @ricardotech 3 роки тому +1

    Boa pedrao vc é brabo irmao, entra discord hj p nx coda junto po

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Vou ajudar o povo no discord hj kkkkkkk Soq sempre entro por pouco tempo pq to em semana de prova!

    • @ricardotech
      @ricardotech 3 роки тому

      @@PedroTechnologies De boas mano!!! Ontem eu tb tava corrido cm a cs50 hj eu entro pra nx troca ideia

  • @ricardotech
    @ricardotech 3 роки тому +1

    Aq é Brasil krl tem q rexpeita

  • @gmayas
    @gmayas 3 роки тому

    npm init -y

  • @janamodrego5984
    @janamodrego5984 3 роки тому

    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!!