GraphQL With React & Apollo [1] - Express GraphQL Server

In this series we will build a small app using GraphQL, Express, React & Apollo. In the first part we will implement our GraphQL Express server. We will use SpaceX data using their API.
Sponsor: Eduonix
AWS: www.indiegogo....
Data Science: www.kickstarte...
Code:
github.com/bra...
App Demo: (If I still have it up)
polar-wildwood...
GraphQL Server Series:
• Building a GraphQL Ser...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@TraversyMedia]

This should be a 4 part series about 30 mins each. I may not get all the videos uploaded today but will get them up by tomorrow....thanks guys!

[@SpiritualFacts]

When is your flask course going to be released? You talked about it getting released soon in one of your office tour videos. Remember?

[@TraversyMedia]

@@SpiritualFacts I was going to do django and flask but decided to to django. However, a flask course is something I may do. Good chance

[@axe-z8316]

really seems like the old punishing way to do this. Have you tried with yoga ? Or simpler types and resolvers ? type Author { id: Int! firstName: String lastName: String posts: [Post] } and a separate resolver is absolutely the way to go, cleaner files , easier to spot errors .So is async await VS axios.

[@axe-z8316]

I've redone your code, using what I think way better tools and way more open to changes. here's to big lines: exports schema: typeDefs = ` type Launch { flight_number: Int mission_name: String launch_year: String launch_date_local: String launch_success: Boolean } type Query { getlaunchs: [Launch] } `; resolvers: const axios = require('axios'); exports.resolvers = { Query: { getlaunchs: async(root, args, { Launch }) => { return axios .get('api.spacexdata.com/v3/launches') .then(res => res.data); } } } server : ADD const { ApolloServer, gql} = require('apollo-server-express'); const { typeDefs } = require('./schema') const { resolvers } = require('./resolvers') const server = new ApolloServer({ typeDefs, resolvers }); server.applyMiddleware({app}); app.listen( PORT , () => console.log(`🚀 Server ready at localhost:${PORT}${server.graphqlPath}`), );

[@АлексейАлексеевич-ш7ю]

Thank you very much! Guides in the docs is not so straightforward as you explain!

[@IamMclov1n25]

this man actually listens to his viewers. Thanks a million Brad you truly are a gift to this world.

[@nepseupdatenepal1293]

Lot's of Respect from Nepal. You are God for the third world countries who can't afford to learn such stuff. Getting such a high quality of content for absolutely nothing is a bliss. We all are blessed to have you as our guide to the path of technologies.

[@oliversun8886]

Thank you for this tutorial! Not only this but all your series. Nine months ago I started with your CrashCourse into HTML with absolutely no knowledge of web dev and I just finished this (Graphql Apollo SpaceX). I picked up CSS, JavaScript, NodeJS and React along the way thanks to your tutorials.

[@awaraamin6850]

No mater what this man shares I just would love to listen to! You are something man! Thank you

[@sttevemwangi]

You are today's Bucky Roberts. Keep it up. Your project-based approach is a model that makes you stand out. Blessings.

[@kadekeqw23]

There are so many ways to setup GraphQL from all the tutorials I have been watching, this makes the most sense to me...

[@amarmohammed5644]

Brilliant as always. Maybe some encouragement to stop at certain points and give it a go themselves. 33 mins is a perfect stop where I paused it and gave it a go myself. Thank you! I recommend you to everyone!

[@LesAnimes]

I was waiting for your Apollo stuff, Thanks a lot 😁

[@TraversyMedia]

You're welcome, thanks for watching

[@iqwebserve3973]

Brad, still useful 5 years later... thanks man.

[@zeynabmahjoob3687]

Your videos just have so much impact difference in my career and took me to the next level! LOVE YOU TRAVERSY!

[@chiragjain291]

At 8:00 use const { graphqlHTTP } = require('express-graphql'); As per Docs - the import is a named one

[@billionaire.academy]

spent 30 minutes scratching my head over this error. Until i googled it :p

[@Amed0290]

@@billionaire.academy same. Thx Chirag

[@chizuru1999]

Ye i haven't run the code yet but i was like how did he open the function directly lol 😆

