Build a Message Board App in Vue

Connect to Dgraph Cloud

The GraphQL and Vue state management library you’ll be using in the app is Vue Apollo and Apollo Boost.

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:

vue add apollo

There are two ways to set our endpoint url. Either set the process.env.VUE_APP_GRAPHQL_HTTP environment variable, or change the default url in the new vue-apollo.js file. In this tutorial, we will create a .env.development file at the root of the project, with the following contents:

VUE_APP_GRAPHQL_HTTP = "MY_SLASH_ENDPOINT"

Now we’re ready to connecto to our Dgraph Cloud endpoint. There won’t be any visible changes from this step.