Media is too big
VIEW IN TELEGRAM
13. Configuring the API Server
Scott guides students through creating schema and resolver files and configuring the server in the route.ts file. He explains the purpose of each step and provides code examples for students to follow along.
- https://clumsy-humor-894.notion.site/4-Creating-an-API-a211adfd0d2b45e5933c2e9a54c775ab
#lesson
Scott guides students through creating schema and resolver files and configuring the server in the route.ts file. He explains the purpose of each step and provides code examples for students to follow along.
- https://clumsy-humor-894.notion.site/4-Creating-an-API-a211adfd0d2b45e5933c2e9a54c775ab
#lesson
Media is too big
VIEW IN TELEGRAM
14. Authentication Schema
Scott discusses the necessary components for authentication, such as the user type, query to get the user, and input for signing in. He mentions the importance of not including sensitive information, like passwords, in the GraphQL schema. He also provides examples of how to define the user type, auth input, and mutations for signing in.
- https://clumsy-humor-894.notion.site/5-Authentication-56c255319ff84214b7b4c12399b4dbaf
#lesson
Scott discusses the necessary components for authentication, such as the user type, query to get the user, and input for signing in. He mentions the importance of not including sensitive information, like passwords, in the GraphQL schema. He also provides examples of how to define the user type, auth input, and mutations for signing in.
- https://clumsy-humor-894.notion.site/5-Authentication-56c255319ff84214b7b4c12399b4dbaf
#lesson
Media is too big
VIEW IN TELEGRAM
15. Authentication Resolver
Scott walks through creating resolvers and explains the purpose of the imports and the different utility functions used in the resolvers. He also demonstrates creating a resolver for the "me" query and the signin and signup mutations.
#lesson
Scott walks through creating resolvers and explains the purpose of the imports and the different utility functions used in the resolvers. He also demonstrates creating a resolver for the "me" query and the signin and signup mutations.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Testing the Authentication Routes
Scott explains how to configure the global context to retrieve the current user if an authorization header is set. He demonstrates how to add a context property to the Apollo server configuration and writes a function that retrieves the user from the authorization header.
#lesson
Scott explains how to configure the global context to retrieve the current user if an authorization header is set. He demonstrates how to add a context property to the Apollo server configuration and writes a function that retrieves the user from the authorization header.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Creating Issues
Scott guides students through the process of creating a "create issue" mutation in GraphQL. He defines the issue type, creates an input type for creating an issue, and implements the mutation resolver.
- https://clumsy-humor-894.notion.site/6-Create-Issues-9ba38ba5cfa34592bc9f4d5b5bab9e5b
#lesson
Scott guides students through the process of creating a "create issue" mutation in GraphQL. He defines the issue type, creates an input type for creating an issue, and implements the mutation resolver.
- https://clumsy-humor-894.notion.site/6-Create-Issues-9ba38ba5cfa34592bc9f4d5b5bab9e5b
#lesson
Media is too big
VIEW IN TELEGRAM
18. Retrieving & Filtering Issues
Scott explains how to create a GraphQL query for retrieving issues and their associated users. He demonstrates how to add an "issues" field to the User type in the schema, create a resolver for the "issues" field, and implement the necessary database queries and filters to fetch the issues.
- https://clumsy-humor-894.notion.site/7-Issues-636ccda37c9c4570be76028d73f7597c
#lesson
Scott explains how to create a GraphQL query for retrieving issues and their associated users. He demonstrates how to add an "issues" field to the User type in the schema, create a resolver for the "issues" field, and implement the necessary database queries and filters to fetch the issues.
- https://clumsy-humor-894.notion.site/7-Issues-636ccda37c9c4570be76028d73f7597c
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
19. Resolvers Q&A
Scott answers a student's question regarding how to pass additional data to the context object in GraphQL resolvers. He also discusses the concept of the parent argument in resolver functions and explains how to determine the parent based on the query structure.
#lesson
Scott answers a student's question regarding how to pass additional data to the context object in GraphQL resolvers. He also discusses the concept of the parent argument in resolver functions and explains how to determine the parent based on the query structure.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Editing & Deleting Issues
Scott discusses the input arguments required for editing an issue, such as the issue ID and optional fields like name, content, and status. He also demonstrates how to create the resolver for the edit issue mutation, which includes authentication checks and updating the issue in the database. The delete functionality is left as an extra credit task for both the server-side and client-side courses.
#lesson
Scott discusses the input arguments required for editing an issue, such as the issue ID and optional fields like name, content, and status. He also demonstrates how to create the resolver for the edit issue mutation, which includes authentication checks and updating the issue in the database. The delete functionality is left as an extra credit task for both the server-side and client-side courses.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Wrapping Up
Scott wraps up the course by providing recommendations for using GraphQL going forward. He suggests figuring out where to install GraphQL, such as on the edge or as an API gateway, and choosing a framework like Apollo or GraphQL Yoga.
#lesson
Scott wraps up the course by providing recommendations for using GraphQL going forward. He suggests figuring out where to install GraphQL, such as on the edge or as an API gateway, and choosing a framework like Apollo or GraphQL Yoga.
#lesson
Title: Client-Side GraphQL with React, v2
Description: Wire up a React client application with dynamic data while learning the fundamentals of GraphQL queries and mutations.
Link: https://frontendmasters.com/courses/client-graphql-react-v2/
Time: 2 hours, 54 minutes
Lessons: 17 / 17
Tags: #course #frontendmasters #720p
Description: Wire up a React client application with dynamic data while learning the fundamentals of GraphQL queries and mutations.
Link: https://frontendmasters.com/courses/client-graphql-react-v2/
Time: 2 hours, 54 minutes
Lessons: 17 / 17
Tags: #course #frontendmasters #720p
Frontendmasters
Learn to use GraphQL in React applications
Wire up a React client application with dynamic data while learning the fundamentals of GraphQL queries and mutations.
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Scott introduces the course and discusses the course prerequisites, including knowledge of React and JavaScript, as well as some experience with interacting with APIs. He also provides a brief overview of the app and what will be covered in the course.
- https://github.com/Hendrixer/clientside-gql
- https://clumsy-humor-894.notion.site/Client-side-GraphQL-with-React-4248372d51604858aaf9eeb9127b6433
#lesson
Scott introduces the course and discusses the course prerequisites, including knowledge of React and JavaScript, as well as some experience with interacting with APIs. He also provides a brief overview of the app and what will be covered in the course.
- https://github.com/Hendrixer/clientside-gql
- https://clumsy-humor-894.notion.site/Client-side-GraphQL-with-React-4248372d51604858aaf9eeb9127b6433
#lesson
Media is too big
VIEW IN TELEGRAM
2. Course Setup
Scott provides a setup guide and explains the tools and dependencies needed, such as Git, Node.js, and Turso. He walks through the process of creating a Turso account, downloading the CLI, and creating a token for the database. He also explains how to set up environment variables and push the schema to the database.
#lesson
Scott provides a setup guide and explains the tools and dependencies needed, such as Git, Node.js, and Turso. He walks through the process of creating a Turso account, downloading the CLI, and creating a token for the database. He also explains how to set up environment variables and push the schema to the database.
#lesson
Media is too big
VIEW IN TELEGRAM
3. What is GraphQL
Scott describes GraphQL as a powerful query language for APIs that allows clients to request exactly what they need and nothing more. He discusses the advantages of GraphQL over REST, such as type safety and the ability to query highly relational data in any format. Scott also provides examples of GraphQL queries and explains the basic building blocks of a query, including fields, nested objects, and arguments.
- https://clumsy-humor-894.notion.site/1-What-is-GraphQL-a546f53b61654cd6aee6e55bd5ac19c9
#lesson
Scott describes GraphQL as a powerful query language for APIs that allows clients to request exactly what they need and nothing more. He discusses the advantages of GraphQL over REST, such as type safety and the ability to query highly relational data in any format. Scott also provides examples of GraphQL queries and explains the basic building blocks of a query, including fields, nested objects, and arguments.
- https://clumsy-humor-894.notion.site/1-What-is-GraphQL-a546f53b61654cd6aee6e55bd5ac19c9
#lesson
Media is too big
VIEW IN TELEGRAM
4. GraphQL Playground in Apollo Studio
Scott introduces the Star Wars API and demonstrates how to use the provided Apollo Studio app to retrieve data from the API. He also explains the syntax for using arguments in GraphQL queries and demonstrates how to pass arguments to retrieve specific data.
#lesson
Scott introduces the Star Wars API and demonstrates how to use the provided Apollo Studio app to retrieve data from the API. He also explains the syntax for using arguments in GraphQL queries and demonstrates how to pass arguments to retrieve specific data.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
5. Project App Tour
Scott introduces the application that will be built and provides a brief overview of its functionality. He demonstrates how to run the completed app and explains that this course will focus on writing the queries and mutations in GraphQL for the desired user experience.
#lesson
Scott introduces the application that will be built and provides a brief overview of its functionality. He demonstrates how to run the completed app and explains that this course will focus on writing the queries and mutations in GraphQL for the desired user experience.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
6. GraphQL Query with fetch
Scott discusses using fetch to send a GraphQL query as a POST request, with the query stringified and included in the body of the request. When using GraphQL, all responses have a 200 status code and errors are indicated in the "errors" field of the response data. He highlights the importance of checking the payload of the response to determine if there were any errors, as browsers and clients may not automatically recognize and display GraphQL errors.
- https://clumsy-humor-894.notion.site/3-GQL-API-Calls-40d8f4107c2c4758b04371ebf55841a4
#lesson
Scott discusses using fetch to send a GraphQL query as a POST request, with the query stringified and included in the body of the request. When using GraphQL, all responses have a 200 status code and errors are indicated in the "errors" field of the response data. He highlights the importance of checking the payload of the response to determine if there were any errors, as browsers and clients may not automatically recognize and display GraphQL errors.
- https://clumsy-humor-894.notion.site/3-GQL-API-Calls-40d8f4107c2c4758b04371ebf55841a4
#lesson
Media is too big
VIEW IN TELEGRAM
7. Setup Urql Provider & Caching
Scott introduces the Urql library as a lightweight alternative to Apollo for client-side GraphQL. He walks through the process of setting up the urql client in a React app by creating a GQLProvider component that wraps the entire app and provides the client instance. The GQLProvider uses the Urql library to create a client with the necessary plugins and options, including the cache exchange and fetch options.
- https://clumsy-humor-894.notion.site/4-Urql-Er-kull-f978259d84c148df819e2ace9a45ac5c
#lesson
Scott introduces the Urql library as a lightweight alternative to Apollo for client-side GraphQL. He walks through the process of setting up the urql client in a React app by creating a GQLProvider component that wraps the entire app and provides the client instance. The GQLProvider uses the Urql library to create a client with the necessary plugins and options, including the cache exchange and fetch options.
- https://clumsy-humor-894.notion.site/4-Urql-Er-kull-f978259d84c148df819e2ace9a45ac5c
#lesson
Media is too big
VIEW IN TELEGRAM
8. Next.js & Course Project Q&A
Scott answers various questions from students such as the use of parentheses in Next.js routes, the relevance of server-side rendering (SSR) and caching in Next.js, when to use types in code, the advantages of using GraphQL in a microservice architecture, and setting headers in the Next.js config for access control.
#lesson
Scott answers various questions from students such as the use of parentheses in Next.js routes, the relevance of server-side rendering (SSR) and caching in Next.js, when to use types in code, the advantages of using GraphQL in a microservice architecture, and setting headers in the Next.js config for access control.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Creating a Sign Up Mutation
Scott demonstrates how to use the GraphQL API explorer to create a mutation for signing up a user. He walks through the process of creating the mutation, specifying the required input arguments, and selecting the desired fields to be returned. He also explains the concept of input arguments, how they map to the variables passed in the GraphQL query, and how to export the mutation and use it in a separate file for the sign-up functionality.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686966
#lesson
Scott demonstrates how to use the GraphQL API explorer to create a mutation for signing up a user. He walks through the process of creating the mutation, specifying the required input arguments, and selecting the desired fields to be returned. He also explains the concept of input arguments, how they map to the variables passed in the GraphQL query, and how to export the mutation and use it in a separate file for the sign-up functionality.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686966
#lesson
Media is too big
VIEW IN TELEGRAM
10. Using Mutations in React
Scott demonstrates how to implement sign-up and sign-in functionality using GraphQL mutations. He creates the mutations and uses the `useMutation` hook to handle the mutations in the component. Scott also shows how to handle the response from the server and perform actions such as setting the token in local storage and redirecting the user to the homepage.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686967
#lesson
Scott demonstrates how to implement sign-up and sign-in functionality using GraphQL mutations. He creates the mutations and uses the `useMutation` hook to handle the mutations in the component. Scott also shows how to handle the response from the server and perform actions such as setting the token in local storage and redirecting the user to the homepage.
- https://clumsy-humor-894.notion.site/5-Auth-b937ee9682d746a5a53ee96450686967
#lesson
Media is too big
VIEW IN TELEGRAM
11. Nested Data Queries
Scott demonstrates how to make a query to retrieve issues from a GraphQL server using Apollo Studio to explore the schema and write the query. He also explains the concept of nested queries and the potential performance issues that can arise from recursive queries. Scott then shows an example of a recursive query and mentions some potential solutions to handle these performance issues.
- https://clumsy-humor-894.notion.site/6-Issues-query-d5560fd59bc1426b9131fa5e892ed540
#lesson
Scott demonstrates how to make a query to retrieve issues from a GraphQL server using Apollo Studio to explore the schema and write the query. He also explains the concept of nested queries and the potential performance issues that can arise from recursive queries. Scott then shows an example of a recursive query and mentions some potential solutions to handle these performance issues.
- https://clumsy-humor-894.notion.site/6-Issues-query-d5560fd59bc1426b9131fa5e892ed540
#lesson