Introduction to the Course

Intended audience

This set of practices is for developers who are familiar with React and want to integrate their React applications with a GraphQL server.

This is not an exhaustive guide to Apollo. Instead, this handbook contains simple instructions for getting started with Apollo Client within a React application.

Developers looking for instructions on using React, TypeScript, and Apollo together have come to the right place.

What is this course about?

In this course, we will learn to build a front-end application using a combination of React, Next.js, TypeScript, GraphQL, Apollo, and GraphQL Code Generator. These tools are a winning combination for a front-end stack.

The tools used

React

React lets us build the interfaces that our users see. It allows us to structure our application into small composable components and manages the state of these components. We pass data to these components, which then determine how to output content that matches the criteria we set. In the application we are building, the components will output data in HTML format.

Next.JS

Next.JS gives us an excellent foundation for building applications through its create-next-app command-line tool. This application comes with a built-in router, local development environment, and a configuration that makes deploying this front-end application a breeze.

TypeScript

We use TypeScript to type check our code at compile-time to ensure it's correct. This prevents easy mistakes that could happen with Vanilla JavaScript.

Using React and TypeScript together makes our React components easier to change. If the type check considers our code valid, it will probably work the way we want it to.

GraphQL

To fully use React, we must have data for these components to display, and that data must come from somewhere. That somewhere is a GraphQL backend. GraphQL allows servers to specify an API so that can be transferred to our frontend in a structured format.

Apollo

Then, we use Apollo, a JavaScript library, to talk to this API. We can use Apollo to query data from this GraphQL API. This is done by using a GraphQL concept called queries. We can also change that data by using another concept called mutations. We'll discuss queries and mutations in more detail later.

GraphQL Code Generator

GraphQL Code Generator reads from our GraphQL server’s schema and operations on the client-side, and then builds TypeScript types and functions that we can use in our front-end application. The return types for these functions then ensure that the data we use in the frontend exactly matches the shape of the data we queried from the GraphQL server.

Chapter overview

Over the next several chapters, we'll see how all these pieces of tech work together.

• Chapter 2—Introducing Apollo Client: We'll look at how we can add Apollo Client to an existing Next.js application. We'll connect this application to an existing GraphQL server and retrieve information about books by using GraphQL queries.

• Chapter 3—Automatically Generated Types: We'll use GraphQL Code Generator to automatically generate TypeScript types and functions for our application. We'll then use these to write code that has the correct types and matches our GraphQL queries.

• Chapter 4—Lazy Queries: We'll look at using lazy queries to implement a search feature into our application.

• Chapter 5—Union Types: We'll investigate union types, a feature of GraphQL that allows particular GraphQL fields to return data represented by one of a particular set of types. We'll display different components within our application depending on the type of data returned.

• Chapter 6—Mutations: We'll work with mutations to submit data to a GraphQL Server. We’ll also be using another React library called React Final Form to build up a user input form, complete with client-side validations, that will ensure the data we’re sending back to the GraphQL server is in the right shape.