[@beknazbaktygulov1386]

@Chirag You are the real MVP

[@hemicar92]

I was just getting into React, this series came in the best possible moment. Thank you Brad, much love

[@JonStolte]

Been a long time watcher of your videos, just wanted to say what a great job you do and I always find your tutorials very informative and details. Awesome work man!

[@emre_hstn_TX]

I always look for your tutorials when I want to learn anything related to Javascript and its frameworks. Thanks a lot for well-prepared tutorials.

[@KalleZz_]

Watching this 2 years later and SpaceX API is actually GraphQL :D

[@rafaelcalderon6658]

Dear Travis what kind the ancient sorcery you do that you always have such amazing way to make understand everything... YOU ARE THE BEST TUTORIAL MAKER IN THE WORLD, and it is curios that even when I have some backgground knowledge I even learrn more... So THANK YOU

[@sarahmattar]

For anyone watching in 2020 or beyond, graphqlHTTP from express-graphql is now a named export, so you will have to put it in curly braces when requiring it: const { graphqlHTTP } = require('express-graphql');

[@webdev1619]

Some day I wanted to study this stack. you read my mind! Thanks again.

[@jeyraj3075]

Me too...

[@bodolawale5448]

rocket_id is a string so. args: { rocket_id { type: GraphQLString } } Great Video BTW

[@guylemay1471]

I am finally done with building a SAFE working area on my pc ....just in time for this tutorial - so helpful, thank you! Now, going to the next lesson ....

[@fluntimes]

I'm loving this. It always makes me wonder why people thumbs down these awesome value videos clearly done with generosity and care. What's not to like??

[@damilareemmanuel]

Awesome. I have waited for you to post something on graphql for so long. Thanks Brad

[@Onserio.]

This is why I recommend Traversy Media to anyone curious about web development

[@prakashale1627]

I watched your mern front to back and really impressed, and now I am here after, good on ya mate

[@sumankharel4693]

Will come back later to watch. Liked it beforehand to show appreciation 🙏🏾

[@RuudvanZuidam]

YES YES GraphQL With React & Apollo from Brad, so Happy Thanks Brad, haven't even seen it jet but count me in for the for a Udemy Pro version

[@Thesrik23]

Hey Brad, thanks for your amazing work. You're a great teacher

[@gsandell]

A tip: make sure your SpaceX api endpoint URL matches Brad's. Or, to put it another way, when you go to the SpaceX github page, make sure you click on the "V3 Docs" link. The page comes up with the V4 Docs by default, and for that url you'll get nulls for all your fields except for flight_number.

[@jeredadkins]

Thanks for adding this!

[@melonytips]

yes! now there is even v5, the reason why it shows null is because the fields are no longer named like they used to. you can easily take a look of what data you want and rename the fields in your code to match the database. Sorry to post this but maybe it can help other people late to the game as me

[@user-js9hn2nj6n]

Yeah and you can no longer get rocket info like here as they've changed the structure and now rocket has only id so you can't really get any rocket info for the launch :/

[@sahanavenkatesh3284]

Could not get a better explanation. Saved !

[@mdibound]

Fantastic introduction to GraphQL, React and Apollo

[@stephangriesel]

YES!! Been waiting for this. Thanks Brad, can't wait to get started!

[@shraeychikker694]

Always coming out with great content! Thanks Brad :)

[@anikethsaha5064]

Finally Really looking forward for ur setup and packages u r selecting cause they already confused me enough

[@vincentsolon3216]

I intall momentum, because I saw your beautiful inspirational quotes when you open a new tab.

[@tonkihonks3430]

Please never go away from our lives Brad Mentor of us all!

[@eugenemusebe4963]

Heaven sent. You are awesome brad, thank you very much

[@joeuser9690]

Thanks man, you and the net ninja are the best

[@ryukikuga5760]

I love that you started this from scratch!

[@KochharAmandeep]

Yes yes yes yes yes yes yes yes that was exactly i am working on and it will be so helpful. Thanks a lot brad sir

[@davidconnelly]

Look like a really nice project. Good luck with that one.

[@alkismavridis1]

