-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useAsyncData in middleware gives warning to use $fetch when changing route to the same pageComponent #25661
Comments
|
Is there a reason you don't want to use |
we are using @nuxtjs/strapi to fetch the data from strapi, and according to their specifications we should use useAsyncData to enable SSR. We suppose we cannot use $fetch in combination with @nuxtjs/strapi See this documentation: https://strapi.nuxtjs.org/advanced#async-data |
Just use findOne without useAsyncData in the middleware |
does that work with SSR and payload extraction? |
And the new shared async data cannot be used this way: https://nuxt.com/blog/v3-10?ref=dailydev |
I have the same issue with middleware in lucia-auth (https://github.com/lucia-auth/examples/blob/main/nuxt/username-and-password/middleware/auth.global.ts) |
Confirming that I have the same issue with lucia-auth middleware. |
@danielroe Also, the warning states, that the component would be already mounted - while the middleware should be independant of components? Is that just a confusing warning message then? |
@BBoehm It really depends. But yes, every time you call |
To prevent repeated requests, you can use nuxt.payload or useState. In my case, I use pinia, which stores the data. To prevent a repeat request, I check if my storage is full and if the ID matches. If the storage is empty, then I make a request, if the id does not match, then I make a request (if it matches, then there will be no request). The same can be done using user State. I created a discussion about this import type { StateTree } from "pinia";
export default defineNuxtRouteMiddleware(async (to, from) => {
const {payload}=useNuxtApp()
const { Conversation } = storeToRefs(useChat());
const { getDialog } = useChat();
let state = payload.pinia as Record<string, StateTree>;
// inital load, check object or check id
if (
Object.keys(state.chat.Conversation).length < 1 ||
to.params.id !== state.chat.Conversation.id.toString()
) {
await getDialog(<string>to.params.slug, <string>to.params.id);
}
//404
if (Object.keys(Conversation.value).length < 1) {
return abortNavigation();
}
}); |
I managed to fix it using |
We are experiencing the same warning: I couldn't find any reason reading through this issue why |
To me, the warning in Since the |
Environment
Reproduction
https://stackblitz.com/edit/nuxt-starter-haznex?file=middleware/single.ts
Describe the bug
Not sure if this is a bug or something i use incorrectly.
we use a middleware to fetch data based on a dynamic route (slug)
this gives a warning to use $fetch, because the component is already mounted:
[nuxt] [useAsyncData] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching
Additional context
We use a middleware so we have access to the page data before entering the page.
This way we can get the localized slugs in the middleware and set them on the $i18n module like so:
to.meta.nuxtI18n = localizedSlugs;
Logs
No response
The text was updated successfully, but these errors were encountered: