Nuxt.js - The best place for API calls

Question

I'm new to Vue.js Nuxt and all front-end stuff.

I have a question about API calls. I'm not sure what is the right way, the best practice here.

I have a store. In that store, I have actions that are calling my API and sets state eg.

async fetchArticle({ state, commit }, uuid) {
    const response = await this.$axios.get(`articles/${uuid}/`)
    commit('SET_ARTICLE', response.data)
},

And that is fine it is working for one component.

But what if I want to just fetch the article and not changing the state.

To be DRY first thing that comes to my mind is to create the service layer that is fetching the data and is used where it is needed.

Is it the right approach? Where can I find some real-world examples that I can take inspiration from?

Answer 1

I will an example of a service layer implementation for my portfolio to create my dashboard that shows some statics about my github and stackoverflow profiles, to do this i created a folder called services inside the project root :

pages
services
  |_AxiosConfig.js
  |_GitHubService.js
  |_StackoverflowService.js
   ...

in the AxiosConfig.js file i put i created an axios instance with its configuration :

import axios from 'axios';

const clientAPI = url =>
  axios.create({
    baseURL: url,
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
   
  });

export default clientAPI;

then in my GitHubService.js i imported that axios instance called clientAPI which i used to my requests :

import clientAPI from './AxiosConfig';

const baseURL = 'https://api.github.com';
export default {
  getUser(name) {
    return clientAPI(baseURL).get('/users/' + name);
  },
  getRepos(name){
    return clientAPI(baseURL).get('/users/' + name+'/repos');

  },
  getEvents(name,page){

    return clientAPI(baseURL).get('/users/' + name+'/events?per_page=100&page='+page);

  },
  getLastYearCommits(name,repo){

    return clientAPI(baseURL).get('/repos/' + name+'/'+repo+'/stats/commit_activity');

  }

};

then in my page i used asyncData hook to fetch my data :

import GitHubService from '../../services/GitHubService'

export default {
 ...
  async asyncData({ error }) {
    try {
      const { data } = await GitHubService.getUser("boussadjra");
      const resRepos = await GitHubService.getRepos("boussadjra");
      return {
        user: data,
        repos: resRepos.data
      };
    } catch (e) {
      error({
        statusCode: 503,
        message: "We cannot find the user"
      });
    }
  }

Answer 2

Using the repository pattern to abstract your API is definitely a good idea! Whether you use the @nuxtjs/axios module or the @nuxt/http module, you can pass either instance to your repository class/function. Below a real world example of an abstracted "repository.js" file.

export default $axios => resource => ({
  index() {
    return $axios.$get(`/${resource}`)
  },

  create(payload) {
    return $axios.$post(`/${resource}`, payload)
  },

  show(id) {
    return $axios.$get(`/${resource}/${id}`)
  },


  update(payload, id) {
    return $axios.$put(`/${resource}/${id}`, payload)
  },

  delete(id) {
    return $axios.$delete(`/${resource}/${id}`)
  }

})

You can then create a plugin to initialize all different kinds of repositories for your endpoints:

import createRepository from '~/path/to/repository.js'

export default (ctx, inject) => {
  const repositoryWithAxios = createRepository(ctx.$axios)

  const repositories = {
    posts: repositoryWithAxios('posts'),
    users: repositoryWithAxios('users')
    //...
  }

  inject('repositories', repositories)
}

Further read: Organize and decouple your API calls in Nuxt.js

Answer 3

I wanted to use axios in my service/service.js file, so instead of passing axios, I accessed it directly like this:

export default {
  async fetchArticle() {
    let response = await $nuxt.$axios.$get('/api-url')
    return response
  },
}