Great video! Thanks a lot!! GraphQL rules... For the java-loving people, I personally use the library graphql-java-tools and I am super satisfied.

[@BigHistoryBuff44]

thanks so much Brad. next up, the new loopback 4 :)

[@nadir2k]

love it whenever i hear the intro sound

[@marswor]

in the rocket query the id of a rocket is rocket_id and is actually a string not an int, so in order to have that working you need to change the type to GraphQLString.

[@zsmain_1520]

man i need to subscribe this you explain this pretty much in a perfect way.

[@abdelhamidbacha7335]

thanks a loot man you helped me understanding the chemas

[@DavidCSaint]

Thank you for all this amazing content. you rock.

[@alfredoro2664]

As always, great tutorial. Thank you very much. I hope that you can make about lazy loading and React.

[@FattehHummus]

You are amazing. Thank you so much, you're a life savior!

[@Gbd279]

Correct me if I'm wrong but you're not making smaller requests. You're returning more precised data but the request to the API is exactly the same size whether you ask for 2 fields or 200 fields.

[@patrickgichini1754]

That's the clarification I've been looking for as well. The only limiting that's happening is on columns only I guess.

[@SopheakVatt]

I love all your videos. I can't wait the graphql with react on real application on udemy

[@shloimiminkowicz4188]

Really nice series Brad !! as usual you are the best !!! Are you considering making a udemy course with react, apollo, graphQL and potentially a database ?

[@ujjalkar3243]

Thank you very much brad... i'm looking for this..

[@jahjahtruth]

You heard of deadheads? Well I'm a Traversy Head!! I could spend my whole life doing Traversy tutorials!

[@rajashekarmunigala2548]

Amazing for the people like me i do not have any knowledge on GraphQL

[@TheAshishJust]

Is GraphQL supports media types? We want to fetch and show video using graphQL which is in react application with Apollo client.

[@iali3903]

GraphQL is just amazing !!

[@MathieuBourmaud]

Amazing tutorial, as usual. Thank you

[@godhandinfamous]

thanks brad, this will be awesome

[@zhuolintsai9030]

You are awesome! Thanks Brad.

[@maxk6655]

Awesome content. Thank you so much for you hard work. When you have time can you make video about AWS. Thanks again!

[@kapilc]

Liked you great work as I always do. Awesome tutorial series. Instead of MongoDB, can you please show how to save and retrieve data using Neo4j? It will be a complete GRANDStack series.

[@daniellaerachannel]

god bless you man!

[@Suriprofz]

Thanks for the upload! Great stack, only missing rabbitmq hehe

[@everythingisfine9988]

Awesome presentation! Been wanting to learn this for awhile. Have you’ve tried this with lambdas?

[@chizuru1999]

"I did some coding off camera" is not valid on Brad's channel! 🤣🤩

[@gargameo4560]

if you're getting an error: "graphqlHTTP is not a function", then in your server.js use ```const { graphqlHTTP } = require("express-graphql");``` - must be named import

[@linuxgenius4667]

up for react/next fullstack with graphql + express front2back on udemy, this is what i am trying to clear my head now a days, your MERN Stack front2back helped and encourage me alot ... please start working on udemy course

[@igorizviekov]

Its seems like a solid course! Does it cover file uploads with apollo?

[@markod3957]

Brad this is a great tutorial!

[@harshitpant3067]

Awesome. You should have used graphql tag to save a ton of work

[@pikachu5223]

HELP! If i have my own mongo database: what should i put into resolve(parent, args) ? Thanks!

[@brindch8372]

The logic on how you query(fetch) or mutate(insert, update, delete) data using mongoose. Just make sure return the provided data.

[@pikachu5223]

@@brindch8372 thank you bro

[@onecarwood]

Do you think WP.org is still a viable option for sites other than blogs? Just asking because this seems to be the future, stacks like this or Jamstack.

[@codedbychavez8190]

Brad is super awesome!!

[@alpercaner2923]

if we have to get rockets subtype from another backend, is it possible to do some optimization in the resolve() function. if we need need rockets subtype in our graphql query we need this extra backend but if we don't have in our query we should't make requests to rockets backend. Can we do this distinction in graphql server?

