Fullstack TypeScript (feat. GraphQL & Node.js)
Table of Contents
IntroductionMike North introduces the course by providing some personal background, benefits, and downsides of using TypeScript, what material will be covered in the course, and discusses what GraphQL is and what it aims to solve. A Twitter clone will be created using TypeScript and GraphQL to accomplish a full-stack application.
Apollo SetupMike walks through setting up an Apollo server, discusses the functions of the given server code, and demonstrates querying the server in Apollo studio. A student's question regarding what enforces non-nullable fields is also covered in this segment.
ResolverMike demonstrates how to create a resolver to grab the data that the Apollo server will organize and deserialize. A resolver is a function responsible for populating the data for a single field in the schema.
Imported ResolverMike walks through pulling out the schema from the apollo-server.ts into its schema.graphql file. Getting the resolvers out and breaking them down into smaller sub-objects is also covered in this segment.
Typed ResolverMike demonstrates adding types to the resolvers to all TypeScript to enforce type checking. Providing a type for the context object created for every new request is also covered in this segment.
Provider & UI Consuming DataMike demonstrates how to wire up the UI to consume real data from the Apollo graphQL client. A brief walkthrough of the contents of the API request is also provided in this segment.
Data from the DatabaseMike walks through how to make a call to the database to replace the fixture data array with new data from the database. This call will pull in the current user and follow suggestions.
Nested DataMike discusses nested data as the concept of relationships and embedding records related to other existing records. Generating updated TypeScript types, setting up context caches, resolvers, nested types, and inner resolvers are also covered in this segment.
Transforming DataMike discusses transforming data as data that converts from the database representation to the GraphQL representation. Creating a tweets function and a brief discussion regarding the adapter design pattern are also covered in this segment.
Create Resolver & Wiring UIMike walks through creating user and tweet inner resolvers and implementing them in the resolvers.ts file. Requesting current user stats and tweets from the database and rendering them to the DOM are also covered in this segment.
MutationsMike demonstrates adding mutations to the GraphQL schema and implementing mutation resolvers to allow new tweets to be created. The TypeScript compiler option noUncheckedIndexAction can be used to allow the return type the possibility of being undefined.
Client-Side MutationMike walks through modifying the React component ComposePanel, how to fix the resulting UI bug, and answers a few student questions. The tweet data will persist, but Apollo will need to re-fetch the data when clicking the create tweet button.
Adding Favorites FeatureMike demonstrates adding the favorites feature, which involves two mutations creating a liked tweet and deleting a tweet when it is unliked. Running yarn codegen on both client and server, adding a new transform function to the transform.ts file on the backend, and replacing them are also covered in this segment.
Favorites UI InteractivityMike walks through implementing favorites interactivity allowing users to like and unlike tweets by clicking the like button. Implementing an async handleFavoriteClick function with error catching is also covered in this course.
Using Union TypesMike demonstrates populating the trends section of the Twitter clone and discusses the concept of union types. Creating a new transform for the Trend object, a new top-level Query resolver, and a new Trend resolver module are all covered in this segment.