Nuxt.js: Fetch and AsyncData not working on reloading page.

[kardeepak]

Error: Request failed with status code 404
    at createError (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/core/createError.js:16:15)
    at settle (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/core/settle.js:18:12)
    at IncomingMessage.handleStreamEnd (/home/deepak/Linux/NodeJS/FullStack/Notes/WebApp/node_modules/axios/lib/adapters/http.js:191:11)
    at emitNone (events.js:91:20)
    at IncomingMessage.emit (events.js:188:7)
    at endReadableNT (_stream_readable.js:975:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

I am fetching data via ajax using axios. When I navigate to the page using a router link, it loads the data but if I reload the page then data disappears and the above error shows up on the backend.
It is same for both methods 'fetch' & 'asyncData'.

_{This question is available on Nuxt.js community (#c998)}

[hilkbahar]

fetch and AsyncData only work on vue in pages directory

[kardeepak]

I am using then in the pages directory only.

[sudhir600]

is there any way to handle fetch(by any means) on page refresh?

[lanbau]

i'm facing this issue too. I need to have the latest products from my API on page refresh.

[SuYuWei]

same problem

[tolyanor]

Same problem. I described it here

[mstrlaw]

Not sure if this is what is wanted by people in this thread, but this approach works for me using nuxt-links, direct link access, manual refresh or hot-code reload.
It either runs on server or client depending if you navigate or access/reload manually. If you leave both _fetch_ and _async_ your request will run twice, ofc.

Use setters in fetch/async to set the Store value and let the _computed_ handle passing it back to your template.

If you test it here below, you'll see _bar_ shows up in the HTML.

<!-- testpage.vue -->

<template>
  <div>
    <h1>Res: {{ barfoo }}</h1>
  </div>
</template>

<script>
  let endpoint = 'https://api.myjson.com/bins/fx1e3'

  export default {
    computed:{
      'barfoo': function(){
        return this.$store.getters.getBarfoo
      },
    },
    fetch: function({ app, store }){

      return app.$axios.$get(endpoint)
      .then((res) => {

        store.commit('setBarfoo', res.foo)

      })
      .catch((error) => {
        error({ statusCode: 404, message: 'Not found' })
      })

    },
    asyncData({ app, store }){

      return app.$axios.$get(endpoint)
      .then((res) => {

        store.commit('setBarfoo', res.foo)

        // Or you could also set data by returning here normally

      })
      .catch((error) => {
        error({ statusCode: 404, message: 'Not found' })
      })

    }
  }
</script>

[510846]

any solution now?

[remipou]

similar issue here

[hilkbahar]

Hi guys, so its solution;

watchQuery property on vue component

You should search ‘watchQuery vuejs’ on google.

[510846]

i found the root of the problem.

i use the @nuxt/axios, and set the baseURL = '/api',
when i remove above setting, add '/api' to url prefix direct, the problem will disappear ~

is the axios bug? i'm not sure ~

[seymoe]

so I still do not know how to solve this problem..

[drewjbartlett]

Running into this issue as well.

[prochorz]

Its my solution
add like plugin. Don remember set variable like false in data()

import Vue from 'vue'
Vue.mixin({
    async beforeMount() {
        if( this.$root.$options.context.isStatic
            && typeof this.$root.$options.context.from == 'undefined'
            && this.$router.history.current.path != '/'
            && typeof this.$options.asyncData == "function") {

            const data = await this.$options.asyncData(this.$root.$options.context);

            for(let k in data) {
                this[k] = data[k];
            }
        }
    }
});

this mixin call asyncDate

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.