content: The fetch() hook is no longer called on the client-side in production/universal mode

Hey!

First of all thanks for the nice work 😃

I encountered something really strange and I’m not too sure about it but it looks like that the new fetch() hook of nuxt is not called on the client-side when in production mode:

Version

@nuxt/content: ^1.6.0 nuxt: 2.14.0

Steps to reproduce

Create a dynamic page component with a fetch() hook (example: pages/projects/_slug.vue).

export default {
  fetch() {
    console.log('fetch');
  }
}

What is Expected?

Fetch to be called when navigation occurs and a project is shown on the client side.

What is actually happening?

Fetch is only called on the client side when in development mode. In production mode, it is never called (only on the server).

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 4
Comments: 16 (5 by maintainers)

Most upvoted comments

After stepping through production code, I found the issue (for me at least) is not that fetch isn’t called. It’s that the component’s fetchKey is misaligned with the cached fetch data ($nuxt._pagePayload.fetch). After setting a custom fetchKey (thanks to #8466), the issue went away.

If this is indeed the correct solution, the documentation should give some guidance on when to use the new fetchKey option ~~when using Nuxt Content~~.

gsjen on Feb 23, 2021

In full static mode, fetch is mocked by the generated data, why do you need it to be called?

If the content would show up on client-side navigation, I would agree with you. Since it doesn’t we have to call $fetch() by hand again.

We use a component in pages/index.vue that fetches stories written in *.md-files with Nuxt-content (<slug>-<locale>.md). Each md-file has yaml vars up top for title, description etc. and locale.

$ npm run generate and $ npm run start shows the stories on initial load, which makes sense, because the stories are hardcoded into dist/index.html.
When you now navigate to another site, then back without refreshing, the stories are still there.
When you now navigate to another site, then refresh, then click on the logo to go to / again, the stories are not there.

That must mean fetch()-hook is not called or the “caching” that Nuxt uses under the hood doesn’t really work with Nuxt-Content.

Here is our component:

export default {
  name: 'StoriesAboutTonaly',

  data() {
    return {
      stories: null,
      maxStories: 10,
    };
  },

  async fetch() {
    const locale = this.$i18n.locale;
    const limit = this.maxStories;
    this.stories = await this.$content('stories')
      .limit(limit)
      .only([
        'slug',
        'path',
        'mainHeadline',
        'subHeadline',
      ])
      .where({
        locale, // object-shorthand syntax
      })
      .sortBy('priority', 'desc')
      .fetch()
      .then((res) => {
        return res;
      });
  },
  mounted() {
    // need to fetch stories again on client side
    // this.fetchStories(); // disabled to showcase the issue
  },
  methods: {
    fetchStories() {
      this.$fetch();
    },
  },

Maybe I’ll find time to recreate the issue in a sandbox, but for now I hope this information helps getting to the bottom of this.

katerlouis on Feb 18, 2021

Would you mind opening a PR to the nuxtjs.org repo? This would be really kind ☺️

Atinux on Feb 24, 2021

I think under the Data Fetching topic in Nuxt’s docs, there should be a warning that if the fetch hook is used in a component in a layout, a custom fetchKey (or a component name) should be specified.

gsjen on Feb 23, 2021

Actually reopening the issue!

I managed to recreate it:

It appears that calling again fetch() in another component will override the fetch() in my first component.

Is @nuxt/content overriding the nuxt fetch hook?

jackismissing on Aug 10, 2020