Using Apollo Client in React
Apollo Client gives us everything that we need to send requests from our React components. We have already tested that the client works. Before moving on, we should clean up our file structure, to make it easier for us later in the development process. Our frontend is still displaying posts that come from static demo data. The first step is to move over to Apollo Client and fetch the data from our GraphQL API.
Follow these instructions to connect your first React component with Apollo Client:
- Clone the
App.js
file to another file, calledFeed.js
. - Remove all parts where React
Helmet
is used, remove the Cascading Style Sheets (CSS) import, and rename the functionFeed
instead ofApp
. - From the
App.js
file, remove all of the parts that we have left in theFeed
component. - Furthermore, we must render the
Feed
component inside of theApp
component. It should look like this:import React from 'react'; import { Helmet } from &apos...