[@glebsabakarov2752]

Hey Brad, why you are not using PM2 in you nodejs tutorials?

[@Shakas420]

Do you have to create a new GraphQLObjectType everytime you go deeper into the API's response's levels?? Like you did for RocketType. If I wanted a value that's inside an object inside an object inside Rocket, would I need to create two more Types just for one value? Thanks in advance :)

[@Crevulus]

yes

[@Crevulus]

Get s bit more complicated when you need to go into an array within the object, though. SpaceX's V4 API has a lot of arrays, and I still can't figure out how to query key:value pairs within those arrays.

[@user-js9hn2nj6n]

I want to do the same thing, have you managed to do it? :D

[@shafidrmc]

Kind of like a silly question, but how do I convert the function to async-await? I am kind of having a hard time trying to convert it? Like what will be the equivalent code for converting it to async-await? Thanks

[@qanisz]

async resolve(parent, args) { const res = await axios.get('api.spacexdata.com/v3/rockets'); return res.data; }

[@pijusmilinis2260]

Great video !!! would love to have an udemy course of graphql !!

[@xx5m1l3xx]

Hey Brad, do you have a Udemy course in the works covering graphql?

[@marcellciszekdruzynski]

Awesome Brad!

[@papidey23]

thank you for this video! do you have a video about consuming this API from React? maybe with Apollo client?

[@malikgenius4u]

Awesome choice brad, please please start wirking on udemy course on react, express graphql front 2 back or maybe should use next.js as a frontend .. cant wait for it ...

[@prakashale1627]

You are great brad

[@patrykbartosevic9415]

Little typo error single rocket id type is a String not a Int 33:55 :)

[@ammarhussain6401]

For a single rocket you are using id with type GraphQLInt while in the docs at end point (api.spacexdata.com/v3/rockets/{{rocket_id}} ) it accepts rocket_id with type String. Please add a note in the video.

[@argeelearner3978]

Please make a full stack Udemy course on how to make an eCommerce store.

[@Shakas420]

Take a look at Wes Bos's course: Advanced React & GraphQL. He builds a complete eCommerce store using Apollo as well

[@blokche_dev]

Hi Brad, do you plan to make something similar with Vue.js?

[@OronCulzac]

I just know HTML, CSS and basic JS and jQuery, would I be okay following along? Or this would be out of my league?

[@n_fan329]

Oron Culzac you will be lost bro , u have to get yrslf bit with react and basics and RESTapi in order to get most of these tutorials 👍

[@a-raheemjamaal5564]

You the best Brad

[@jayasrichinta2544]

Hi.. will you please explain how to use react final form, material UI, react hooks and graphQL with Mongo db to create a website?

[@awaisraza2285]

You are awesome Brad

[@rtorcato]

Not sure why you are not using gql from apollo-server. You can just declare your types like this const typeDefs = gql` type Query { Name: String } `;

[@user-js9hn2nj6n]

Hi all, need some help with this: how do I update the schema to get to the nested values of the launch - I want to display the badge which is nested under launch so the query would like this query Launch { launch { links { patch { small } } } } thanks!

[@narzantaria1102]

It should be good the videos about GraphQL using Relay modern (Mongo/Express/React)

[@pigbenis11]

great tutorials keep it up!

[@Karinnederland]

Could anyone explain please what are parent, args in the Root Query? Is it still working on the updated version of GraphQL?

[@emyboybeats4330]

Hey Brad, can you do a tutorial on PWA (progressive web app) with offline mode using React??

[@milanm6538]

What are the advantages and disadvantages of graphql and restAPI, when should we use one or other?

[@blackwhattack]

With REST you always get the same data when fetched from a server. Consider when you need a small portion of that data. You'd first download the whole json and then choose what you want. This results in unused data. With GraphQL when you fetch the data you're specifing what you want. The server looks in the database and returns only what you need. Here's where I don't understand the point of this tutorial. I know it's for learning and someone smarter should correct me if I'm wrong but here the GraphQL api is just a wrapper for a REST api so there's actually no benefit of using GraphQL in this scenario, is that right? You're basically doing a basic REST query server-side and then use a GraphQL query client-side...