Connect to Dgraph Cloud

The GraphQL and React state management library you’ll be using in the app is Apollo Client 3.x.

Apollo client

For the purpose of this app, Apollo client provides a connection to a GraphQL endpoint and a GraphQL cache that lets you manipulate the visual state of the app from the internal cache. This helps to keep various components of the UI that rely on the same data consistent.

Add Apollo client to the project with the following command:

yarn add graphql @apollo/client

Create an Apollo client

After Apollo client is added to the app’s dependencies, create an Apollo client instance that is connected to your Dgraph Cloud endpoint. Edit index.tsx to add a function to create the Apollo client, as follows:

const createApolloClient = () => {
  const httpLink = createHttpLink({
    uri: "<<Dgraph Cloud-GraphQL-URL>>",
  })

  return new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
  })
}

Make sure to replace <<Dgraph Cloud-GraphQL-URL>> with the URL of your Dgraph Cloud endpoint.

If you didn’t note the URL when you created the Dgraph Cloud backend, don’t worry, you can always access it from the Dgraph Cloud dashboard in the Overview tab.

Add Apollo client to the React component hierarchy

With an Apollo client created, you then need to pass that client into the React component hierarchy. Other components in the hierarchy can then use the Apollo client’s React hooks to make GraphQL queries and mutations.

Set up the component hierarchy with the ApolloProvider component as the root component. It takes a client argument, which is the remainder of the app. Change the root of the app in index.tsx to use the Apollo component as follows.

ReactDOM.render(
  <ApolloProvider client={createApolloClient()}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>,
  document.getElementById("root")
)

This step in GitHub

This step is also available in the tutorial GitHub repo with the connect-to-slash-graphql tag and is this code diff.

There won’t be any visible changes from this step.