Typescript GraphQL CRUD Tutorial

[@raymondmichael4987]

Yes, please let's expand it bro. Nice pace and to the point. Greetings from Tanzania 🇹🇿

[@chrispetten2473]

Awesome video, would love to see more, especially how to add resolvers for relationships. Maybe something like movies to directors? Keep up the great work Ben. Also, I think we need to start calling you The Exorcist...because there are "nodemons".

[@rallokkcaz]

Ben! These videos are exactly what I wish I could tell people about modern JS/TS development. Thank you for spreading the word of sane JS developers.

[@Sam-xv5ko]

I can see the smile on the face when saying I just created this CLI tool. This is kind of proud of myself that I want in my life.

[@richdoan7769]

If you are already familiar with GraphQL, Apollo, and Typescript, this is a good tutorial. If you're not, then it's not.

[@CayoFroes]

I spent the whole weekend searching and reading how to use typescript with graphql. After I finished it, you uploaded the video! Sad but happy.

[@PeterJaffray]

Thank you for this introduction. I really appreciate how you take the time to explain the context of what you are doing. It's refreshing to have someone put those smaller contextual pieces together for me. You are awesome!

[@md.akib5124]

I just simply love your way of creating js project ben.

[@bawad]

thanks

[@fabioramatis2373]

Awesome work! I knew your channel yesterday by config my vim setup and I love your content! I'm beginning with typescript because of you and I'm loving the benefits

[@MrSnakeGGG]

Great video man! You really helped me to figure out how to make typegoose and type-graphql work together with this typeORM example.

[@ijazkhan3335]

The way you pronounced "nodemon" :D

[@PROFjavi]

if the great Ben Awad pronounces Node Monitor as Node Demon, it makes him more human and gives me confidence in completing his tutorials. Don't change, Ben

[@kyle7382]

their icon is a devil/demon tho, I think he might be right

[@PROFjavi]

Guess he's not human after all

[@ijazkhan3335]

@@PROFjavi Yeah.. that's messed up lol

[@mbembaships]

😂 I lost my shit 😂 too funny

[@marcioferlan]

Good one, Ben! I really loved this video.. Could you please add more features to it? Like simple auth handling, validation and entity relationships?

[@bawad]

sure

[@marlonmarcello]

Great video Ben! You should extend this tutorial, would be great to see how you implement the frontend on top of it with typescript and how you deploy. Interested to know your preferences and your take on those.

[@bawad]

Checkout this for how to integrate with a react/next.js frontend kzbin.info/aero/PLN3n1USn4xlkDk8vPVtgyGG3_1eXYPrW-

[@bawad]

also just added github.com/benawad/create-graphql-api#how-to-deploy-to-heroku

[@reactivicky]

awesome video. We are using type-graphql in our company project now :)

[@-Jakob-]

There are also nice @ArgsType() and @Args decorators, using them you don't have to use an additional scope within your parameters and you can pick only some parameters you actually want to offer on your parameter definition and you also can set default values, example: @Args() { title = "default title", description = "default description", }: CreateEventArgs The parameter class (here named CreateEventArgs) is then decorated with @ArgsType() instead of @InputType()

[@bawad]

The one thing I don't like about that decorator is it's virtual, the graphql mutation wont take a object type but the individual args

[@DaumChannelGamePart]

If sqlite3 does not install properly, try installing version ^4.1.1 (Add "sqlite3": "^4.1.1" to dependencies of package.json.)

[@everythingdivi6970]

Thank you so much! Do you have a simple sequel on how to connect with react?

[@skryonline5825]

Loved it! Just perfect workflow. Similar to Nest.js

[@qwerty01453]

Would love to see a video on graphql authentication!

[@bawad]

kzbin.info/www/bejne/aGaqhGODgblrgLc

[@superfunsurf]

great stuff. yeah we want some expanded functionality for sure. thanks much and rock on.

[@Trapezoideris]

Such a useful tutorial ben Thank you!

[@mertavsar5033]

Well explained. Thank you for the effort!

[@prathamkesarkar]

Please make more videos on Type script + GraphQL

[@bawad]

You're in luck, I make a ton of typescript and GraphQL videos

[@nilmendes7710]

Excellent tutorial, helped me a lot! Thanks for sharing your knowledge and time! Success in your projects!

[@brzeczyszczykiewicz4476]

Very good, thank you!

