Learn TypeScript 3 by Building Web Applications

Creating, configuring, and using an Apollo GraphQL client

Now that we have defined our queries and that we have generated code for those using Apollo, we can start using them.

We will now create and use an Apollo Client with the help of Apollo-Boost. Apollo-Boost isn't strictly necessary, but it will heavily simplify our implementation.

We will use the Apollo Client within our Home component.

When the search function gets invoked by the Search component, we will use the Apollo Client to search for artists and songs. Also, when the user selects a song, we will use it again to retrieve its lyrics.

First of all, let's create our Apollo Client instance.

Let's get started:

1. Open the frontend/src/pages/home.tsx file.
2. Then, add the following declaration ...