1. Feature overview and setup
3m

πŸ‘‹ Welcome to Client-side GraphQL with React and Apollo!

Here we begin our journey building a -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 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?

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.

It uses a , 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 are unified behind a layer, the 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 .

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/odyssey-client-side-graphql.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

Here's the file structure:

πŸ“¦ odyssey-client-side-graphql
┣ πŸ“‚ public
┣ πŸ“‚ src
┣ πŸ“„ index.html
┣ πŸ“„ package.json
┣ πŸ“„ README.md
┣ πŸ“„ tsconfig.json
┣ πŸ“„ vite.config.ts
β”— πŸ“„ README.md

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. Run the following command to install dependencies and start the app:

On MacOS/Linux
npm install && npm start
On Windows
npm install; npm start

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.

Task!

Up next

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

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.