Setting up Apollo Client and making our first query

Before we can get started making GraphQL queries on the frontend, we first need to set up Apollo Client. Apollo Client is the frontend counterpart to Apollo Server, which we have already been using on the backend. While it is not required to use Apollo Client (we could also simply make a POST request to the /graphql endpoint), Apollo Client makes interacting with GraphQL much easier and more convenient. It also includes additional features, such as caching, out of the box.

Follow these steps to set up Apollo Client:

1. Copy the existing ch11 folder to a new ch12 folder, as follows:

   $ cp -R ch11 ch12

2. Open the ch12 folder in VS Code.
3. Install the @apollo/client and graphql dependencies:

   $ npm install @apollo/[email protected] [email protected]

4. Edit .env and add a new environment variable, pointing to the endpoint for our GraphQL server:

   VITE_GRAPHQL_URL="http://localhost:3001/graphql"

5. Edit src/App.jsx and import ApolloClient...