Building a frontend login system with Apollo Client

In the previous section, we learned how to build the backend for a login system using Apollo Server to create our GraphQL queries and mutations. You are probably thinking, Great, I have the backend working, but how can I use this on the frontend? And you’re right: I always like to explain things with full examples and not just show basic things, even if this will take longer to do. So let’s get started!

You can find the code for the example in this section at https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/tree/main/Chapter13/graphql/frontend.

Configuring Webpack 5

Instead of using a vite project, we will configure a React project from scratch using Webpack 5 and Node.js.

The first thing we need to do is create the frontend directory and install all the packages inside. To do this, we will execute the following commands:

npm init --yes
npm install @apollo...