1. Course overview and setup
3m

πŸ‘‹ Welcome to Intro to GraphQL with TypeScript!

Your journey begins now! Ready to embark?

In this series, we'll start from scratch and build a full-fledged using the Spotify API.

In this lesson, we will:

  • Learn about what we're building, and the technologies that help us build it
  • Set up our project environment

What is GraphQL?

Let's begin with the most important question of the course. What is GraphQL?

is the developer-friendly language for the modern web. It transforms how apps fetch data from an API, enabling you to get exactly what you need with a single queryβ€”instead of wrangling responses from a patchwork of REST endpoints.

With a strongly typed schema at its core, helps you define relationships between data across any number of systems, empowering you to focus on what your data can do instead of where it's stored.

Throughout this course, we're going to learn how GraphQL fits into our existing architecture and how it works with existing REST APIs and other data sources. We'll learn how to use queries, mutations, arguments, the schema, and resolvers in our GraphQL API. Get ready to roll up your sleeves, write some code, test your understanding, and build something cool! 🎢

Prerequisites

To follow along...

  • You should be familiar with basic TypeScript programming concepts.
  • You'll need Node installed (we recommend using the latest version) as well as an IDE (we're using Visual Studio Code).
  • Concepts and keywords like import, map, and async should be familiar before starting up.

What we're building

Listen up! Ready to tune into what we're building in this course? Drumroll please! πŸ₯

If you couldn't tell from all those music-related cues, we're building a music catalog API called MusicMatcher that helps us find the right soundtrack for the right moment.

Mockup of MusicMatcher

For this first iteration of MusicMatcher, we'll focus on playlists: showcasing featured playlists, listing a playlist's tracks, and adding tracks. In future courses, we'll add more features like pagination, authentication, intermediate schema design concepts, and federation.

Clone the repository

In the directory of your choice with your preferred terminal, clone the app's starter repository:

git clone https://github.com/apollographql-education/intro-typescript.git
Task!

Note: If you get stuck at any time during the course, feel free to check out the final branch for some help.

Project structure

Our project already contains the files we need to get started and run our server, but we'll work primarily out of the src package highlighted below.

πŸ“¦ intro-typescript
┣ πŸ“‚ src
┃ ┣ πŸ“„ index.ts
┃ ┣ πŸ“„ graphql.d.ts
┣ πŸ“„ package.json
┣ πŸ“„ README.md
β”— πŸ“„ tsconfig.json

The graphql.d.ts file shown above is a type definition file. You won't need to do anything with it; it's there to give our TypeScript project an understanding of what a .graphql file is when we create one in an upcoming lesson!

Now, open the repository in your favorite IDE. (We're using Visual Studio Code!)

Let's build and run the app

In the terminal, navigate to the root of the directory and run the following command.

npm install && npm run dev

Note: We recommend using the latest LTS version of Node. To check your Node version, run node -v.

If all goes well, you'll see your installation complete and a message that ts-node-dev is waiting for changes to your ./src/index.ts file. There's nothing else to do here, because we don't have any code for ts-node-dev to run just yet.

Task!

Let's jump in!

πŸ’Ύ Data!

Throughout the course, we'll build the API that serves (and updates) data for playlists and their tracks.

Mockup of MusicMatcher

This mockup shows a grid of featured playlists. For each playlist, we can start to see which pieces of data we need: a name and a description.

We need even more data to create a view for a specific playlist.

Here we can see the specific elements that make up each track contained in a playlist: its name, link, duration, and whether it's considered explicit.

A mockup of a specific Playlist page, showing a list of tracks

To represent these different pieces in , we can think about our data as a collection of objects (such as playlists and tracks) and relationships between objects (such as each playlist having at least one track).

Now, if we think of each object as a node and each relationship as an edge between two nodes, we can envision our entire data model as a collection of nodes and edges. This is called our application's graph.

A data graph visual, with a Playlist node and several edges pointing to its properties. One of the edges, tracks, points to a list of Track nodes.

Practice

Which of these accurately describes a graph in GraphQL?

Key takeaways

  • enables precise data retrieval with a single , eliminating the need to navigate multiple REST endpoints on the client app side.
  • enables us to build APIs by describing our data in terms of (nodes) and relationships (edges).

Up next

This is what is made up of, but we still need to talk about HOW it actually works. In the next lesson, we'll jump into the basics and follow the journey of a GraphQL .

Next

Share your questions and comments about this lesson

This course is currently in

beta
. Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.