DEV Community: Hélio Marcondes

API mocking with Mock Service Worker + Vue.js

Hélio Marcondes — Mon, 06 May 2024 14:42:50 +0000

Hi everyone.

Last week I was working on a new project from scratch and encountered a common problem.

I built a big part of the frontend and my backend teammates haven't finished their part. So, I was wondering how to improve my workflow defining some mock data on frontend.

To be honest the quickly way that I usually do is to create some data in JSON format and have methods to load it, and after the API be functional I just remove the mock data to call the API.

Something like this:

./mocks/groupData.ts



import type { GroupInterface } from '../interfaces/Group'

export function getGroupData(): { groups: GroupInterface[] } {
  const groups: GroupInterface[] = [
    {
      id: 1,
      group: 'Group 1',
    },
    {
      id: 2,
      group: 'Group 2',
    },
  ]

  return { groups }
}

./screens/Groups/Groups.vue



<script setup lang="ts">
import { getGroupData } from '../../mocks/groupData'

const { groups } = getGroupData()

But after a little research I found the Mock Service Worker it's a mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.

I tested on my project and it fit very well for my case, here are the steps that I used to configure the library on a Vue.js 3 project.

Step 1: Install the MSW library:



npm install msw@latest --save-dev

Step 2: Create handlers to handle the "API" requests, it will be the methods and the return of the API request:

./mocks/handlers.ts



import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/users", () => {
    return HttpResponse.json([
      {
        id: "c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d",
        firstName: "John",
        lastName: "Maverick",
      },
      {
        id: "c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3e",
        firstName: "Kar",
        lastName: "Marx",
      },
    ]);
  }),
];

Step 3: Integrate MSW into a browser environment (other integrations are also available):

./mocks/browser.ts



// src/mocks/browser.js
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

Step 4: Copy the worker script to your public folder, MSW library provides a command to do this:



npx msw init <PUBLIC_DIR>

On my example I use public as a "PUBLIC_DIR", after you execute the command it will generate a file named /mockServiceWorker.js inside the public directory

Step 5: Enable mocking by calling it in main Vue.js file:

main.ts



import { createApp } from "vue";
import App from "./App.vue";

import "./assets/main.css";

async function prepareApp() {
  const { worker } = await import("./mocks/browser");
  return worker.start();
}

const app = createApp(App);

prepareApp().then(() => {
  app.mount("#app");
});

After all this configuration you should be able to call the handler that you set before, like this:



<script setup lang="ts">
import { onMounted, ref } from 'vue';

const users = ref<[]>([])

async function loadUserFromMsw() {
  const res = await fetch('/users')
    .then(response => response.json())
    .then(json => {
      return json
    })
    .catch(err => console.log('Error', err));

  users.value = res
}

onMounted(async () => {
  await loadUserFromMsw()
})


</script>

<template>
  <main>
    <pre>
      {{ users }}
    </pre>
  </main>
</template>

And here is the final result:

My final thoughts are that I can mock various routes and methods using handlers of MSW easier than my usuall way to finish the frontend with mocking data.

If you have any suggestions, please let me know. Thank you so much for reading!

A simple explanation of Adapter Pattern with Vue.js

Hélio Marcondes — Fri, 26 Apr 2024 20:57:33 +0000

Hi there.

Today I will share how I understood the Adapter Pattern using Vue.js. In short, the Adapter Pattern in Vue.js is used to "adapt" the interface of a component, method, or service so that it can be used in a compatible way with other parts of the code that expect a different interface.

This pattern is useful for integrating third-party components, APIs, or libraries that are not directly compatible with your Vue.js application, allowing for smoother, more flexible integration.

Here is an example:

1- I have a Home.vue file that will do a request to a random API (restcountries):

<script setup lang="ts">
async function getCountry(name: string) {
  const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
  return response.data.value
}

let country: any = await getCountry('brasil')
</script>
<template>
  <div>
    <pre>
        {{ country }}
    </pre>
  </div>
</template>

Here is the return of the API request:

So, let's imagine that we only need three variables from this response, formatted in a specific way:

interface Country {
  countryName: string
  countryCapital: string
  countryPopulation: number
}

2- I will create another file named adapters.ts and define a function to transform the current format into the one expected by the Country interface:

interface Country {
  countryName: string
  countryCapital: string
  countryPopulation: number
}

