Nuxt reload api data fails

Question

Need some help in solving a reload problem. I fetch data via service:

import axios from 'axios'

const apiClient = axios.create({
 baseURL: 'www.domain/api/v1',
 headers: {
 Accept: 'application/json',
 'Content-Type': 'application/json'
 }
})

and

export default {
 getCompanies() {
return apiClient.get('/companies')
},

in store:

export const actions = {
 fetchCompanies({ commit }) {
 return CompanyService.getCompanies().then(response => {
  commit('SET_COMPANIES', response.data)
 })
},

in pages/companies:

async fetch({ store, error }) {
  try {
    await store.dispatch('company/fetchCompanies')
  } catch (e) {
    error({
      statusCode: 503,
      message: 'Unable to fetch Companies at this time'
    })
  }
},

works fine, but no data on page reload. Some help would be great.

Answer 1

If you are using it on a pagination component the reason it is not reloading is that fetch it will be called server-side once and in the client-side just when navigating to further routes.

The fetch method is not called on query string changes by default. If you want to change this behavior, for example when building a pagination component, you can setup parameters that should be listened to through the watchQuery property of your page component. Learn more on the API watchQuery page.

Looks Nuxt documentation: https://nuxtjs.org/api/pages-fetch/

You can use watchQuery to fix this. https://nuxtjs.org/api/pages-watchquery