Media is too big
VIEW IN TELEGRAM
4. Schema Type Definition
Scott introduces the concept of the schema definition language (SDL) in GraphQL. He explains that SDL is used to define the structure and types of a GraphQL schema, similar to how a database schema defines the structure of a database. Scott demonstrates how to create a simple GraphQL schema using SDL and shows how to explore and test the schema using Apollo Studio.
- https://clumsy-humor-894.notion.site/2-SDL-c0c6bf4e1d934046a4dbf0880c62082a
#lesson
Scott introduces the concept of the schema definition language (SDL) in GraphQL. He explains that SDL is used to define the structure and types of a GraphQL schema, similar to how a database schema defines the structure of a database. Scott demonstrates how to create a simple GraphQL schema using SDL and shows how to explore and test the schema using Apollo Studio.
- https://clumsy-humor-894.notion.site/2-SDL-c0c6bf4e1d934046a4dbf0880c62082a
#lesson
Media is too big
VIEW IN TELEGRAM
5. Interface Types
Scott explains that an interface is like an abstract type that can be implemented by other object types. He demonstrates how to define an interface in the schema and how to implement it in different object types. He also shows how to query for common fields shared by objects that implement the interface, as well as specific fields for each object type.
#lesson
Scott explains that an interface is like an abstract type that can be implemented by other object types. He demonstrates how to define an interface in the schema and how to implement it in different object types. He also shows how to query for common fields shared by objects that implement the interface, as well as specific fields for each object type.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Union Types
Scott explains the concept of unions in GraphQL and provides an example of a search result where different types of objects can be returned. Scott demonstrates how to define a union type and incorporate it into the query object. He also discusses the syntax for querying fields on union types and how to determine the type of a union object using the " typename" field.
#lesson
Scott explains the concept of unions in GraphQL and provides an example of a search result where different types of objects can be returned. Scott demonstrates how to define a union type and incorporate it into the query object. He also discusses the syntax for querying fields on union types and how to determine the type of a union object using the " typename" field.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Schema Relationships
Scott discusses relationships in GraphQL and demonstrates how to define a one-to-one relationship between a profile and a person, as well as a cyclic relationship where a person has a profile and a profile has a person. Scott also mentions the potential issues with cyclic relationships and the need for additional tools or plugins to prevent abuse or performance problems.
#lesson
Scott discusses relationships in GraphQL and demonstrates how to define a one-to-one relationship between a profile and a person, as well as a cyclic relationship where a person has a profile and a profile has a person. Scott also mentions the potential issues with cyclic relationships and the need for additional tools or plugins to prevent abuse or performance problems.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Directives & Enums
Scott explains that directives are like middleware for fields or entities in a GraphQL schema. He demonstrates how to use the built-in "deprecated" directive to mark a field as deprecated and show a deprecation message in the GraphQL Explorer. He also mentions that custom directives can be created for various purposes, such as authentication.
#lesson
Scott explains that directives are like middleware for fields or entities in a GraphQL schema. He demonstrates how to use the built-in "deprecated" directive to mark a field as deprecated and show a deprecation message in the GraphQL Explorer. He also mentions that custom directives can be created for various purposes, such as authentication.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Queries & Mutations
Scott discusses the difference between queries and mutations, with queries being used to retrieve data and mutations being used to modify or create data. He also demonstrates how to pass arguments to queries and mutations, and how to use input types for more complex arguments. Scott also briefly touches on custom directives, walking through an example of how to create and use a directive called "uppercase" to modify the behavior of a field.
#lesson
Scott discusses the difference between queries and mutations, with queries being used to retrieve data and mutations being used to modify or create data. He also demonstrates how to pass arguments to queries and mutations, and how to use input types for more complex arguments. Scott also briefly touches on custom directives, walking through an example of how to create and use a directive called "uppercase" to modify the behavior of a field.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Resolvers
Scott explains that resolvers are functions that generate responses for GraphQL queries. He demonstrates how to create resolvers for different types and fields in the schema, and explains the arguments that resolvers receive, such as the parent object, arguments, context, and info. Scott also shows how resolvers can be used to override the default resolution of fields and return custom data.
- https://clumsy-humor-894.notion.site/3-Resolvers-bebd1ca0ddc447df8b22372d61890585
#lesson
Scott explains that resolvers are functions that generate responses for GraphQL queries. He demonstrates how to create resolvers for different types and fields in the schema, and explains the arguments that resolvers receive, such as the parent object, arguments, context, and info. Scott also shows how resolvers can be used to override the default resolution of fields and return custom data.
- https://clumsy-humor-894.notion.site/3-Resolvers-bebd1ca0ddc447df8b22372d61890585
#lesson
Media is too big
VIEW IN TELEGRAM
11. Resolving Enums & Unions
Scott discusses how to resolve enums, which involves mapping the enum values to different values if needed. Then, he moves on to resolving unions, which requires determining the type of the object being resolved based on its properties. Scott also provides examples and code snippets to demonstrate the process of resolving enums and unions.
#lesson
Scott discusses how to resolve enums, which involves mapping the enum values to different values if needed. Then, he moves on to resolving unions, which requires determining the type of the object being resolved based on its properties. Scott also provides examples and code snippets to demonstrate the process of resolving enums and unions.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
12. Resolving Nested Objects
Scott demonstrates how to create a resolver for a nested object, such as a person's pets, and explains the importance of only querying the database for the nested object when it is requested in the GraphQL query. Scott also clarifies the concept of the parent object in resolvers and mentions that the order of resolvers within an object does not matter, as long as the names match.
#lesson
Scott demonstrates how to create a resolver for a nested object, such as a person's pets, and explains the importance of only querying the database for the nested object when it is requested in the GraphQL query. Scott also clarifies the concept of the parent object in resolvers and mentions that the order of resolvers within an object does not matter, as long as the names match.
#lesson
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