👋 Welcome to data loaders with Apollo Server & TypeScript!

We're excited you're here! Together we'll set our sights on improving performance in our GraphQL applications, zooming in on the best practice of using data loaders. We've got lots of hands-on opportunities ahead, and you'll find quizzes and challenges to test your understanding as we tackle this topic.

In this course, we'll address one of the sneaky performance problems that can appear in GraphQL projects: the n+1 problem. Once we understand how this problem occurs, we'll implement the solution using data loaders. We'll walk through the steps of implementing and using data loaders in our TypeScript project, and see the direct effect they have on our app's performance.

Let's jump in!

What we're building

To explore this topic, we'll build on top of an existing GraphQL app called: Airlock.

Airlock is an intergalactic trip booking app: a resource we can use to find a cool place to stay in the wide open universe! We built the basics of this GraphQL server in the Intro to GraphQL course.

But don't worry—you don't need to have completed the first course before starting! We'll give you a fresh repo to clone, and walk you through all the steps to get data loaders up and running.

Let's get everything ready to start building!

Project setup

To follow along with the course, you will need the following:

Prerequisite knowledge

We assume that you are familiar with GraphQL concepts like types, queries, and mutations. Check out our Intro to GraphQL with Apollo Server & TypeScript course if you need a refresher.

You should also be familiar with TypeScript programming concepts.

Code editor or IDE

We're using VS Code.

Many popular IDEs offer plugins that enable GraphQL syntax highlighting. For VS Code, we recommend the GraphQL: Syntax Highlighting extension.

Clone the repository

This course picks up where Intro to GraphQL with Apollo Server & TypeScript left off, but completing it first isn't a prerequisite! To start fresh, run the following command.

Running the app

Finally, let's get our server up and running.

Navigate to the root directory in your terminal, and run the following commands.

First, to install packages:

Next, to boot up the server:

Shortly after, we should see in the terminal that our app is running!

Up next

Let's get into data loaders, the problem they solve, and how we bring them into our application.