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

Jamie Barton
May 30, 2017 · 3 min read

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

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

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

yarn add react-apollo

Configuring 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

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

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

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

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

Starting the app!

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? ❤️

Jamie Barton

Written by

Programmer Dad & Husband 🤘