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:
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
Then, let’s define our mutation inside
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
Finally, let’s spread the resolver properties inside the main resolvers file
Finally, If we go to the playground and run the mutation, a new person should be added:
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
Then, Let’s implement the resolver:
And the API findAll method:
And let’s test it:
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
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:
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
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
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:
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!
I write code to solve real-world problems and build business applications as a Full-Stack developer. I enjoy being challenged and develop projects that require me to work outside my comfort and knowledge set. I’m interested in engineering, design, entrepreneurship, and startups. When driven by passion, making stuff is just fun.