title
#1 What is GraphQL? | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

description
What is GraphQL? When would you use GraphQL? How does GraphQL work? Join the full Node.js course: https://acad.link/nodejs (includes GraphQL) Exclusive discount also available for our React.js course: https://acad.link/reactjs And we got MongoDB, too: https://acad.link/mongodb The first video of a complete series where we will build an entire app (an event booking app) with GraphQL, Node, MongoDB and React.js. Let's dive in! Complete Playlist: https://academind.com/learn/node-js/graphql-with-node-react-full-app/ Check out all our other courses: https://academind.com/learn/our-courses ---------- Building a REST API with Node.js: https://academind.com/learn/node-js/building-a-restful-api-with/ ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': '#1 What is GraphQL? | Build a Complete App with GraphQL, Node.js, MongoDB and React.js', 'heatmap': [{'end': 778.95, 'start': 741.091, 'weight': 0.74}, {'end': 914.589, 'start': 889.6, 'weight': 0.909}], 'summary': 'Series covers building a project using graphql, including an event booking api and a frontend app using react.js, with mongodb as the database. it explores graphql basics, its advantages over restful api, query structure, and flexibility in data handling, emphasizing efficiency and addressing data retrieval and processing challenges.', 'chapters': [{'end': 103.255, 'segs': [{'end': 57.955, 'src': 'embed', 'start': 27.738, 'weight': 0, 'content': [{'end': 31.64, 'text': "We'll build an event booking API and frontend application.", 'start': 27.738, 'duration': 3.902}, {'end': 36.862, 'text': 'So not just the GraphQL API, but also a frontend that uses this API.', 'start': 31.9, 'duration': 4.962}, {'end': 43.465, 'text': "Now, as I mentioned, we'll work with GraphQL.", 'start': 40.683, 'duration': 2.782}, {'end': 52.411, 'text': "we'll build that GraphQL API from scratch and I will teach you everything you need to know about how to build such an API, how GraphQL works.", 'start': 43.465, 'duration': 8.946}, {'end': 57.955, 'text': "We'll use MongoDB as a database, which we connect to the GraphQL API.", 'start': 53.232, 'duration': 4.723}], 'summary': 'Building an event booking api and frontend using graphql and mongodb.', 'duration': 30.217, 'max_score': 27.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc27738.jpg'}], 'start': 2.301, 'title': 'Building an event booking api with graphql', 'summary': 'Introduces videos focusing on building a project using graphql, including an event booking api and a frontend app using react.js, with mongodb as the database, and incorporating charting libraries for data visualization.', 'chapters': [{'end': 103.255, 'start': 2.301, 'title': 'Introduction to graphql and building an event booking api', 'summary': 'Introduces a series of videos focusing on building an entire project using graphql, including building an event booking api and a frontend application using react.js, with mongodb as the database, and incorporating charting libraries for data visualization.', 'duration': 100.954, 'highlights': ['The chapter covers building an entire project using GraphQL, including an event booking API and a frontend application using React.js, with MongoDB as the database.', 'The series of videos will teach everything needed to build a GraphQL API, including how GraphQL works and using MongoDB as a database, and will incorporate charting libraries for data visualization.', 'The project will include the development of a GraphQL API from scratch, connecting it to a MongoDB database, and building a React.js single page application for the front end.']}], 'duration': 100.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc2301.jpg', 'highlights': ['The chapter covers building an entire project using GraphQL, including an event booking API and a frontend application using React.js, with MongoDB as the database.', 'The series of videos will teach everything needed to build a GraphQL API, including how GraphQL works and using MongoDB as a database, and will incorporate charting libraries for data visualization.', 'The project will include the development of a GraphQL API from scratch, connecting it to a MongoDB database, and building a React.js single page application for the front end.']}, {'end': 426.73, 'segs': [{'end': 124.36, 'src': 'embed', 'start': 104.216, 'weight': 1, 'content': [{'end': 117.352, 'text': 'One important note regarding the prerequisites, we will build the GraphQL API with Node.js and I do expect basic Node.js knowledge for this series.', 'start': 104.216, 'duration': 13.136}, {'end': 120.415, 'text': 'So if you want to follow along smoothly, you should have that.', 'start': 117.392, 'duration': 3.023}, {'end': 124.36, 'text': 'You can take my Node.js to complete guide course, which I recently released.', 'start': 120.796, 'duration': 3.564}], 'summary': 'Build graphql api with node.js, requires basic node.js knowledge.', 'duration': 20.144, 'max_score': 104.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc104216.jpg'}, {'end': 169.496, 'src': 'embed', 'start': 141.889, 'weight': 3, 'content': [{'end': 145.25, 'text': 'if you want to get started and want to know everything you need for this series.', 'start': 141.889, 'duration': 3.361}, {'end': 146.67, 'text': 'these courses are great,', 'start': 145.25, 'duration': 1.42}, {'end': 155.112, 'text': 'but in the end you will just need some well basic to advanced knowledge for node and mongo and react to follow along smoothly.', 'start': 146.67, 'duration': 8.442}, {'end': 158.953, 'text': "but with that out of the way, let's dive into graphql.", 'start': 155.112, 'duration': 3.841}, {'end': 162.514, 'text': 'what is that and why would we use it and how does it actually work?', 'start': 158.953, 'duration': 3.561}, {'end': 169.496, 'text': 'Well, GraphQL is in the end a replacement or an alternative to a RESTful API.', 'start': 163.194, 'duration': 6.302}], 'summary': 'Courses require basic to advanced knowledge in node, mongo, and react to follow along smoothly. graphql is an alternative to restful api.', 'duration': 27.607, 'max_score': 141.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc141889.jpg'}, {'end': 236.064, 'src': 'embed', 'start': 207.271, 'weight': 0, 'content': [{'end': 213.955, 'text': 'but where we just return the data and where we receive data and we exchange data between the front end, which is separated from the back end,', 'start': 207.271, 'duration': 6.684}, {'end': 215.055, 'text': 'and the back end.', 'start': 214.415, 'duration': 0.64}, {'end': 224.499, 'text': 'Now, a REST API is a great solution for that, and a GraphQL API is an alternative to that that offers more flexibility.', 'start': 215.756, 'duration': 8.743}, {'end': 230.261, 'text': "Now, what does more flexibility mean? Let's have a look at the limitations of a RESTful API.", 'start': 224.959, 'duration': 5.302}, {'end': 236.064, 'text': 'A RESTful API typically works with endpoints like get requests sent to slash post.', 'start': 230.922, 'duration': 5.142}], 'summary': 'Rest api and graphql offer data exchange between front end and back end, with graphql providing more flexibility than restful api.', 'duration': 28.793, 'max_score': 207.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc207271.jpg'}, {'end': 325.101, 'src': 'embed', 'start': 295.371, 'weight': 5, 'content': [{'end': 300.513, 'text': 'whenever you need a different kind of data, you need to add a new endpoint on the back end.', 'start': 295.371, 'duration': 5.142}, {'end': 302.134, 'text': 'On bigger projects.', 'start': 301.033, 'duration': 1.101}, {'end': 309.396, 'text': 'this can slow down the entire development process, because teams constantly need to basically work on the back end,', 'start': 302.134, 'duration': 7.262}, {'end': 311.176, 'text': 'work on the front end and go back and forth.', 'start': 309.396, 'duration': 1.78}, {'end': 313.717, 'text': "And even if you're working alone on your project,", 'start': 311.597, 'duration': 2.12}, {'end': 325.101, 'text': 'you constantly have to add new endpoints to your back end and therefore your back end API might quickly get too big and then there might be unused paths and not really that great.', 'start': 313.717, 'duration': 11.384}], 'summary': 'Adding new endpoints can slow down development and lead to unused paths in the back end api.', 'duration': 29.73, 'max_score': 295.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc295371.jpg'}, {'end': 413.261, 'src': 'embed', 'start': 385.868, 'weight': 4, 'content': [{'end': 388.689, 'text': 'So that is still not great when you need more flexibility.', 'start': 385.868, 'duration': 2.821}, {'end': 396.613, 'text': "By the way, you might be wondering, but what is the problem? We can't just fetch the redundant data and render only a subset in the front end.", 'start': 389.409, 'duration': 7.204}, {'end': 398.174, 'text': "Well, you can't do that.", 'start': 396.973, 'duration': 1.201}, {'end': 402.536, 'text': "But the problem with that, of course, is that you're fetching a lot of redundant data,", 'start': 398.554, 'duration': 3.982}, {'end': 406.578, 'text': 'which hits the bandwidth of your customers and which also slows down your app.', 'start': 402.536, 'duration': 4.042}, {'end': 413.261, 'text': 'Because if you download more data and you need to parse more data in the front end, which means in the browser or on the mobile app,', 'start': 406.718, 'duration': 6.543}], 'summary': 'Fetching redundant data slows down app and affects bandwidth.', 'duration': 27.393, 'max_score': 385.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc385868.jpg'}], 'start': 104.216, 'title': 'Graphql basics', 'summary': 'Covers the prerequisites for graphql api, emphasizing the need for basic knowledge of node.js, react, and mongodb, and discusses the advantages of graphql over restful api in terms of flexibility, efficiency, and addressing data retrieval and processing challenges.', 'chapters': [{'end': 162.514, 'start': 104.216, 'title': 'Prerequisites for graphql api', 'summary': 'Highlights the need for basic knowledge of node.js, react, and mongodb to follow along smoothly, with suggestions to take specific courses, and emphasizes the importance of having basic to advanced knowledge in these areas.', 'duration': 58.298, 'highlights': ['The chapter emphasizes the need for basic Node.js knowledge to follow along smoothly.', 'It suggests taking a comprehensive Node.js course for learning everything about Node.js.', 'The importance of having basic to advanced knowledge in Node, MongoDB, and React is underlined for following along smoothly.']}, {'end': 426.73, 'start': 163.194, 'title': 'Graphql vs rest api', 'summary': 'Discusses the limitations of a restful api, the challenges with multiple endpoints and query parameters, and how graphql offers more flexibility and efficiency in data retrieval and processing, addressing issues such as redundant data fetching and complex api management.', 'duration': 263.536, 'highlights': ['GraphQL offers more flexibility than a RESTful API by allowing more efficient and customized data retrieval GraphQL provides more flexibility by allowing customized data retrieval, avoiding redundant data fetching, and reducing the need for multiple endpoints or complex query parameters.', 'The complexity of managing multiple endpoints or query parameters in a RESTful API can slow down the development process Managing multiple endpoints or query parameters in a RESTful API can lead to slower development processes, as it requires constant backend and frontend adjustments and may result in unused paths.', 'Fetching redundant data in a RESTful API can lead to increased bandwidth usage and slower app performance Fetching redundant data in a RESTful API can lead to increased bandwidth usage and slower app performance due to the need to process and render unnecessary data.', 'GraphQL addresses the issues of redundant data fetching and complex API management GraphQL resolves the issues of redundant data fetching, complex API management, and the need for multiple endpoints or query parameters, providing a more efficient and flexible approach to data retrieval and processing.']}], 'duration': 322.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc104216.jpg', 'highlights': ['GraphQL resolves the issues of redundant data fetching, complex API management, and the need for multiple endpoints or query parameters, providing a more efficient and flexible approach to data retrieval and processing.', 'The chapter emphasizes the need for basic Node.js knowledge to follow along smoothly.', 'GraphQL offers more flexibility than a RESTful API by allowing more efficient and customized data retrieval.', 'The importance of having basic to advanced knowledge in Node, MongoDB, and React is underlined for following along smoothly.', 'Fetching redundant data in a RESTful API can lead to increased bandwidth usage and slower app performance due to the need to process and render unnecessary data.', 'The complexity of managing multiple endpoints or query parameters in a RESTful API can slow down the development process.']}, {'end': 579.337, 'segs': [{'end': 457.912, 'src': 'embed', 'start': 426.73, 'weight': 0, 'content': [{'end': 433.254, 'text': 'instead, with graphql, we can build a backend which exposes endpoints, or one endpoint actually,', 'start': 426.73, 'duration': 6.524}, {'end': 439.078, 'text': 'as you will learn which is very flexible regarding the query that gets set to it.', 'start': 433.254, 'duration': 5.824}, {'end': 448.705, 'text': 'we basically expose a query language to the front that we could say, And therefore our frontend engineers can request data in all kinds of shapes,', 'start': 439.078, 'duration': 9.627}, {'end': 457.912, 'text': "but we on the backend don't constantly have to edit the API because we expose it in a very flexible format and then frontend people get only what they need.", 'start': 448.705, 'duration': 9.207}], 'summary': 'Graphql allows for a flexible backend with one endpoint, enabling frontend engineers to request data in various shapes without constant api editing.', 'duration': 31.182, 'max_score': 426.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc426730.jpg'}, {'end': 545.034, 'src': 'embed', 'start': 509.187, 'weight': 1, 'content': [{'end': 514.111, 'text': 'So you have only one single endpoint slash GraphQL with a post request.', 'start': 509.187, 'duration': 4.924}, {'end': 523.7, 'text': 'And the reason for sending a post request is that GraphQL basically exposes a query language to the front end,', 'start': 514.932, 'duration': 8.768}, {'end': 528.004, 'text': 'like you have query languages for SQL or for NoSQL databases.', 'start': 523.7, 'duration': 4.304}, {'end': 533.989, 'text': "This is like a custom written query language which you don't have to invent on your own.", 'start': 528.505, 'duration': 5.484}, {'end': 545.034, 'text': 'there is a graphql specification which we will implement in the next videos and therefore the frontend can send commands to the backend with such a post request to fetch the data that is well,', 'start': 533.989, 'duration': 11.045}], 'summary': 'Graphql uses a single endpoint with a post request to implement a custom query language for fetching data.', 'duration': 35.847, 'max_score': 509.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc509187.jpg'}, {'end': 579.337, 'src': 'embed', 'start': 554.079, 'weight': 2, 'content': [{'end': 562.945, 'text': 'We use a post request because post requests have request bodies and we can enclose or encode our command, our query, into that body.', 'start': 554.079, 'duration': 8.866}, {'end': 564.146, 'text': "That's the idea here.", 'start': 563.265, 'duration': 0.881}, {'end': 571.651, 'text': 'Hence, we always have post requests, not because we always add content, but because we need to send that data in the post body.', 'start': 564.406, 'duration': 7.245}, {'end': 574.613, 'text': 'We need to send that query expression in the post body.', 'start': 571.811, 'duration': 2.802}, {'end': 579.337, 'text': 'Now, this query expression looks something like this.', 'start': 576.195, 'duration': 3.142}], 'summary': 'Utilize post requests to enclose query in request body for sending data.', 'duration': 25.258, 'max_score': 554.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc554079.jpg'}], 'start': 426.73, 'title': 'Understanding graphql basics', 'summary': 'Explains how graphql offers flexibility in querying data and how it differs from traditional rest apis, highlighting the use of a single post request to a flexible endpoint to fetch requested data.', 'chapters': [{'end': 579.337, 'start': 426.73, 'title': 'Understanding graphql basics', 'summary': 'Explains how graphql offers flexibility in querying data and how it differs from traditional rest apis, emphasizing the use of a single post request to a flexible endpoint to fetch requested data.', 'duration': 152.607, 'highlights': ['GraphQL allows for flexibility in querying data, enabling frontend engineers to request data in various shapes without requiring constant backend API edits. Flexibility in querying data shapes', "GraphQL uses a single endpoint, typically '/GraphQL', with a POST request for all data requests, simplifying the request process and enabling the frontend to send commands to the backend for data retrieval. Use of single endpoint and POST request for all data requests", 'The use of POST requests in GraphQL is to enclose the query expression in the request body, similar to how SQL commands are sent to databases, allowing for precise data retrieval. Explanation of using POST requests to enclose query expression']}], 'duration': 152.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc426730.jpg', 'highlights': ['Flexibility in querying data shapes', 'Use of single endpoint and POST request for all data requests', 'Explanation of using POST requests to enclose query expression']}, {'end': 717.716, 'segs': [{'end': 695.399, 'src': 'embed', 'start': 627.069, 'weight': 0, 'content': [{'end': 632.111, 'text': 'because Facebook invented GraphQL and they first of all introduced it with React.', 'start': 627.069, 'duration': 5.042}, {'end': 633.952, 'text': 'That is both not true.', 'start': 632.611, 'duration': 1.341}, {'end': 643.256, 'text': 'GraphQL is an alternative to REST APIs and it works with any server-side language and with any front-end framework or even with vanilla JavaScript.', 'start': 634.452, 'duration': 8.804}, {'end': 646.978, 'text': "It's not restricted to Facebook or React or anything like that.", 'start': 643.636, 'duration': 3.342}, {'end': 652.601, 'text': 'That were just the first use cases, but not the limitations of GraphQL.', 'start': 647.438, 'duration': 5.163}, {'end': 655.669, 'text': 'So back to that query.', 'start': 654.468, 'duration': 1.201}, {'end': 662.776, 'text': "In a typical GraphQL query, and we'll look at that in more details when we write some, we have an operation type.", 'start': 656.23, 'duration': 6.546}, {'end': 664.478, 'text': 'So here we send a query.', 'start': 663.117, 'duration': 1.361}, {'end': 667.061, 'text': 'An alternative would be sending a mutation.', 'start': 665.179, 'duration': 1.882}, {'end': 669.323, 'text': 'A query is when we want to get data.', 'start': 667.421, 'duration': 1.902}, {'end': 673.567, 'text': "Later, we'll learn about mutations where we can also change data on the server.", 'start': 669.763, 'duration': 3.804}, {'end': 686.974, 'text': 'we have the endpoint and we define that when we define the api something we will do together in this series the endpoint we want to target with that query and then the fields we want to request.', 'start': 674.528, 'duration': 12.446}, {'end': 692.657, 'text': "so the data we want to get back, and this shows us the flexibility, because here we're, for example,", 'start': 686.974, 'duration': 5.683}, {'end': 695.399, 'text': 'saying i want to have the name and age for the user.', 'start': 692.657, 'duration': 2.742}], 'summary': "Graphql is not limited to facebook or react, it's a flexible alternative to rest apis, supporting various frameworks and languages.", 'duration': 68.33, 'max_score': 627.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc627069.jpg'}], 'start': 579.937, 'title': 'Graphql query structure', 'summary': 'Explains the structure of a typical graphql query, emphasizing its flexibility and lack of restrictions on frameworks or languages.', 'chapters': [{'end': 717.716, 'start': 579.937, 'title': 'Graphql query structure', 'summary': 'Explains the structure of a typical graphql query, highlighting that it is not restricted to specific frameworks or languages and emphasizes the flexibility it offers in defining the requested data fields.', 'duration': 137.779, 'highlights': ['GraphQL is not restricted to Facebook or React. GraphQL is an alternative to REST APIs and works with any server-side language and any front-end framework, not restricted to Facebook or React.', 'Structure of a typical GraphQL query The chapter explains the structure of a typical GraphQL query, including the operation type, endpoint definition, and requested fields.', 'Flexibility in defining requested data fields The flexibility of GraphQL is demonstrated by the ability to specify the exact data fields needed, showcasing the potential for requesting various fields beyond the provided examples.']}], 'duration': 137.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc579937.jpg', 'highlights': ['GraphQL is not restricted to Facebook or React. GraphQL is an alternative to REST APIs and works with any server-side language and any front-end framework, not restricted to Facebook or React.', 'Structure of a typical GraphQL query The chapter explains the structure of a typical GraphQL query, including the operation type, endpoint definition, and requested fields.', 'Flexibility in defining requested data fields The flexibility of GraphQL is demonstrated by the ability to specify the exact data fields needed, showcasing the potential for requesting various fields beyond the provided examples.']}, {'end': 1333.332, 'segs': [{'end': 748.895, 'src': 'embed', 'start': 718.795, 'weight': 0, 'content': [{'end': 723.018, 'text': 'Operation types are queries which are there to retrieve data.', 'start': 718.795, 'duration': 4.223}, {'end': 727.882, 'text': 'If you would want to translate it to the REST world, that would be your GET request.', 'start': 723.339, 'duration': 4.543}, {'end': 730.845, 'text': "But important, it's still a POST request in GraphQL.", 'start': 728.082, 'duration': 2.763}, {'end': 737.129, 'text': 'Everything is sent as a POST request, but translated to the REST world, this would be your typical GET request.', 'start': 731.385, 'duration': 5.744}, {'end': 741.091, 'text': 'we got mutations, which is when we want to change data.', 'start': 738.01, 'duration': 3.081}, {'end': 748.895, 'text': 'therefore, if we would want to translate this to the rest world, this would be the post put patch and delete methods again.', 'start': 741.091, 'duration': 7.804}], 'summary': 'In graphql, queries are akin to get requests, mutations are akin to post, put, patch, and delete methods in rest.', 'duration': 30.1, 'max_score': 718.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc718795.jpg'}, {'end': 813.341, 'src': 'heatmap', 'start': 741.091, 'weight': 1, 'content': [{'end': 748.895, 'text': 'therefore, if we would want to translate this to the rest world, this would be the post put patch and delete methods again.', 'start': 741.091, 'duration': 7.804}, {'end': 755.818, 'text': 'only post is used here in graphql, but this would be how you would have done it in a rest world, and we also have subscriptions.', 'start': 748.895, 'duration': 6.923}, {'end': 763.801, 'text': 'this is implemented via web sockets and this is for scenarios where we want to push updates from the server to the client.', 'start': 755.818, 'duration': 7.983}, {'end': 769.102, 'text': 'we need an established web socket connection for that, So that is GraphQL.', 'start': 763.801, 'duration': 5.301}, {'end': 774.186, 'text': 'If we have a look at it in a big picture, we have the client, browser, mobile app.', 'start': 769.983, 'duration': 4.203}, {'end': 778.95, 'text': 'We have our server with the GraphQL API running on it with that single endpoint.', 'start': 774.686, 'duration': 4.264}, {'end': 783.293, 'text': 'Then we have a couple of query mutation and subscription definitions on the server.', 'start': 779.59, 'duration': 3.703}, {'end': 785.155, 'text': 'This is how we define our API.', 'start': 783.433, 'duration': 1.722}, {'end': 788.217, 'text': 'We as a developer, we write these definitions.', 'start': 785.315, 'duration': 2.902}, {'end': 794.363, 'text': 'We have some type definitions because GraphQL is actually a typed language.', 'start': 789.298, 'duration': 5.065}, {'end': 804.193, 'text': "It's not a programming language, but the query language we're essentially using here, which was defined and evolved by Facebook,", 'start': 794.443, 'duration': 9.75}, {'end': 810.499, 'text': 'uses types so that we are very clear about which type of data is returned for a given endpoint or is edited.', 'start': 804.193, 'duration': 6.306}, {'end': 813.341, 'text': 'And all of that works together.', 'start': 811.6, 'duration': 1.741}], 'summary': 'Graphql uses post, patch, delete methods and web sockets for subscriptions, providing clear type definitions for data.', 'duration': 49.54, 'max_score': 741.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc741091.jpg'}, {'end': 914.589, 'src': 'heatmap', 'start': 889.6, 'weight': 0.909, 'content': [{'end': 898.846, 'text': "i'm open for changes and we might add some changes in between, but this is a full graphql api now It's a normal Node Express application in the end.", 'start': 889.6, 'duration': 9.246}, {'end': 902.506, 'text': 'We start up the Node or the Express server here.', 'start': 898.906, 'duration': 3.6}, {'end': 905.027, 'text': 'I connect to MongoDB.', 'start': 903.107, 'duration': 1.92}, {'end': 908.788, 'text': 'And the interesting part is this middleware, which we add here.', 'start': 905.747, 'duration': 3.041}, {'end': 914.589, 'text': 'In this middleware, we define one endpoint, GraphQL, to which requests can be sent.', 'start': 909.128, 'duration': 5.461}], 'summary': 'Node express app with graphql api and mongodb connection', 'duration': 24.989, 'max_score': 889.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc889600.jpg'}, {'end': 1307.959, 'src': 'embed', 'start': 1281.537, 'weight': 3, 'content': [{'end': 1294.374, 'text': 'and tools like Express GraphQL help us parse these incoming requests on the server and take the data we prepare on the server and only pull out the single fields we did request in our query,', 'start': 1281.537, 'duration': 12.837}, {'end': 1298.62, 'text': 'so that the filtering is done on the server side and not on the client side.', 'start': 1294.374, 'duration': 4.246}, {'end': 1307.959, 'text': 'And here, if I run this, then for example, I did log in successfully because these are valid credentials and I did get my JWT token here.', 'start': 1299.414, 'duration': 8.545}], 'summary': 'Express graphql parses requests, filters data on server side, and provides jwt token on successful login.', 'duration': 26.422, 'max_score': 1281.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc1281537.jpg'}], 'start': 718.795, 'title': 'Graphql basics', 'summary': 'Introduces graphql basics, including operation types (queries, mutations, subscriptions), their equivalence to rest methods, use of web sockets for subscriptions, defining api endpoints, type definitions, resolvers, and comparison with rest apis, emphasizing flexibility and efficiency in data handling, and providing a sneak peek into the upcoming content.', 'chapters': [{'end': 763.801, 'start': 718.795, 'title': 'Graphql operation types', 'summary': 'Explains the different operation types in graphql including queries, mutations, and subscriptions, highlighting their equivalence to rest methods and the use of web sockets for subscriptions.', 'duration': 45.006, 'highlights': ['GraphQL has three operation types: queries, mutations, and subscriptions, which correspond to GET, post put patch, delete methods, and web sockets respectively.', 'Queries in GraphQL correspond to the GET request in REST, while mutations correspond to post put patch and delete methods in REST.', 'Subscriptions in GraphQL are implemented via web sockets and are used for pushing updates from the server to the client.']}, {'end': 1333.332, 'start': 763.801, 'title': 'Introduction to graphql api', 'summary': 'Introduces the basics of graphql, highlighting its use for defining api endpoints, type definitions, resolvers, and its comparison with rest apis. the chapter emphasizes the flexibility and efficiency of graphql in handling data requests and responses, demonstrating its usage and providing a sneak peek into the upcoming content of the series.', 'duration': 569.531, 'highlights': ['Introduction to GraphQL Basics The chapter provides a comprehensive introduction to GraphQL, explaining its usage for defining API endpoints, type definitions, and resolvers, as well as its comparison with REST APIs.', 'Flexibility of GraphQL Queries The flexibility of GraphQL queries is highlighted, demonstrating the ability to fetch specific data fields and the server-side filtering of requested data.', 'Efficiency of GraphQL in Data Handling The efficiency of GraphQL in handling data requests and responses is emphasized, showcasing its ability to efficiently parse incoming queries on the server and retrieve only the requested fields.']}], 'duration': 614.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7giZGFDGnkc/pics/7giZGFDGnkc718795.jpg', 'highlights': ['GraphQL has three operation types: queries, mutations, and subscriptions, which correspond to GET, post put patch, delete methods, and web sockets respectively.', 'Introduction to GraphQL Basics The chapter provides a comprehensive introduction to GraphQL, explaining its usage for defining API endpoints, type definitions, and resolvers, as well as its comparison with REST APIs.', 'Queries in GraphQL correspond to the GET request in REST, while mutations correspond to post put patch and delete methods in REST.', 'Efficiency of GraphQL in Data Handling The efficiency of GraphQL in handling data requests and responses is emphasized, showcasing its ability to efficiently parse incoming queries on the server and retrieve only the requested fields.', 'Subscriptions in GraphQL are implemented via web sockets and are used for pushing updates from the server to the client.']}], 'highlights': ['The project will include the development of a GraphQL API from scratch, connecting it to a MongoDB database, and building a React.js single page application for the front end.', 'GraphQL resolves the issues of redundant data fetching, complex API management, and the need for multiple endpoints or query parameters, providing a more efficient and flexible approach to data retrieval and processing.', 'GraphQL offers more flexibility than a RESTful API by allowing more efficient and customized data retrieval.', 'GraphQL has three operation types: queries, mutations, and subscriptions, which correspond to GET, post put patch, delete methods, and web sockets respectively.', 'GraphQL is not restricted to Facebook or React. GraphQL is an alternative to REST APIs and works with any server-side language and any front-end framework, not restricted to Facebook or React.', 'Flexibility in querying data shapes', 'Use of single endpoint and POST request for all data requests', 'GraphQL offers more flexibility than a RESTful API by allowing more efficient and customized data retrieval.', 'The chapter explains the structure of a typical GraphQL query, including the operation type, endpoint definition, and requested fields.', 'The flexibility of GraphQL is demonstrated by the ability to specify the exact data fields needed, showcasing the potential for requesting various fields beyond the provided examples.', 'Introduction to GraphQL Basics The chapter provides a comprehensive introduction to GraphQL, explaining its usage for defining API endpoints, type definitions, and resolvers, as well as its comparison with REST APIs.', 'Efficiency of GraphQL in Data Handling The efficiency of GraphQL in handling data requests and responses is emphasized, showcasing its ability to efficiently parse incoming queries on the server and retrieve only the requested fields.', 'Subscriptions in GraphQL are implemented via web sockets and are used for pushing updates from the server to the client.']}