[@ScottSpencePlease]

This is DOPE!! Thanks for this Ben 🙏 I've used Prisma in the past with GraphQL Yoga for the middle-wear and it was such a PITA for adding new fields and having to regenerate everything, this looks a lot more simplified! So, for me Ben, I'd like to know how to get this onto a sever somewhere, Zeit's now or something similar.

[@bawad]

sure thing

[@bawad]

Added a section on how to deploy: github.com/benawad/create-graphql-api#how-to-deploy-to-heroku

[@ScottSpencePlease]

wheeeeeeee! Thank @@bawad I'll have a play now!!

[@andreyfedarovich9918]

Thank you. It’s looking pretty cool. Is it possible to make a nested mutation? For example, if movies have an array of some tags, how to mutate them

[@lamthaison2722]

Bro!!! You always make awesome videos, i can’t stop checking ur chanel to make sure any new videos. By the way, would you like to teach online or have you had your own online course? I really want to purchase and learn from you

[@bawad]

No plans to do paid courses right now, focusing on free youtube courses and tuts

[@mrbiditY]

Hey! Nice video as always! Could you do a video about robots.txt and sitemap? Would be super nice to see some of the best practices that you always deliver on those topics too! Keep up the good work!

[@bawad]

I actually never create sitemaps, and rarely use robots.txt. I'll sometimes stick a route in robots.txt if I don't want it picked up by google but that's about it

[@linuske]

Hi Ben :) Congratulations, you're really insightful. Quick question though, is it possible to use ts-node-dev instead of Nodemon ?

[@bawad]

yes

[@craigjohnson8279]

Great video Ben! Would you please do a follow up video on connecting this with React, TypeScript and @apollo/react-hooks?

[@bawad]

checkout how I do it in this video kzbin.info/www/bejne/aGaqhGODgblrgLc it's using different queries/mutations but the setup is the same

[@craigjohnson8279]

@@bawad Awesome, thank you!

[@mehdiboujid8761]

i ve googled everywhere it s seems a lot of people having the same problem, yarn install throw an error related to sqlite3 (i am using wsl2)

[@chrispetten2473]

I had a question about the dev dependencies. I noticed that in some of your previous projects that are structured very similarly to this one, you used @types/graphql. However, when I initialized the project that wasn't included, and it didn't seem to affect anything. Is there a reason for excluding/including @types/graphql? Are they included in type-graphql?

[@bawad]

@types/graphql is now included with the graphql package

[@Petar-...-Nikov]

Great tutorial. Thank you!

[@paupang781]

Awesome

[@arpee1337]

Hey Ben! What's you're setup to record these videos (screen casting/recording, green screen, camera, etc)?

[@bawad]

audio technica 2100 + canon eos sl2 + green screen + obs

[@jeanlikedenim]

Would love to see how you interstate subscriptions with this. And is there a better way to pass in resolvers into the buildSchema function. Example create a function that reads all the resolver files and return an array

[@bawad]

I might do a subscription template. typegraphql.ml/docs/bootstrap.html

[@Manivelarino]

Can you make an updated version of this video? I wanna know what you changed after using this stack for a year.

[@JoseAlvarez-lb6ng]

Thx for the video learned a lot, do you know how to do mutations for entities with ManytoOne relations?

[@samibarasi1041]

Very promising, but one problem I have with typeorm is, that it doesn't seem to give back any result if an update was successful or not. So how do you know if any row was affected by the update?

[@bawad]

Does it not return the rows affected?

[@samibarasi1041]

@@bawad No, it returns just empty arrays.

[@bawad]

I think the query builder might give you the rows affected typeorm.io/#/update-query-builder

[@DanishAnton]

This is great! Can you make a video about pushing a react app with graphql / typescript orm / postgres backend into production (ie. DigitalOcean, AWS, etc)? I also keep reading recommendations to run postgres as service to having to deal with backups, reliability, etc. Thoughts?

[@bawad]

github.com/benawad/create-graphql-api#how-to-deploy-to-heroku kzbin.info/www/bejne/d5WrqHWBgLZ7kJY I think they are great if you want to trade money for less dev time.

[@anzo.p]

awesome!

[@petersantoso2605]

hi Ben, thanks for the great tutorial..I have a question: is it possible to use optional parameter to query graphql? for example: with only Movie(title:string|null, length:string|null){} .. and will it return all rows if we dont pass any params : `{Movie{title length}}`..

