👋 Welcome to Client-side GraphQL with React and Apollo!

Here we begin our journey building a GraphQL-powered, frontend app called Catstronauts—a learning platform for adventurous cats who want to explore the universe! 😺 🚀

Throughout this course, we'll explore the ins and outs of working with GraphQL on the client. By the final lesson, you'll have a fully-functional frontend app consuming and displaying data from a live GraphQL API.

Prerequisites

Our app will use Node.js on the backend and React 18 on the frontend. We recommend using the latest version of Node.

Concepts and keywords like import, map, async, jsx, TypeScript syntax, and React Hooks should all be familiar concepts before you start up.

Let's jump in!

What is GraphQL?

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

GraphQL is the developer-friendly query 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.

It uses a document, called a schema, to define the relationships between different types of data. And this data can come from anywhere: REST APIs, webhooks, and databases, to name a few! And when all of these different data sources are unified behind a GraphQL layer, the GraphQL schema becomes our single source of truth for everything our entire system can do.

This is great news for us on the frontend: we're no longer responsible for making lots of different requests to lots of different places. Instead, we can focus on what our data can do, rather than where it's stored. (That means cool new features, faster!)

What we're building

Let's get our project up and running, and dive into some GraphQL.

Clone the repository

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

Project structure

Here's the file structure:

Now, open the repository in your favorite IDE. We're using Visual Studio Code in our examples.

In a terminal window, navigate to the root of the project directory and run the following to install dependencies and start the app:

The console should show a bunch of output and a link to the running app at http://127.0.0.1:3000/, or localhost:3000. You can navigate there and see that not much is rendered right now.

Up next

Our app is ready to go! Let's dive into the basics of GraphQL.