Open jackismissing opened 4 years ago
Edit: it looks like an error on my side, closing the issue.
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?
Hi, it's not a bug 🙂 Fetch running on client and server side. When you first opening page(or reloading) fetch() running on server side. When you clicking on nuxt-link you doing client transition and fetch() running on client side. I think it's normal behawior.
Hey,
Yes what you describe is the expected behaviour, but in reality it doesn't happen and calling fetch()
inside one component will override a fetch()
in another component
Same here. Several routes are using fetch(). It works when browsing from root. But when reloading a certain route, content is not showing up.
I have the same issue, fetch
is not being called for me in production.
I have a child component on a page with the fetch
hook.
When I run nuxt generate
the fetch
hook is being called, but when I navigate to the page in production fetch
is not called.
Update:
Hmm, for me, it appears to be that fetch
isn't called for components in markdown. If I put the component on a page it works as expected.
Yes what you describe is the expected behaviour, but in reality it doesn't happen and calling
fetch()
inside one component will override afetch()
in another component
I have the same issue. I was using fetch
in layout and then inside a component. Component's fetch was called on client side. I had to move the layout fetch to vuex.
Hi :)
Do you mind creating a reproduction with CodeSandBox so we can look at it?
You can fork this template: https://codesandbox.io/s/nuxt-content-playground-l164h?from-embed
In full static mode, fetch is mocked by the generated data, why do you need it to be called?
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
. /
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.
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.
Where would you see an improvement in the documentation?
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.
Would you mind opening a PR to the nuxtjs.org repo? This would be really kind ☺️
Same here. Several routes are using fetch(). It works when browsing from root. But when reloading a certain route, content is not showing up.
how do I fix this? what's the workaround?
Same here. Several routes are using fetch(). It works when browsing from root. But when reloading a certain route, content is not showing up.
how do I fix this? what's the workaround? Could this be the reason?
<Nuxt keep-alive />
in default layout
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).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).