// Function that receives the API response and adapts it to an array of Country objects
export function getCountryAdapter(apiResponse: any): Country[] {
  // Check if is an array
  if (!Array.isArray(apiResponse)) {
    throw new Error('The API response is not a Array of countries.')
  }

  // Maps each country in the response to the Country object format
  const countries: Country[] = apiResponse.map((country: any) => ({
    countryName: country.name.common,
    countryCapital: country.capital[0],
    countryPopulation: country.population,
  }))

  return countries
}

3- Now, let's call the adapter in the Home.vue file:

<script setup lang="ts">
import { getCountryAdapter } from '../services/adapters'

async function getCountry(name: string) {
  const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
  const country = getCountryAdapter(response.data.value)
  return country
}

let country: any = await getCountry('brasil')
</script>
<template>
  <div>
    <pre>
        {{ country }}
    </pre>
  </div>
</template>

4- The final result is the response adapted to the interface 😊:

If you have any suggestions, please let me know. Thank you so much for reading!

Global toast in Vue3

Hélio Marcondes — Thu, 18 Apr 2024 19:53:51 +0000

Hi there.

Today I will share the way I built a simple Toast component using Vue3 composables.

Recently, I had to create a project from scratch using Nuxt3 + TailwindCSS. In the middle of it, I needed a simple Toast component to handle some actions. So, after some research, I ended up with this component.

1- Creating the Toast component involves a bit of styling with TailwindCSS classes and custom CSS to control how the Toast appears.

Toast.vue

<script setup lang="ts">
defineProps({
    message: {
        required: false,
        type: String,
    },
    visibility: {
        required: true,
        type: Boolean,
    },
})
</script>

<template>
    <div v-if="visibility"
        class="toast z-50 fixed top-4 right-4 flex items-center gap-4 mb-4 text-gray-200 transition-all duration-[3000ms] w-80 overflow-hidden">
        <div class="p-3 w-full rounded-tl-none rounded-bl-none">
            <div class="flex items-center w-full">
                <div class="flex flex-col">
                    <div class="toast__title text-sm text-green-800">Success</div>
                    <div class="toast__text text-sm text-green-500">{{ message }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.toast {
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18);
    border-radius: 5px 0px 0px 5px;
    border-left: 7px solid #1fac66;
    width: 429px;
}
</style>

2- Creating the composable
I've created two functions to handle the logic of the Toast component: one to add the message inside the component and another to reset it. I'm also using the useState composable from Nuxt to keep the variables visibility and messages available.

useToast.ts

export function useToast() {
    let visibility = useState('visibility', () => false)
    let messages = useState<string[]>('messages', () => [])

    function resetMessages() {
        messages.value = []
    }

    function addMessage(message: string) {
        if (message) {
            messages.value.push(message)
            visibility.value = true
            setTimeout(() => {
                visibility.value = false
                resetMessages()
            }, 3000)
        }
    }

    return {
        messages,
        addMessage,
        visibility,
    }
}

3- In the root component of the project (app.vue in my case), I import the component and the composable to work together. In this example, there are some extras that I added for layout purposes:

app.vue

<script setup lang="ts">
const { messages, visibility } = useToast()
</script>
<template>
  <NuxtLayout>
    <NuxtPage></NuxtPage>
  </NuxtLayout>

  <TransitionGroup name="toast">
    <Toast v-for="(message, index) in messages" :key="index" :message="message" :index="index"
      :visibility="visibility" />
  </TransitionGroup>
</template>

<style>
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(-60px);
}

.toast-enter-to,
.toast-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}
</style>

4- To see it working, you can simply call it from any page or component that you need. Here are two examples:

To trigger the modal from a page, you can use the following code:

index.vue

<script setup lang="ts">
const { addMessage } = useToast()

function triggerModal() {
    addMessage('My Amazing modal from Index.vue')
}
</script>

<template>
    <div>
        <div>This is my <b>index.vue</b> page</div>
        <button @click="triggerModal()">Trigger Modal</button>
    </div>
</template>

To trigger the modal from a random component, you can use the following code:

myRandomComponent.vue

<script setup lang="ts">
const { addMessage } = useToast()

function triggerModal() {
    addMessage('My Amazing from component')
}
</script>
<template>
    <div>
        <div>My test component</div>
        <button @click="triggerModal()">Trigger Modal from my Component</button>
    </div>
</template>

If you have any suggestions, please let me know. Thank you so much for reading!