Build a Job Board with VueJS and GraphQL

The test on the Webiny API Playground was successfull so now we can write our mutation in our Vue.js app. In the script section of the App.vue file enter the code below:

import { useQuery, useMutation } from "@urql/vue"; //

/** DELETING A JOB * */
const deleteJobResult = useMutation(`
  mutation($ID: ID!){
    deleteJob(revision:$ID)
      {
        data
      }
  }
`);

/* Function we will call from the span onclick event */
/* Has a parameter of ID to get the relevant job in the backend */
const removeJob = (id) => {  
  const variables = {
    ID: id,
  };
  deleteJobResult.executeMutation(variables).then((result) => {
    if (result.error) {
      console.error("There has been an error:", result.error);
    } else {
      location.reload(); // refresh the page
    }
  });
};

Congratulations! We have successfully removed a job, using it’s id, from Webiny CMS using GraphQL mutation.

Adding New Jobs

We have seen how we are able to view all the content on the backend and even manage a specific element in our CMS. However, it would be nice not to have to always create our data on the backend but instead create a form that allows us to push data into our CMS from our Vue application.

Let’s do this by making a new component called Create.vue in the components folder. In that file, enter the code below:

 <script setup>
import { reactive } from "@vue/reactivity";

const newJob = reactive({
  title: "",
  desc: "",
  jobUrl: "",
  location: "",
  contact: "",
  expires: ""
})

/* Reset all the dynamic fields after submitting the form */

function resetFields(newJob) {
  newJob.title = "";
  newJob.jobUrl = "";
  newJob.desc = "";
  newJob.location = "";
  newJob.contact = "";
  newJob.expires = "";
}

</script>
<template>
  <div>
    <h1>CREATE JOB</h1>
    { /* Form for creating a job. This will push entered values into the CMS /* }
    <form class="jobForm" @submit.prevent="checkFields(newJob)">
      <label for="title">Title</label>
      <input type="text" name="title" v-model="newJob.title" />
      <label for="desc">Job Description</label>
      <textarea name="desc" class="jobDesc" rows="5" v-model="newJob.desc"> </textarea>
      <label for="URL">Job Reference URL</label>
      <input type="url" name="URL" placeholder="https://" pattern="https://.*" v-model="newJob.jobUrl" />
      <label for="contact">Job Contact Email</label>
      <input type="email" name="contact" v-model="newJob.contact" />
      <label for="location">Job Location</label>
      <input type="text" name="location" v-model="newJob.location" />
      <label for="expiry">Job Start Date</label>
      <input type="date" v-model="newJob.expires" name="expiry" />
      <button type="submit" value="Submit">ADD JOB</button>
    </form>
  </div>
</template>

NOTE: If you examine the HTML in the template section you will notice that the EMAIL and URL inputs have patterns attached to them which corresponds to the validator fields on the Webiny CMS.

Adding Jobs to Webiny CMS

Before we create the mutation we need to add a new job we will once again do a test on Webiny CMS.

Let’s test the backend by inserting some dummy data and seeing what is returned. Open API Playground on your Webiny CMS and under the Manage API enter some data similar to the one below:

mutation {
  createJob(
    data: {
      jobRole:"Web Developer"
      jobContact:"joe@joebloggs.com"
      jobDescription:"Develop websites with Webiny CMS"
      jobLocation:"Remote"
      jobUrl:"http://www.google.com"
      startDate:"2022-09-01"
    }
  )
  {
    data {
      jobRole
      jobDescription
      jobContact
      jobLocation
      jobUrl
      startDate
      createdOn
    }
  }
}

Once you enter that code in the API Playground, you should see the result as below:

Now that we have successfully created a new entry on our CMS we will use this code to create our GraphQL mutation.

Let’s convert this using the useMutation function from URQL in our Vue.js application. We can add the code below to the <script> section of our Create.vue file.

import { reactive} from "@vue/reactivity"; // import ref  from vue
import { useMutation } from "@urql/vue";
/*  Create field for job form  - corresponds to the fields we have in our Webiny CMS */
const newJob = reactive({
  title: "",
  desc: "",
  jobUrl: "",
  location: "",
  contact: "",
  expires: ""
})

/**We will use variables to collect from the form fields*/
const createJobResult = useMutation(`
mutation(
  $title:String!,
  $contact:String!,
  $desc:String!,
  $location:String!,
  $url:String!,$expiry:Date!) {

  createJob(
    data:{
      jobRole:$title
      jobContact:$contact
      jobDescription:$desc
      jobLocation:$location
      jobUrl:$url
      startDate:$expiry
    })
    {
      data {
        jobRole
        jobDescription
        jobContact
        jobLocation
        jobUrl
        startDate
      }
    }
  }
`);

/* This function will take all the input from the form and push it into an object.
/* Then it will push the object to the jobs array and reset all the input fields.

const addJob = () => {
	  const variables = {
      title: newJob.title,
      contact: newJob.contact,
      desc: newJob.desc,
      location: newJob.location,
      url: newJob.jobUrl,
      expiry: new Date(newJob.expires).toISOString().split("T")[0], // WEBINY CMS accepts a particular format for sending Dates
    }
  };
  createJobResult.executeMutation(variables).then((result) => {
    if (result.error) {
      alert(result.error.name);
    } else {
      window.location.reload();
    }
  });
};

Now that we have setup our Create.vue let’s import it into App.vue and add it to the sidebar in the template section.

import Create from "./components/Create.vue";

{ /*} a div to layout our form sidebar /* }
<div class="side">
  <Create></Create>
</div>

This should result in the form being rendered in the sidebar like so:

You should now see the component on the side of the screen when your run the following command in the terminal:

npm run dev

Fill out all the fields to verify that we have connected the application successfully. The page will reload and the new entry will appear on the left with all the information you entered.

Conclusion

In this article we have learnt how to use the Webiny Headless CMS, how to set up up Content Models, how to create Tokens, Manage Permissions and how to test GraphQL query and mutations using the API Playground.

We have also learnt how to use GraphQL with URQL along with Vue.js to connect our Webiny CMS to our working Job Board application.

Thank you for reading!

Full source code: https://github.com/webiny/write-with-webiny/tree/main/tutorials/job-board-vue-graphql

---

This article was written by a contributor to the Write with Webiny program. Would you like to write a technical article like this and get paid to do so? Check out the Write with Webiny GitHub repo.