[@bawad]

! makes it non-null, so you can do title: String

[@petersantoso2605]

@@bawad thank you for the answer. btw your WOW-build site has some bug, content exceeds the box .Please consider to limit the title as well (replace with ...)

[@bawad]

thanks, do you have a link to the build that was overflowing?

[@petersantoso2605]

@@bawad this build filthy-casual-enhancement-shaman-talent-tree on the homepage

[@bawad]

thanks

[@0916dhkim]

I assume you handle db errors with standard try-catch?

[@philippschmidt78]

Any way you could showcase how to do all those CRUD operations via inheritance, both typeorm and type-graphql wise? So we don't have to implement them for every entity, but simply inherit all basic resolvers?

[@philippschmidt78]

And maybe also how to automatically get "edges" and "nodes" fields (connections?). I never understood how e.g. postgraphile creates those...

[@bawad]

I tried this once, but it was a pretty fragile abstraction and decided it wasn't worth it

[@darrenz5557]

Do you think graphql would work with unity? I am confused how we'll be able to send the query format,

[@myhendry]

Hi Ben, can i seek your advise? Im toying around with TypeGraphql unions and came across following statement... Be aware that when the query/mutation return type (or field type) is a union, we have to return a specific instance of the object type class. Otherwise, graphql-js will not be able to detect the underlying GraphQL type correctly when we use plain JS objects. What does it mean? Im able to get the TypeGrahql unions working using Graphql playground so i'm not sure where im supposed to return a specific instance of the object type class? and also what I need to do to return a specific instance of the object type class? Thanks

[@bawad]

I would actually look at the resolveType option instead

[@myhendry]

@@bawad Noted Ben. Thanks

[@kps2642]

what do you think about prisma? I've been trying it out recently and I think it's pretty cool. Great vid as always

[@danielfs]

Is it exclusive for graphql or can I use with just express?

[@bawad]

I like TypeORM better than Prisma v1, but I'm interested to give Prisma v2 a try when's it out and reevaluate

[@Soundtech98]

Hi Ben, nice to see more of these type-graphql videos. Quick question: I worked through the Type-GraphQL series and created a higher order resolver for the 'getAll' logic (ie. movies() ) I wonder if you could make a video addressing the where and orderBy selectors. I know Prisma auto-generates them for each entity, how might we do this with type-graphql? I found your response to stackoverflow.com/q/54192483/4411080 and that's essentially what I am looking to reproduce. That would be fantastic.

[@bawad]

I'm actually not sure how to do it without introducing a lot of complexity. Because you would need to iterate over all the fields in the entity and I don't know a simple way to do that.

[@temirzhanyussupov6997]

Cool video liked it!

[@dazzcelt]

Any Plans to expand this Ben?

[@oskioskioski]

I spent hours today trying to make this work with arrays of objects. Typeorm has decorators for ManyToOne() fields and handling relations, but I couldn't for the life of me get the data saved to (and loaded from) the database. Have you tried it? Any tips?

[@bawad]

kzbin.info/www/bejne/bpy9aIpjl65op7M I think I'll be doing some more relationship videos soon

[@RK-gm4pd]

why do you write script start exactly with --exec... It works for me just "nodemon index". Thank you

[@fishamajig]

Passing --exec tells nodemon to run a different program, instead of node. He's using ts-node as the executable since it's a TypeScript project. You can run and monitor other programs, such as python, ruby, etc. as well.

[@EJIROEDWIN]

Basically, looks like in new ApolloServer the formatArgumentValidationError is not needed anymore as

[@kevthatdevs3370]

Good stuff bro, I was wondering if you could do a similar video but hook it up to MongoDB and explain how the database gets updated under the hood?

[@bawad]

I don't know mongo that well

[@manjime]

Can you show how it integrates with class-validator, error handling and authorization in general?

[@bawad]

checkout kzbin.info/aero/PLN3n1USn4xlma1bBu3Tloe4NyYn9Ko8Gs

[@mastercdgb]

no-demon! I've been saying it wrong all along! LOL!

[@mertakbulut2541]

Suppose we have a table with 20 columns and 5 relationships. We would like to get 5 column and 1 relationship columns, with this example we took all of the columns data from table, return all of them. After than graphql picks and shows, is there a way to optimize the query ? Thanks for the video.

[@bawad]

