Vue, GraphQL, and MongoDB Boilerplate Step by Step: Example App

By Amenallah Hsoumi - Created on March 11, 2019

This is part three of creating a Vue, GraphQL, and MongoDB boilerplate. In the previous part, we have built the backend structure, in this one, we will be creating a small example app to showcase the usage of the boilerplate.

The series so far:

  1. Frontend set up
  2. Backend set up
  3. Building an example app

And the code for this tutorial is available in Github.

Building an Example App

We will now use the current boilerplate we’ve created to make a small example, and see how things connect together. We will create an app for storing people names, very simple!

Creating a person

We will start by implementing a createPerson mutation that will accept only a name it into our database, First of all, let’s create a Mongoose model inside the server/models/Person.js folder:

Then, let’s define our mutation inside server/schema/mutations.graphql:

There are two things left, implementing a resolver for this mutation, and implementing the create method inside an API file that we will have to create.

First, let’s start with the resolvers, inside the resolvers folder let’s create a file called person.resolvers.js where we will export a queries object, mutations object, and subscriptions object:

We have used a person api object, the API will be responsible for the business logic. Let’s go ahead and create it inside server/api/person.api.js:

Finally, let’s spread the resolver properties inside the main resolvers file resolvers/index.js:

Finally, If we go to the playground and run the mutation, a new person should be added:

vue graphql mongodb

Querying for people

Since we have a list of people in the database, we should be able to query them. First, let’s create the query inside server/schema/query.graphql:

Then, Let’s implement the resolver:

And the API findAll method:

And let’s test it:

vue graphql mongodb

Displaying people

To display people, we will have to use the query we made in the playground inside our vue app. We will use vue-apollo to achieve that. We can attach an apollo attribute to our component options object, where we can specify queries and subscriptions. First of all, let’s create person.queries.js inside src/gql/queries:

Then, let’s use this query inside a component we will call People.vue that we have to create inside the views folder:

We are looping over the result of the query, which is an array of people names and then displaying them. If the array is empty we will display an info message.

Finally, let’s set up the routing configuration to link this component with the root URL of our website:

And if we run our web app using:

> yarn web:dev

We should see our people names:

vue graphql mongodb

Subscribing to more people

Let’s create a subscription, that will be published when a new person is created. First, on the server side, let’s create a file called subscriptions.graphql inside server/schema:

Then, in the resolver person.resolvers.js we create the subscription resolver and publish it after we create a new person:

Now in the frontend part, let’s create a file called person.subscriptions.js inside src/gql/subscriptions, and export a subscription:

Finally, inside People.vue we will add a property to our Apollo query called subscribeToMore where we provide a callback that updates our cached data:

The updateQuery method accepts the previous data which is stored in the cache, and the new data coming through the subscription. We merge both, thus we will have up-to-date data in the cache.


Nice! I guess you’ve made it through till the end. I will be using this boilerplate in upcoming tutorials where I will be building a complete app, so stay tuned!

Share via
Copy link
Powered by Social Snap