View the Frontend Masters workshop for Full Stack TypeScript here

Full Stack TypeScript

Combine TypeScript and GraphQL's type systems to create full-stack, fully type-checked code bases that are shockingly easy to refactor and maintain.

01Intro

We'll discuss the goals and agenda of this course, and how to get up and running with the workshop project in 2 minutes or less.

02GraphQL Intro

A conceptual overview of GraphQL, and the problems that it aims to solve

03Project Tour

Let's take a look at the starting point code for our workshop project, a twitter clone

04Hello Apollo

We'll get our GraphQL API up and running quickly and easily using Apollo server

05First Resolver

We'll make our first GraphQL resolver, to make our new API queryable

06Imported Resolver

To get the full advantage of one GraphQL schema that both client and server sub-projects use, we need to break it out into a separate file.

07Typed Resolver

Let's deliver on the promise of two type systems coming together in blissful unity, by adding automatically generated types to our resolvers

08UI Consumes Real Data

Now that we have a GraphQL API up and running, let's actually bring it into our React app!

10Nested data

In two situations, there's some "detail" in a nested object that we need to build only when needed

11Mutations

We'll create new data for the first time, using a GraphQL mutation for the "post a new tweet" feature

12Favorites

We'll create new data for the first time, using a GraphQL mutation for the "post a new tweet" feature

13Favorites Interactivity

Let's make our "like" button clickable, by creating and deleting a "favorite" resource

14Trends

Let's try using a union type to implement the "trends" portion of the sidebar in the twitter UI

© 2022 All Rights Reserved.