$http in asyncData causes page to not be generated

[pat-lego]

Versions

"nuxt": "^2.14.9" "@nuxt/http": "^0.6.1", node: v12.16.3

Reproduction

https://github.com/pat-lego/io.github.vm.patlego.website/tree/feature/http The generation of /profile/blogs fails since it cannot find $http within the asyncData function. The site is full static

Steps to reproduce

Run cd io.github.vm.patlego.website/website/website.ui/src/main/resources/website.ui npm install npm run generate

What is Expected?

The /profile/blogs page has not been generated due to an issue with the asyncData function not being able to find some parameters in $http.

The profile/blogs page should of been generated.

What is actually happening? The page should be built but the page is skipped due to the following error:

Entrypoint app = server.js server.js.map
ℹ Merging Tailwind config from ~/tailwind.config.js                                                                                                                              nuxt:tailwindcss 10:36:59
ℹ Full static generation activated                                                                                                                                                                10:36:59
ℹ Generating output directory: dist/                                                                                                                                                              10:36:59
ℹ Generating pages with full static mode                                                                                                                                                          10:36:59

 ERROR   /profile/blogs                                                                                                                                                                           10:36:59

HTTPError: Not Found
    at fn (node_modules/ky/umd.js:323:0)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Ky._retry (node_modules/ky/umd.js:418:0)
    at async http_HTTP.module.exports.http_HTTP.<computed> [as get] (node_modules/.cache/nuxt/http.js:92:0)
    at async asyncData (pages/profile/blogs.vue:86:0)

 ERROR  Not Found                                                                                                                                                                                 10:36:59

  at fn (node_modules/ky/umd.js:323:0)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:97:5)
  at async Ky._retry (node_modules/ky/umd.js:418:0)
  at async http_HTTP.module.exports.http_HTTP.<computed> [as get] (node_modules/.cache/nuxt/http.js:92:0)
  at async asyncData (pages/profile/blogs.vue:86:0)

✔ Generated route "/profile"                                                                                                                                                                      10:37:00
✔ Generated route "/profile/blog"                                                                                                                                                                 10:37:00
✔ Client-side fallback created: 200.html    

The issue is this function in the blogs.vue page

 async asyncData ({$http}) {
    if (process.env.NODE_ENV === 'development') {
      const blogs = await $http.get('http://localhost:8181/cxf/patlegovm/1.0/site/blogs')
      return { blogs }
    } else {
      const blogs = await $http.get('/cxf/patlegovm/1.0/site/blogs')
      return { blogs }
    }
  }

I was only able to get data by using fetch() on client.

[atinux]

@pat-lego you need to give the full URL otherwise it cannot guess it during SSR: website.ui/pages/profile/blogs.vue#L86

You can learn more about the options on https://http.nuxtjs.org/options

[pat-lego]

@Atinux I added the following property baseUrl in the nuxt.config.js file and $http.$get was able to retrieve the data correctly.

What I noticed though was the following, I am currently running my site as a full static distribution and it seems that the asyncData request is being made on page build. Thus if I add data to the database table that the asyncData function is referring too (via REST invocation) I will not see this on my site until the next build. Is this correct?

I am assuming this is not the case when running a node server as the asyncData request will be invoked on the node server.

[atinux]

Thus if I add data to the database table that the asyncData function is referring too (via REST invocation) I will not see this on my site until the next build. Is this correct?

On full static, it is expected behaviour since asyncData is mocked on client-side.

[pat-lego]

Okay for now the solution is to use fetch with the following parameter in the script fetchOnServer: false