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

description
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: https://www.indiegogo.com/projects/aws-architect-and-developer-certification-program/reft/19668519/brad-aws1 Data Science: https://www.kickstarter.com/projects/1311831077/data-science-foundational-program-4-courses-and-eb?ref=5u5zy0 Code: https://github.com/bradtraversy/spacex_launch_stats App Demo: (If I still have it up) https://polar-wildwood-69899.herokuapp.com/ GraphQL Server Series: https://www.youtube.com/watch?v=PEcJxkylcRM&list=PLillGF-RfqbYZty73_PHBqKRDnv7ikh68 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'GraphQL With React & Apollo [1] - Express GraphQL Server', 'heatmap': [{'end': 1535.286, 'start': 1448.282, 'weight': 0.761}], 'summary': 'Covers the sponsorship of two programs by eduonics, plans for a udemy course on graphql, apollo client, and react, building a spacex data display with bootstrap, boot swatch, and react router, setting up a graphql schema for defining object types, data extraction for rocket launches, creating a root query with endpoints and resolvers in graphql, and using graphql to retrieve specific data by writing queries.', 'chapters': [{'end': 194.987, 'segs': [{'end': 35.525, 'src': 'embed', 'start': 7.216, 'weight': 0, 'content': [{'end': 10.557, 'text': 'This video is sponsored by Eduonics, who has two programs coming out.', 'start': 7.216, 'duration': 3.341}, {'end': 17.899, 'text': 'One is an AWS preparation course to help developers achieve AWS certifications and handle real-world use cases.', 'start': 10.697, 'duration': 7.202}, {'end': 20.84, 'text': 'It includes practical labs, practice tests, and more.', 'start': 17.959, 'duration': 2.881}, {'end': 28.043, 'text': 'The other is a data science foundational program with four courses on data science, including Python and R programming.', 'start': 21.34, 'duration': 6.703}, {'end': 31.484, 'text': 'It also includes four ebooks and three bonus prep guides.', 'start': 28.343, 'duration': 3.141}, {'end': 35.525, 'text': 'To check these programs out, check the Kickstarter links in the description below.', 'start': 31.764, 'duration': 3.761}], 'summary': 'Eduonics offers aws preparation course and data science program with 2 kickstarter links.', 'duration': 28.309, 'max_score': 7.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z87216.jpg'}, {'end': 77.259, 'src': 'embed', 'start': 49.089, 'weight': 1, 'content': [{'end': 52.45, 'text': "And I'm also thinking about creating a Udemy course on these technologies.", 'start': 49.089, 'duration': 3.361}, {'end': 56.391, 'text': "Now, if you don't know what Graph QL is, it's a way to query your data.", 'start': 52.97, 'duration': 3.421}, {'end': 61.613, 'text': "It's somewhat similar to rest and you can use it with existing rest APIs, as we're going to do here.", 'start': 56.471, 'duration': 5.142}, {'end': 68.996, 'text': 'But instead of getting all or nothing like you do when you make a request to arrest API, you can ask for specific things.', 'start': 62.133, 'duration': 6.863}, {'end': 77.259, 'text': "So if I want to just, let's say, ask for just the title from some sort of reference like a blog post, I can ask for that, unlike rest,", 'start': 69.136, 'duration': 8.123}], 'summary': 'Considering creating a udemy course on graph ql, a more specific data querying method compared to rest.', 'duration': 28.17, 'max_score': 49.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z849089.jpg'}, {'end': 112.761, 'src': 'embed', 'start': 86.943, 'weight': 2, 'content': [{'end': 94.826, 'text': 'Now, Graph QL can make apps faster because the app controls the data that you get basically over the server.', 'start': 86.943, 'duration': 7.883}, {'end': 100.638, 'text': 'And the queries are also very elegant and almost look like JavaScript objects as you can see right here.', 'start': 95.296, 'duration': 5.342}, {'end': 106.699, 'text': 'This is the actual official graph QL website and this is basically how you can query data.', 'start': 100.698, 'duration': 6.001}, {'end': 112.761, 'text': 'So I also have a five part series on creating a graph QL server with express.', 'start': 107.34, 'duration': 5.421}], 'summary': 'Graphql can make apps faster by giving app control over data, with elegant queries resembling javascript objects. the speaker also has a five-part series on creating a graphql server with express.', 'duration': 25.818, 'max_score': 86.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z886943.jpg'}, {'end': 175.833, 'src': 'embed', 'start': 134.171, 'weight': 3, 'content': [{'end': 139.434, 'text': 'But what I want to focus on this series is not just building a GraphQL server, like my other series,', 'start': 134.171, 'duration': 5.263}, {'end': 143.036, 'text': 'but I want to build a front end with React and something called Apollo.', 'start': 139.434, 'duration': 3.602}, {'end': 150.72, 'text': "Actually it's Apollo 2.1 that we'll be using and it's a client to interface with our GraphQL server.", 'start': 143.796, 'duration': 6.924}, {'end': 156.743, 'text': 'Okay. so I think one of the most difficult things these days is that we have so many different technologies.', 'start': 150.74, 'duration': 6.003}, {'end': 161.426, 'text': "it's sometimes hard to understand how do we put them all together and make them all work together?", 'start': 156.743, 'duration': 4.683}, {'end': 163.847, 'text': "So that's my main goal with this series.", 'start': 161.966, 'duration': 1.881}, {'end': 167.269, 'text': "So what we'll be building is this app right here.", 'start': 164.628, 'duration': 2.641}, {'end': 174.993, 'text': "And what this is going to do is we're going to interface with the SpaceX API, which gives you a whole bunch of data, launches, rockets,", 'start': 167.869, 'duration': 7.124}, {'end': 175.833, 'text': 'all types of stuff.', 'start': 174.993, 'duration': 0.84}], 'summary': 'Building a front end with react and apollo 2.1 to interface with a graphql server and spacex api.', 'duration': 41.662, 'max_score': 134.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8134171.jpg'}], 'start': 7.216, 'title': 'Graphql and apollo client implementation', 'summary': 'Covers the sponsorship of two programs by eduonics, plans for a udemy course on graphql, apollo client, and react, and discusses building a frontend app with graphql, react, and apollo, emphasizing faster app performance and interfacing with the spacex api.', 'chapters': [{'end': 86.583, 'start': 7.216, 'title': 'Graphql and apollo client overview', 'summary': 'Discusses the sponsorship by eduonics for two programs, including an aws preparation course and a data science foundational program, along with the plans to create a udemy course on graphql, apollo client, and react, showcasing the advantages of using graphql over rest for querying specific data.', 'duration': 79.367, 'highlights': ['Eduonics offers two programs: an AWS preparation course and a data science foundational program, including practical labs, practice tests, and more. The AWS preparation course and data science foundational program by Eduonics provide practical labs, practice tests, and more to help developers achieve AWS certifications and handle real-world use cases.', 'GraphQL allows querying specific data, unlike REST, which retrieves all or nothing, saving on requests and bandwidth. GraphQL enables querying specific data, unlike REST, which retrieves all or nothing, thereby saving on requests and bandwidth.', 'Plans to create a Udemy course on GraphQL, Apollo client, and React in response to viewer requests. The speaker is considering creating a Udemy course on GraphQL, Apollo client, and React in response to viewer requests for topics on Graph QL and the Apollo client.']}, {'end': 194.987, 'start': 86.943, 'title': 'Graphql frontend with react & apollo', 'summary': 'Discusses how to build a frontend app with graphql, react, and apollo, focusing on making apps faster by controlling data over the server, using elegant queries, and interfacing with the spacex api to list mission data.', 'duration': 108.044, 'highlights': ['The app controls the data over the server, making apps faster. GraphQL allows the app to control the data over the server, leading to faster app performance.', 'Queries in GraphQL are elegant and resemble JavaScript objects. GraphQL queries are elegant and closely resemble JavaScript objects, simplifying the data retrieval process.', 'Building a frontend app with React and Apollo 2.1 to interface with the GraphQL server. The focus is on building a frontend app with React and Apollo 2.1 to interface with the GraphQL server, streamlining the client-server interaction.', 'Interfacing with the SpaceX API to list mission data. The app interfaces with the SpaceX API to list mission data, including launches and rockets, providing a comprehensive view of missions since 2006.', 'Main goal is to understand how to integrate different technologies and make them work together. The main goal is to understand how to integrate different technologies and make them work together seamlessly, addressing the challenge of working with multiple technologies.']}], 'duration': 187.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z87216.jpg', 'highlights': ['Eduonics offers two programs: an AWS preparation course and a data science foundational program, including practical labs, practice tests, and more.', 'GraphQL allows querying specific data, unlike REST, which retrieves all or nothing, saving on requests and bandwidth.', 'The app controls the data over the server, making apps faster.', 'Building a frontend app with React and Apollo 2.1 to interface with the GraphQL server.', 'Interfacing with the SpaceX API to list mission data.']}, {'end': 591.549, 'segs': [{'end': 237.445, 'src': 'embed', 'start': 195.047, 'weight': 0, 'content': [{'end': 198.471, 'text': "So we're gonna create a little key component here just to let the user know that.", 'start': 195.047, 'duration': 3.424}, {'end': 202.535, 'text': "We're gonna use Bootstrap, but we're using a custom theme from Boot Swatch.", 'start': 198.831, 'duration': 3.704}, {'end': 209.838, 'text': "and we're using react router so that we can go to the launch details page, which gives us some other details.", 'start': 203.255, 'duration': 6.583}, {'end': 216.921, 'text': 'gives us the details of the rocket that was used, the id, the name, the type of rocket and again you can get more data than this,', 'start': 209.838, 'duration': 7.083}, {'end': 220.663, 'text': 'but i just wanted to show you how everything works.', 'start': 216.921, 'duration': 3.742}, {'end': 224.705, 'text': "but it's up to you if you want to extend the application, and i would suggest doing that.", 'start': 220.663, 'duration': 4.042}, {'end': 226.446, 'text': 'tutorials can only take you so far.', 'start': 224.705, 'duration': 1.741}, {'end': 229.23, 'text': "So yeah, that's what we building.", 'start': 227.067, 'duration': 2.163}, {'end': 233.578, 'text': "It's pretty simple as far as functionality, but there's a lot that goes into it.", 'start': 229.27, 'duration': 4.308}, {'end': 235.061, 'text': 'We might even do the deployment.', 'start': 233.618, 'duration': 1.443}, {'end': 237.445, 'text': 'You can see I actually have it on Heroku now.', 'start': 235.101, 'duration': 2.344}], 'summary': 'Building a simple web app with bootstrap, boot swatch, and react router to display rocket details, with potential for extension and deployment on heroku.', 'duration': 42.398, 'max_score': 195.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8195047.jpg'}, {'end': 373.125, 'src': 'embed', 'start': 343.084, 'weight': 1, 'content': [{'end': 346.227, 'text': 'Okay So now we have our package Jason file.', 'start': 343.084, 'duration': 3.143}, {'end': 349.649, 'text': "Let's go ahead and install the dependencies that we're going to need.", 'start': 346.827, 'duration': 2.822}, {'end': 359.235, 'text': "So we're going to say NPM install or yarn if you want to use yarn and we want Graph QL itself and then we're using Express.", 'start': 349.749, 'duration': 9.486}, {'end': 366.26, 'text': 'So we need to install something called Express Dash Graph QL, which allows them to basically integrate together.', 'start': 359.315, 'duration': 6.945}, {'end': 373.125, 'text': "Of course, we need Express and we're going to need Axios to make requests to the SpaceX API.", 'start': 366.68, 'duration': 6.445}], 'summary': 'Install dependencies using npm or yarn for graphql and axios to make requests to spacex api.', 'duration': 30.041, 'max_score': 343.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8343084.jpg'}, {'end': 483.676, 'src': 'embed', 'start': 449.886, 'weight': 2, 'content': [{'end': 451.708, 'text': 'All right, that should be it for now.', 'start': 449.886, 'duration': 1.822}, {'end': 453.109, 'text': "So let's go ahead and save that.", 'start': 451.808, 'duration': 1.301}, {'end': 455.031, 'text': 'And we can close this file up for now.', 'start': 453.209, 'duration': 1.822}, {'end': 458.755, 'text': "So now let's create our server.js file.", 'start': 455.712, 'duration': 3.043}, {'end': 462.879, 'text': "And we're going to start off by bringing in what we need.", 'start': 459.876, 'duration': 3.003}, {'end': 464.241, 'text': 'So we need express.', 'start': 462.959, 'duration': 1.282}, {'end': 468.125, 'text': 'So we want to require.', 'start': 466.984, 'duration': 1.141}, {'end': 477.714, 'text': 'Express And we want to bring in a couple other things.', 'start': 471.672, 'duration': 6.042}, {'end': 481.456, 'text': "Let's bring in an express graph.", 'start': 478.335, 'duration': 3.121}, {'end': 482.276, 'text': 'Graph QL.', 'start': 481.536, 'duration': 0.74}, {'end': 483.676, 'text': "I actually don't have to delete that.", 'start': 482.296, 'duration': 1.38}], 'summary': 'Creating a server.js file, bringing in express and graphql.', 'duration': 33.79, 'max_score': 449.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8449886.jpg'}, {'end': 591.549, 'src': 'embed', 'start': 564.373, 'weight': 4, 'content': [{'end': 572.942, 'text': "And like I said, we have one end point of slash graph QL that's going to run graph QL HTTP, which is the express graph QL.", 'start': 564.373, 'duration': 8.569}, {'end': 580.323, 'text': "We're going to point to our schema, which I'm actually just going to call schema.", 'start': 573.222, 'duration': 7.101}, {'end': 581.284, 'text': 'so we actually do.', 'start': 580.323, 'duration': 0.961}, {'end': 583.245, 'text': 'we can just do this.', 'start': 581.284, 'duration': 1.961}, {'end': 591.549, 'text': "and then graphical is the tool that i was saying that we can use as our client to make queries to our server, and it's it's really, really cool.", 'start': 583.245, 'duration': 8.304}], 'summary': 'Setting up an endpoint for graphql using express, pointing to a schema, and using graphiql as a client for making queries to the server.', 'duration': 27.176, 'max_score': 564.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8564373.jpg'}], 'start': 195.047, 'title': 'Spacex data display and launch stats app', 'summary': 'Covers building a spacex data display with bootstrap, boot swatch, and react router, and setting up spacex launch stats app from scratch, including initializing the package.json file, installing necessary dependencies like graphql, express, and axios, and configuring the server.js file.', 'chapters': [{'end': 265.311, 'start': 195.047, 'title': 'Building a spacex data display', 'summary': 'Covers the creation of a spacex data display using bootstrap, boot swatch, and react router, highlighting the functionality and potential for extension.', 'duration': 70.264, 'highlights': ['Using Bootstrap, Boot Swatch, and react router to create a SpaceX data display.', 'Emphasizing the potential for extending the application beyond the provided functionality.', 'Mentioning the deployment of the application on Heroku.', 'Highlighting the flexibility of using GraphQL with various databases and frameworks.']}, {'end': 591.549, 'start': 266.071, 'title': 'Setting up spacex launch stats app', 'summary': 'Covers setting up a new application called spacex launch stats from scratch, including initializing the package.json file, installing necessary dependencies like graphql, express, and axios, and configuring the server.js file to integrate graphql with express.', 'duration': 325.478, 'highlights': ['Initializing the package.json file with NPM init and adding necessary dependencies like GraphQL, Express, Axios, and nodemon for continuous server updates. Package.json file initialized with necessary dependencies like GraphQL, Express, Axios, and nodemon.', 'Configuring the server.js file to integrate GraphQL with Express, creating a schema for queries and mutations, and pointing to the GraphQL endpoint for running GraphQL HTTP. Configuration of server.js file to integrate GraphQL with Express and creating a schema for queries and mutations.', 'Introduction to GraphiQL as a tool to make queries to the server, and its significance in client-server interactions. Introduction to GraphiQL as a tool for making queries to the server.']}], 'duration': 396.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8195047.jpg', 'highlights': ['Using Bootstrap, Boot Swatch, and react router to create a SpaceX data display.', 'Initializing the package.json file with NPM init and adding necessary dependencies like GraphQL, Express, Axios, and nodemon.', 'Configuring the server.js file to integrate GraphQL with Express and creating a schema for queries and mutations.', 'Mentioning the deployment of the application on Heroku.', 'Introduction to GraphiQL as a tool for making queries to the server.']}, {'end': 903.64, 'segs': [{'end': 643.438, 'src': 'embed', 'start': 613.118, 'weight': 0, 'content': [{'end': 617.379, 'text': "So when we deploy to Heroku, if we do, it'll read that or port 5000 in development.", 'start': 613.118, 'duration': 4.261}, {'end': 622.725, 'text': "OK, so we're going to be listening on 5, 000.", 'start': 619.804, 'duration': 2.921}, {'end': 625.888, 'text': "So in our app.listen, let's put in our port variable.", 'start': 622.726, 'duration': 3.162}, {'end': 630.45, 'text': "And then I'm just going to put an arrow function just to console.log.", 'start': 626.008, 'duration': 4.442}, {'end': 634.813, 'text': "Let's console.log.", 'start': 633.552, 'duration': 1.261}, {'end': 636.114, 'text': 'Put some back ticks.', 'start': 635.193, 'duration': 0.921}, {'end': 639.836, 'text': "And we'll say server started on port.", 'start': 636.154, 'duration': 3.682}, {'end': 641.817, 'text': "And we'll use our variable syntax.", 'start': 639.936, 'duration': 1.881}, {'end': 643.438, 'text': "And we'll say port.", 'start': 642.577, 'duration': 0.861}], 'summary': 'When deploying to heroku, the app will listen on port 5000 and use a variable for the port.', 'duration': 30.32, 'max_score': 613.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8613118.jpg'}, {'end': 771.486, 'src': 'embed', 'start': 744.446, 'weight': 4, 'content': [{'end': 748.893, 'text': "Now, let's see, I'm trying I'm just trying to think of the best way to explain this.", 'start': 744.446, 'duration': 4.447}, {'end': 754.761, 'text': "So we're going to have to basically two types are two object types, two resources.", 'start': 749.754, 'duration': 5.007}, {'end': 756.564, 'text': "That's going to be launches and rockets.", 'start': 754.801, 'duration': 1.763}, {'end': 759.649, 'text': "So let's create our launch type.", 'start': 757.205, 'duration': 2.444}, {'end': 763.48, 'text': 'so we want to just create a variable.', 'start': 761.698, 'duration': 1.782}, {'end': 771.486, 'text': "i'm going to call it launch type and we'll set this to new graphql object type.", 'start': 763.48, 'duration': 8.006}], 'summary': 'Creating two object types: launches and rockets in graphql.', 'duration': 27.04, 'max_score': 744.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8744446.jpg'}, {'end': 828.002, 'src': 'embed', 'start': 799.912, 'weight': 3, 'content': [{'end': 802.274, 'text': 'OK, and it could be a string integer.', 'start': 799.912, 'duration': 2.362}, {'end': 804.056, 'text': 'It could be another object type.', 'start': 802.414, 'duration': 1.642}, {'end': 806.178, 'text': 'It could be a lot of different things.', 'start': 804.116, 'duration': 2.062}, {'end': 810.261, 'text': 'Now, I think now is a good time to look at the SpaceX API.', 'start': 806.938, 'duration': 3.323}, {'end': 817.508, 'text': 'So we want to go to the GitHub page here.', 'start': 815.486, 'duration': 2.022}, {'end': 820.158, 'text': "Let's see.", 'start': 819.578, 'duration': 0.58}, {'end': 822.399, 'text': 'So SpaceX rest API.', 'start': 820.298, 'duration': 2.101}, {'end': 826.361, 'text': 'So this is like these are the endpoints.', 'start': 823.92, 'duration': 2.441}, {'end': 828.002, 'text': 'This is to get the latest launch.', 'start': 826.401, 'duration': 1.601}], 'summary': 'Discussion on diverse data types and accessing spacex api for latest launch information.', 'duration': 28.09, 'max_score': 799.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8799912.jpg'}, {'end': 883.583, 'src': 'embed', 'start': 854.485, 'weight': 2, 'content': [{'end': 856.888, 'text': "And over here, you can see that we're dealing with launches.", 'start': 854.485, 'duration': 2.403}, {'end': 861.893, 'text': 'So this gives us like all the fields and it gives us the endpoints and all that.', 'start': 857.689, 'duration': 4.204}, {'end': 868.52, 'text': "There's other stuff like like payloads and we're going to deal with rockets, but like roadster.", 'start': 863.254, 'duration': 5.266}, {'end': 872.509, 'text': "There's just all types of data from SpaceX that you can deal with.", 'start': 869.244, 'duration': 3.265}, {'end': 877.495, 'text': 'Capsules, cores, so you could build a pretty extensive application.', 'start': 872.629, 'duration': 4.866}, {'end': 883.583, 'text': 'Of course, it would probably be read only, but a lot of data, a lot of available data.', 'start': 877.555, 'duration': 6.028}], 'summary': 'The transcript discusses dealing with launches, payloads, rockets, roadster, capsules, cores, and the extensive available data from spacex.', 'duration': 29.098, 'max_score': 854.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8854485.jpg'}], 'start': 591.549, 'title': 'Setting up server and graphql schema', 'summary': 'Covers setting up a server and listening on a specific port, utilizing an environment variable for flexibility, and logging the server start message with the port number. it also discusses setting up a graphql schema for defining object types such as launches and rockets, exploring the spacex api, and making a get request to retrieve relevant information.', 'chapters': [{'end': 643.438, 'start': 591.549, 'title': 'Setting up server and listening on port', 'summary': 'Covers setting up a server and listening on a specific port, utilizing an environment variable for flexibility, and logging the server start message with the port number.', 'duration': 51.889, 'highlights': ['Setting up server to listen on a specific port, either from an environment variable or defaulting to 5000 in development.', 'Logging the server start message with the port number using an arrow function and template literals.']}, {'end': 903.64, 'start': 644.847, 'title': 'Setting up graphql schema for spacex api', 'summary': 'Discusses setting up a graphql schema for defining object types such as launches and rockets, and exploring the spacex api to understand the available fields and endpoints for building an application. it emphasizes the potential for accessing extensive data from spacex and making a get request to retrieve relevant information.', 'duration': 258.793, 'highlights': ['Exploring GraphQL Object Types for Launches and Rockets The chapter explains the process of defining GraphQL object types for launches and rockets, highlighting their significance in structuring the schema for the SpaceX API application.', 'Utilizing SpaceX API for Extensive Data Access The discussion emphasizes the potential for accessing extensive data from the SpaceX API, showcasing the availability of various fields and endpoints for building a comprehensive application.', 'Making Get Request to SpaceX API for Data Retrieval The chapter mentions the process of making a get request to the SpaceX API to retrieve relevant information, showcasing the practical application of the GraphQL schema in accessing data.']}], 'duration': 312.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8591549.jpg', 'highlights': ['Setting up server to listen on a specific port, either from an environment variable or defaulting to 5000 in development.', 'Logging the server start message with the port number using an arrow function and template literals.', 'Utilizing SpaceX API for Extensive Data Access The discussion emphasizes the potential for accessing extensive data from the SpaceX API, showcasing the availability of various fields and endpoints for building a comprehensive application.', 'Making Get Request to SpaceX API for Data Retrieval The chapter mentions the process of making a get request to the SpaceX API to retrieve relevant information, showcasing the practical application of the GraphQL schema in accessing data.', 'Exploring GraphQL Object Types for Launches and Rockets The chapter explains the process of defining GraphQL object types for launches and rockets, highlighting their significance in structuring the schema for the SpaceX API application.']}, {'end': 1177.37, 'segs': [{'end': 959.939, 'src': 'embed', 'start': 903.7, 'weight': 0, 'content': [{'end': 906.282, 'text': "That's going to kind of be our main field, like the ID.", 'start': 903.7, 'duration': 2.582}, {'end': 908.524, 'text': 'And then we want the mission name.', 'start': 906.903, 'duration': 1.621}, {'end': 914.068, 'text': 'We want the launch year.', 'start': 909.064, 'duration': 5.004}, {'end': 915.809, 'text': 'I want the launch date.', 'start': 914.388, 'duration': 1.421}, {'end': 918.852, 'text': 'I want the rocket.', 'start': 917.09, 'duration': 1.762}, {'end': 924.116, 'text': 'So right here from the rocket, I want some fields from here.', 'start': 919.452, 'duration': 4.664}, {'end': 927.238, 'text': "So what I'm going to do is I'm going to make rocket a separate object type.", 'start': 924.176, 'duration': 3.062}, {'end': 930.925, 'text': "So we'll have launch type and rocket type.", 'start': 928.004, 'duration': 2.921}, {'end': 936.186, 'text': 'I also want the success value, which is right here, launch success.', 'start': 931.365, 'duration': 4.821}, {'end': 938.927, 'text': "So those are really the only fields I'm going to be using.", 'start': 936.646, 'duration': 2.281}, {'end': 943.448, 'text': 'But of course, you could take out any of this stuff and use it in your application.', 'start': 938.967, 'duration': 4.481}, {'end': 948.809, 'text': "So as far as fields, let's do flight number.", 'start': 944.568, 'duration': 4.241}, {'end': 954.974, 'text': 'OK, so flight number and we need to actually give this a type.', 'start': 950.009, 'duration': 4.965}, {'end': 959.939, 'text': 'So we want to say type and this is going to be an int.', 'start': 955.414, 'duration': 4.525}], 'summary': 'Creating main field with mission name, launch year, date, rocket type, and success value.', 'duration': 56.239, 'max_score': 903.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8903700.jpg'}, {'end': 1068.349, 'src': 'embed', 'start': 1023.345, 'weight': 2, 'content': [{'end': 1026.968, 'text': 'OK, the next thing that I want is the launch year.', 'start': 1023.345, 'duration': 3.623}, {'end': 1034.234, 'text': 'Launch year is is actually going to be a string as well.', 'start': 1030.771, 'duration': 3.463}, {'end': 1039.46, 'text': 'And we want the launch date local.', 'start': 1036.617, 'duration': 2.843}, {'end': 1047.867, 'text': 'And this is also going to be a string.', 'start': 1045.984, 'duration': 1.883}, {'end': 1054.697, 'text': 'And we want the success watch success.', 'start': 1050.331, 'duration': 4.366}, {'end': 1062.203, 'text': 'OK, and this is actually going to be a Boolean, so we have to bring that in.', 'start': 1058.439, 'duration': 3.764}, {'end': 1065.466, 'text': 'OK, any type we want to use, we have to just bring in up here.', 'start': 1062.223, 'duration': 3.243}, {'end': 1068.349, 'text': "So let's say GraphQL Boolean.", 'start': 1066.127, 'duration': 2.222}], 'summary': 'Requesting launch year, launch date, and success as strings and boolean in graphql format.', 'duration': 45.004, 'max_score': 1023.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81023345.jpg'}, {'end': 1124.202, 'src': 'embed', 'start': 1092.115, 'weight': 3, 'content': [{'end': 1094.578, 'text': "So it's actually going to be called rocket type.", 'start': 1092.115, 'duration': 2.463}, {'end': 1099.004, 'text': "Let's say rocket type, which we haven't actually created yet.", 'start': 1095.882, 'duration': 3.122}, {'end': 1104.228, 'text': "OK, so let's go down here and this is how you create relationships within your schema.", 'start': 1099.705, 'duration': 4.523}, {'end': 1111.393, 'text': "So let's say rocket type and we basically want to do the same thing we did here.", 'start': 1105.109, 'duration': 6.284}, {'end': 1115.937, 'text': "I'll just guess I'll just copy this and then we'll change this to rocket type.", 'start': 1111.574, 'duration': 4.363}, {'end': 1124.202, 'text': "OK so it's again it's going to be an object type and the name is going to be rocket.", 'start': 1119.036, 'duration': 5.166}], 'summary': "Creating a new 'rocket type' object within the schema.", 'duration': 32.087, 'max_score': 1092.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81092115.jpg'}], 'start': 903.7, 'title': 'Data extraction and graphql schema', 'summary': 'Discusses data extraction for rocket launches, covering fields like mission name, launch year, launch date, rocket details, and success value. it also explains defining object types in a graphql schema, including specifying integer, string, and boolean data types and creating relationships with other object types.', 'chapters': [{'end': 959.939, 'start': 903.7, 'title': 'Data extraction for rocket launches', 'summary': 'Discusses the main fields required for rocket launch data, including mission name, launch year, launch date, rocket details, and success value, with flight number being an integer type.', 'duration': 56.239, 'highlights': ['The main fields required for rocket launch data include mission name, launch year, launch date, rocket details, and success value, with flight number being an integer type.', 'The success value, indicated by launch success, is one of the key fields for rocket launch data.']}, {'end': 1177.37, 'start': 960.48, 'title': 'Defining object types in graphql schema', 'summary': 'Explains how to define object types in a graphql schema, including specifying integer, string, and boolean data types as well as creating relationships with other object types.', 'duration': 216.89, 'highlights': ['The chapter details the process of defining various data types in a GraphQL schema, such as specifying integer, string, and boolean data types for fields like flight number, mission name, launch year, launch date, and success watch.', "It explains the creation of a relationship with another object type by defining the 'rocket type' and its associated fields, including rocket ID, rocket name, and rocket type as string data types."]}], 'duration': 273.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z8903700.jpg', 'highlights': ['The success value, indicated by launch success, is one of the key fields for rocket launch data.', 'The main fields required for rocket launch data include mission name, launch year, launch date, rocket details, and success value, with flight number being an integer type.', 'The chapter details the process of defining various data types in a GraphQL schema, such as specifying integer, string, and boolean data types for fields like flight number, mission name, launch year, launch date, and success watch.', "It explains the creation of a relationship with another object type by defining the 'rocket type' and its associated fields, including rocket ID, rocket name, and rocket type as string data types."]}, {'end': 1523.673, 'segs': [{'end': 1224.296, 'src': 'embed', 'start': 1198.094, 'weight': 0, 'content': [{'end': 1204.92, 'text': "We're using a third-party API in this case, so of course we need to kind of match the fields that the API gives us.", 'start': 1198.094, 'duration': 6.826}, {'end': 1209.92, 'text': 'So now that we have our types, we need to create something called a root query.', 'start': 1206.155, 'duration': 3.765}, {'end': 1219.571, 'text': 'And in this root query, we can create basically kind of like endpoints that have resolvers that will resolve our data.', 'start': 1210.54, 'duration': 9.031}, {'end': 1224.296, 'text': "Let's say root query.", 'start': 1221.294, 'duration': 3.002}], 'summary': 'Using third-party api, matching fields, creating root query with endpoints and resolvers.', 'duration': 26.202, 'max_score': 1198.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81198094.jpg'}, {'end': 1416.702, 'src': 'embed', 'start': 1369.524, 'weight': 1, 'content': [{'end': 1376.365, 'text': "So what we're going to do is say return Axios dot get.", 'start': 1369.524, 'duration': 6.841}, {'end': 1383.467, 'text': 'And we want to put in the SpaceX endpoint, which is.', 'start': 1379.106, 'duration': 4.361}, {'end': 1387.268, 'text': "Let's go back here.", 'start': 1386.088, 'duration': 1.18}, {'end': 1399.223, 'text': "which is, um, i believe it's just this without the latest.", 'start': 1393.84, 'duration': 5.383}, {'end': 1403.725, 'text': 'yeah, so we want this just slash launches.', 'start': 1399.223, 'duration': 4.502}, {'end': 1408.427, 'text': "so let's grab that and put that right in there.", 'start': 1403.725, 'duration': 4.702}, {'end': 1410.869, 'text': 'okay, now this will give us a promise back.', 'start': 1408.427, 'duration': 2.442}, {'end': 1411.809, 'text': "so we're gonna do dot.", 'start': 1410.869, 'duration': 0.94}, {'end': 1416.702, 'text': 'then You can use a sync await if you want.', 'start': 1411.809, 'duration': 4.893}], 'summary': 'Using axios to fetch spacex data from the /launches endpoint.', 'duration': 47.178, 'max_score': 1369.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81369524.jpg'}, {'end': 1507.277, 'src': 'embed', 'start': 1476.591, 'weight': 2, 'content': [{'end': 1484.877, 'text': 'And again I have that five part series on creating a graph QL server and we do do basically a crud server with mutations.', 'start': 1476.591, 'duration': 8.286}, {'end': 1489.64, 'text': "So if you're interested in that I would recommend that that that series.", 'start': 1484.937, 'duration': 4.703}, {'end': 1491.501, 'text': 'So that should be it.', 'start': 1490.46, 'duration': 1.041}, {'end': 1494.044, 'text': "Let's save this and let's go down here.", 'start': 1491.562, 'duration': 2.482}, {'end': 1495.626, 'text': 'Looks like we have no errors.', 'start': 1494.344, 'duration': 1.282}, {'end': 1498.248, 'text': 'So now our server is running.', 'start': 1496.166, 'duration': 2.082}, {'end': 1507.277, 'text': "I'm going to go into our browser and I'm going to go to local host and the port that we ran that we created this on, which is 5000.", 'start': 1498.849, 'duration': 8.428}], 'summary': 'Creating a graphql server with a crud functionality, running on localhost:5000.', 'duration': 30.686, 'max_score': 1476.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81476591.jpg'}], 'start': 1177.41, 'title': 'Graphql root queries and axios requests', 'summary': 'Covers creating a root query with endpoints and resolvers in graphql to resolve data, including creating a list of launches and using resolvers to retrieve data from a third-party api. it also discusses using axios to make api requests, mentioning the spacex endpoint, and exporting the graphql schema for a server running on port 5000.', 'chapters': [{'end': 1319.91, 'start': 1177.41, 'title': 'Graphql root query and resolvers', 'summary': 'Covers creating a root query with endpoints and resolvers in graphql to resolve data, including creating a list of launches and using resolvers to retrieve data from a third-party api.', 'duration': 142.5, 'highlights': ['The chapter covers creating a root query with endpoints and resolvers in GraphQL to resolve data, including creating a list of launches and using resolvers to retrieve data from a third-party API.', 'Creating a root query with endpoints and resolvers in GraphQL to resolve data.', 'Creating a list of launches using GraphQL list and defining resolvers to retrieve data from a third-party API.']}, {'end': 1523.673, 'start': 1319.91, 'title': 'Using axios to make api requests', 'summary': 'Discusses using axios to make api requests, including mentioning the spacex endpoint, and exporting the graphql schema for a server running on port 5000.', 'duration': 203.763, 'highlights': ['The chapter explains using Axios to make API requests, mentioning the SpaceX endpoint and returning the data, without using async await.', 'The author also discusses exporting the GraphQL schema for a server running on port 5000 and mentions a five-part series on creating a GraphQL server with mutations.', 'The author mentions that Axios is used for all requests and discusses the possibility of using other options like Fetch or Super Agent.']}], 'duration': 346.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81177410.jpg', 'highlights': ['Creating a root query with endpoints and resolvers in GraphQL to resolve data, including creating a list of launches and using resolvers to retrieve data from a third-party API.', 'The chapter explains using Axios to make API requests, mentioning the SpaceX endpoint and returning the data, without using async await.', 'The author also discusses exporting the GraphQL schema for a server running on port 5000 and mentions a five-part series on creating a GraphQL server with mutations.']}, {'end': 2099.455, 'segs': [{'end': 1687.238, 'src': 'embed', 'start': 1655.339, 'weight': 0, 'content': [{'end': 1656.6, 'text': "So I'll go ahead and run that.", 'start': 1655.339, 'duration': 1.261}, {'end': 1657.42, 'text': 'And there we go.', 'start': 1656.9, 'duration': 0.52}, {'end': 1662.023, 'text': 'We get our rocket object with all of the data for each rocket.', 'start': 1657.48, 'duration': 4.543}, {'end': 1667.366, 'text': 'So you can see how cool this is that you can just request certain fields.', 'start': 1662.684, 'duration': 4.682}, {'end': 1677.372, 'text': "You know, when you make a get request with rest to your, to whatever data you're querying, you have to get all of it and then you have to deal with.", 'start': 1667.807, 'duration': 9.565}, {'end': 1680.734, 'text': 'you know, pick and choose what you want to use from it.', 'start': 1677.372, 'duration': 3.362}, {'end': 1687.238, 'text': "So let's go back to this code now that we know that we can get all the all of the launches.", 'start': 1681.715, 'duration': 5.523}], 'summary': 'Demonstrating the ability to request specific fields and retrieve all launches.', 'duration': 31.899, 'max_score': 1655.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81655339.jpg'}, {'end': 1767.493, 'src': 'embed', 'start': 1742.267, 'weight': 1, 'content': [{'end': 1749.249, 'text': 'We want to put in here what we basically want to use as the argument to find the launch.', 'start': 1742.267, 'duration': 6.982}, {'end': 1750.629, 'text': 'And we want to use flight number.', 'start': 1749.329, 'duration': 1.3}, {'end': 1752.109, 'text': "That's basically our ID.", 'start': 1750.669, 'duration': 1.44}, {'end': 1754.59, 'text': 'In a lot of cases, this will be your ID.', 'start': 1752.749, 'duration': 1.841}, {'end': 1756.97, 'text': 'But we actually are using flight number.', 'start': 1755.01, 'duration': 1.96}, {'end': 1759.411, 'text': 'So we need to put flight number.', 'start': 1757.931, 'duration': 1.48}, {'end': 1761.091, 'text': 'We also need to give it a type here.', 'start': 1759.431, 'duration': 1.66}, {'end': 1764.252, 'text': 'And the type is going to be GraphQL int.', 'start': 1762.092, 'duration': 2.16}, {'end': 1767.493, 'text': 'Then we want to write our resolve.', 'start': 1765.833, 'duration': 1.66}], 'summary': 'Using flight number as the id, a graphql int type is resolved.', 'duration': 25.226, 'max_score': 1742.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81742267.jpg'}, {'end': 1983.04, 'src': 'embed', 'start': 1953.751, 'weight': 2, 'content': [{'end': 1966.073, 'text': 'guys. um, what i want to do now is i want to create a couple other queries for in our root query for rocket and rockets.', 'start': 1953.751, 'duration': 12.322}, {'end': 1973.516, 'text': "We're not actually going to use this in our react Apollo application but I want us to be able to query rockets if we want.", 'start': 1966.233, 'duration': 7.283}, {'end': 1983.04, 'text': "So let's head back and to get the rockets and the single rocket we can just copy these two launches and launch because it's very similar.", 'start': 1974.216, 'duration': 8.824}], 'summary': 'Creating additional queries for rockets in root query.', 'duration': 29.289, 'max_score': 1953.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81953751.jpg'}], 'start': 1523.693, 'title': 'Using graphql for specific data retrieval', 'summary': 'Demonstrates using graphql to retrieve specific data by writing queries to fetch selected fields, adding a new root query field to retrieve a single launch, and creating additional queries for rockets in the graphql server setup.', 'chapters': [{'end': 2099.455, 'start': 1523.693, 'title': 'Using graphql to retrieve specific data', 'summary': 'Demonstrates using graphql to retrieve specific data by writing queries to fetch selected fields, adding a new root query field to retrieve a single launch, and creating additional queries for rockets in the graphql server setup.', 'duration': 575.762, 'highlights': ['The chapter demonstrates using GraphQL to retrieve specific data by writing queries to fetch selected fields, adding a new root query field to retrieve a single launch, and creating additional queries for rockets in the GraphQL server setup.', 'GraphQL allows for elegant and selective data retrieval by specifying the fields to be fetched, unlike REST where all data is typically retrieved and filtered afterwards.', 'The process of adding a new root query field to retrieve a single launch involves specifying the type, providing the necessary argument (in this case, the flight number), and implementing the resolve function to make the request and return the data.', 'The chapter also covers creating additional queries for rockets in the GraphQL server setup, allowing the retrieval of a list of rockets and a single rocket by specifying the type and arguments for each query.']}], 'duration': 575.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SEMTj8w04Z8/pics/SEMTj8w04Z81523693.jpg', 'highlights': ['GraphQL allows for elegant and selective data retrieval by specifying the fields to be fetched, unlike REST where all data is typically retrieved and filtered afterwards.', 'The process of adding a new root query field to retrieve a single launch involves specifying the type, providing the necessary argument (in this case, the flight number), and implementing the resolve function to make the request and return the data.', 'The chapter demonstrates using GraphQL to retrieve specific data by writing queries to fetch selected fields, adding a new root query field to retrieve a single launch, and creating additional queries for rockets in the GraphQL server setup.', 'The chapter also covers creating additional queries for rockets in the GraphQL server setup, allowing the retrieval of a list of rockets and a single rocket by specifying the type and arguments for each query.']}], 'highlights': ['GraphQL allows querying specific data, unlike REST, which retrieves all or nothing, saving on requests and bandwidth.', 'Building a frontend app with React and Apollo 2.1 to interface with the GraphQL server.', 'Using Bootstrap, Boot Swatch, and react router to create a SpaceX data display.', 'Configuring the server.js file to integrate GraphQL with Express and creating a schema for queries and mutations.', 'Utilizing SpaceX API for Extensive Data Access The discussion emphasizes the potential for accessing extensive data from the SpaceX API, showcasing the availability of various fields and endpoints for building a comprehensive application.', 'The success value, indicated by launch success, is one of the key fields for rocket launch data.', 'Creating a root query with endpoints and resolvers in GraphQL to resolve data, including creating a list of launches and using resolvers to retrieve data from a third-party API.', 'GraphQL allows for elegant and selective data retrieval by specifying the fields to be fetched, unlike REST where all data is typically retrieved and filtered afterwards.']}