yes 1. you can read the info parameter in your resolver and determine the fields requested by the user, then optionally join tables 2. you can use dataloader to optionally load relationships kzbin.info?search_query=benawad+dataloader

[@firmanjamal2871]

Are you using Type-GraphQL for Saffron?

[@bawad]

Yeah

[@reynaldomarinho2]

nice!

[@judeafam6441]

@ben awad, please can you do a react frontend for this? Thanks

[@bawad]

kzbin.info/aero/PLN3n1USn4xlkDk8vPVtgyGG3_1eXYPrW-

[@keithalleman9183]

Any chance of doing unit testing for these using jest? Possibly with start to finish of any test util functions required?

[@bawad]

kzbin.info/www/bejne/nKm8lJWtapugmM0 kzbin.info/www/bejne/sIObm36Ibs2hfKM

[@keithalleman9183]

@@bawad ​ I don't know how I missed that playlist, I had started a few of your other videos that were showing some testing but like mid way through when you already had multiple helper utils created and I felt overwhelmed jumping in, but this is definitely something I'm going to check out tonight and the video prior to it.

[@qbamc]

Im using the same but with mongoDb. Can you create a video about file upload ? lets say creating a user and uploading a profile picture in the same mutation. Thanks for your videos man.

[@bawad]

kzbin.info/www/bejne/qWSYdqB3o56Nopo

[@Kprywatne]

what's up with the thumbnail? I noticed the last four/five videos you made yourself bigger and bigger. You feeling yourself more and more I see? XD

[@bawad]

😜

[@abrahamvargas6818]

"message": "Connection \"default\" was not found.", why ?

[@luebberteada]

When wrapping app.listen in a function like that, how do we export the app variable to do endpoint testing with like supertest and jest?

[@bawad]

if you want to do that, I would do a named function and export it

[@tiagocunhafernandes6607]

Thanks, to Make this tutorial more complet you can add movies subscription

[@bawad]

Yeah

[@alexxu2314]

In Windows 10, when finished command 'npx create-graphql-api typescript-graphql-crud' and ran 'npm start', I got ''ts-node' is not recognized as an internal or external command, operable program or batch file.' What's wrong?

[@AbhishekKashyap11]

You need to install ts-node. Do an `npm install` on the project if it still doesn't work try installing ts-node globally by running `npm i -g ts-node`

[@malachitetrip830]

Bro, can u create one video with graphical view of button combinations that u pressing, please?)

[@bawad]

benawad.com/vim kzbin.info/www/bejne/iGPTc4p6o8t9j5o

[@malachitetrip830]

@@bawad Oh, bro, thx!)

[@royalbhati7837]

That's node + mon = nodemon :p

[@MrBibou23ca]

Do someone knows how to create a live search bar with GraphQL using regex ?

[@MrBibou23ca]

like the search in youtube or google

[@bawad]

What part of creating that are you unsure about?

[@MrBibou23ca]

@@bawad The GraphQL Query structure

[@MrBibou23ca]

Now I can get result only if I write the same name, saved in database. ex: if I search for "Car" , I should write it like it is, if I write "car" or just "ca" I get nothing !

[@bawad]

how are you doing the db query? You might want to try using the ilike operator

[@animeguy8547]

Can someone help me with how to do relations in resolvers and entities? Can't quite get it yet.

[@bawad]

kzbin.info/www/bejne/bpy9aIpjl65op7M

[@naynyamish270]

ts-node-dev is much better and faster than ts-node + nodemon

[@bawad]

twitter.com/benawad/status/1211700652549779456

[@theemacsen1518]

Hey Ben, have you ever tried using Oni vim? Its a GUI neovim and it seems pretty good github.com/onivim/oni

[@bawad]

I haven't, do you like it?

[@theemacsen1518]

@Ben Awad Yup, its amazing. I would definitely recommend it. Also since you are familiar with vim I would recommend using the minimal config that Oni has: github.com/onivim/oni/wiki/How-To:-Minimal-Oni-Configuration Here is how my Oni Vim looks like: imgur.com/F8i1kG4 imgur.com/gallery/lhxaB8U

[@bawad]

cool, I'll have to give it a spin sometime

[@aurangzaib5435]

Using typescript with graphql is not a good idea. Graphql is already strongly typed.

[@bawad]

I actually have the opposite opinion. Typescript is great with GraphQL *because* they are both strongly typed and you can share the types