In this example, we’ll see how to use the new useQuery hook available from the apollo react-hooks package to send GraphQL queries and receive response with fetched data from APIs.

We’ll also see how to test a React component that makes use of Apollo React hooks using MockedProvider available from @apollo/react-testing

The Apollo client provides two ways to send GraphQL queries:

• Using the query method,
• Using the useQuery React hook

The useQuery React hook allows you to pass a GraphQL query and will take care of fetching the data. automatically.

Please note that the useQuery hook is not a built-in React hook such as useState or useEffect hooks but a custom hook provided by the @apollo/react-hooks package

We assume that you already have a React application ready. Let’s also assume it’s called react-app.

Navigate inside the project’s folder and install the following libraries:

#react #graphql