We’re overhauling Dgraph’s docs to make them clearer and more approachable. If
you notice any issues during this transition or have suggestions, please
let us know.
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: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. Editindex.tsx
to
add a function to create the Apollo client, as follows:
<<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 theApolloProvider
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.