Get up and running with Create React App, Apollo Client and Graphcool

In this short tutorial we will connect together create-react-app, react-apollo and popular GraphQL backend service Graphcool.

If you’d rather just get started, the code for this tutorial is available on GitHub. If you’ve rather listen and follow along, the video is below.

Create React App is a great way to get started building your React applications without the hassle to configure Babel, Webpack and a production build process.

To get started, make sure you have create-react-app installed globally. You can use npm to do this.

npm install -g create-react-app

Creating our project

Let’s get started by using the create-react-app library to build our application. Inside a new terminal window, pick a name for your new project. In this tutorial we’re using example-app.

create-react-app example-app

When this finishes, you’ll want to change directory to our new application. cd example-app will do just that 💥.

Installing our dependencies

In this tutorial we are going to use Apollo Client for our GraphQL implementation. Relay is also a great choice if you’ve heard of that.

Within /example-app you’ll want to install the react-apollo dependency.

yarn add react-apollo

Configuring our dependencies

Open src/index.js and import our dependencies.

import {
ApolloProvider,
ApolloClient,
createNetworkInterface
} from 'react-apollo'

⚠️ Make sure you’re importing these at the top of your file amongst your other imported modules. Create React App will shout at you if place them somewhere else.

Creating a network interface

Next we need to configure our networking interface for React & Apollo to talk.

const networkInterface = createNetworkInterface({
uri: process.env.REACT_APP_GRAPHQL_URI
})

In order to hook up a uri for Apollo Client, you’ll need a GraphQL endpoint. If you have a GraphQL backend already, use that, otherwise head to Graphcool and Sign Up.

Create a new project, give it any name for name and copy your Simple endpoint to the clipboard.

It’s recommended you store the uri inside an environment variable. Create a file called .env and set REACT_APP_GRAPHQL_URI to your copied Graphcool endpoint.

Creating our Apollo Client

Next we need to create an instance of ApolloClient to use within our ApolloProvider higher order component.

const client = new ApolloClient({
networkInterface,
dataIdFromObject: o => o.id,
connectToDevTools: process.env.NODE_ENV === 'development'
})

connectToDevTools is enabled in development using an ENV flag. You can find details on how to install Apollo Dev Tools on GitHub.

Connecting App to Apollo Client

We’ve now got everything setup to tell our App about Apollo. We do this by using the Higher Order Component ApolloProvider. This connects with Redux if you’re using that 🎉.

You’ll want to replace what’s inside inside ReactDOM.render().

ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
)

Starting the app!

That’s it! Create React App + Apollo Client are configured and ready to go.

Head over the terminal and type yarn start to start your application. In the next tutorial we will query Apollo Client for some data from GraphQL. 🤘

I’ve more tutorials and videos on YouTube. Subscribe? ❤️