First of all, you need to install a few dependencies:
- Go to the frontend folder.
- Execute this command: yarn add apollo apollo-client apollo-boost react-apollo graphql.
Here is why we need each of these:
- apollo: This package includes the Apollo CLI (among other things), which we will use to generate client-side code for GraphQL queries, based on the server-side GraphQL schema and validated against it. This process will ensure that our queries are valid (that is, match the server-side schema) and that we have type safety and auto-completion.
- apollo-client: This contains the base required to create an Apollo Client and interact with the backend server.
- apollo-boost: This contains utilities to start using Apollo easily (for example, the ApolloClient utility class that we'll use soon).
- react-apollo: This integrates Apollo with React and provides utility React components for GraphQL.
- graphql: This is the library that does the actual work (for example, parsing the GraphQL queries).
Here, we're using Apollo Boost only to quickly get started. As soon as you develop serious applications with Apollo, you'll rapidly feel the need to let go of apollo-boost and switch to the raw Apollo library. If you reach that conclusion at some point, then follow this guide: https://www.apollographql.com/docs/react/advanced/boost-migration.
Let's define some queries now!