Fullstack TypeScript (feat. GraphQL & Node.js)

Table of Contents

• 

  Introduction

  00:00:00 - 00:09:05 View Transcript

  Mike 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 Setup

  00:09:06 - 00:23:46 View Transcript

  Mike 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.

• 

  Resolver

  00:23:47 - 00:31:16 View Transcript

  Mike 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 Resolver

  00:31:17 - 00:41:37 View Transcript

  Mike 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 Resolver

  00:41:38 - 00:56:29 View Transcript

  Mike 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 Data

  00:56:30 - 01:11:41 View Transcript

  Mike 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 Database

  01:11:42 - 01:16:48 View Transcript

  Mike 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 Data

  01:16:49 - 01:26:48 View Transcript

  Mike 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 Data

  01:26:49 - 01:40:10 View Transcript

  Mike 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 UI

  01:40:11 - 01:55:15 View Transcript

  Mike 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.

• 

  Mutations

  01:55:16 - 02:07:57 View Transcript

  Mike 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 Mutation

  02:07:58 - 02:26:18 View Transcript

  Mike 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 Feature

  02:26:19 - 02:40:10 View Transcript

  Mike 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 Interactivity

  02:40:11 - 02:51:44 View Transcript

  Mike 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 Types

  02:51:45 - 03:05:09 View Transcript

  Mike 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.

• 

  Wrapping Up

  03:05:10 - 03:11:39 View Transcript

  Mike wraps up the course by answering student questions regarding whether a type could be defined to verify a hashtag key and some things to remember about the cache. Brief closing thoughts for the course are also provided in this segment.