Fullstack TypeScript (feat. GraphQL & Node.js)
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
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
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.
Resolvers
Resolver
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
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
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.
Consuming Data
Provider & UI Consuming Data
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
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
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
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
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
Mutations
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
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
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.
App Development
Favorites UI Interactivity
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
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.
