Cesar
Repository pattern warning useFetch with Nuxt 3.10
Good morning,
In the latest version of Nuxt (3.10) warnings appeared when using useFetch outside of setup. This causes me problems because I have an architecture split via the pattern repository and there is no reason for this to give me warnings.
(PR #25071)
Here is an example of splitting that I have:
index.vue file:
try {
data.value = await Repository.taxModule.taxClass.getAll({
...defaultFetchTaxClassParams,
...options,
})
} catch(e:any) {
setRequestError(e)
}
This method calls a utility class acting as a pass-through
Method called:
static async getAll(
getTaxClassesOptions: API_taxClass_getTaxClassesOptions,
): Promise<ResultList<TaxClass>> {
return await BaseRepository.getAllFactory<TaxClass>({
apiUrl: TaxClass.getApiUrlPrefix(),
options: getTaxClassesOptions,
adapter: TaxClassApiAdapters.formatTaxClassesResponse,
})
}
And finally the getAllFactory method (calling my useApiFetch component)
static async getAllFactory<T>({
apiUrl,
options,
adapter,
}: {
apiUrl: string
options?: any
adapter: (data: any, options?: any) => ResultList<T>
}): Promise<ResultList<T>> {
const url = ApiQuery.buildQueryString(apiUrl, options)
let response: unknown
await useApiFetch(url)
.catch((error) => {
throw error
})
.then((res) => {
response = res
})
return adapter(response, options)
}
My useApiFetch is currently a composable allowing me to wrap the standard useFetch and add my token and other options
What should I change to keep this architecture while no longer having the warnings?
If I replace the useFetch in my composable with a $fetch, the SSR no longer happens at all..
Thanks in advance41 replies
ComponentIslands error after update 3.6.3
Hello,
I updated nuxt to 3.6.3 this morning and nothing works locally anymore
I got this error:
Uncaught SyntaxError: The requested module '/_nuxt/@id/virtual:nuxt:/Users/XXXX/Development/YYYY/.nuxt/nuxt.config.mjs' does not provide an export named 'componentIslands'
someone had the same problem?
2 replies
Multiple hydration warnings
I have a problem with hydration and I don't understand.
The problem is when i fetch data in SSR, I have this error in my console
Data loaded are binded in my component Button, or Pager ...
<GridListPager
:pagination="shippingDelaysPagination"
@change-page="(page) => fetchShippingDelays({ page })"
/>
shippingDelaysPagination it's a computed (from data fetch)
At the end of the script setup, i call my fetchData method: await fetchDatas() and they are well loaded in SSR
This is the error message:
Hydration node mismatch:
- Client vnode: Symbol(Fragment)
- Server rendered DOM: <!--]-->
6 replies
Global middleware infinite redirection
Hi,
I can't get my middleware to work to block access to pages if the user is not logged in.
I have an infinite loop that I can't explain.
This is my global middleware code:
import { useAuthStore } from "~/stores/auth"
export default defineNuxtRouteMiddleware(() => {
const authStore = useAuthStore()
if (!Object.keys({...authStore.user}).length) {
console.log('not authenticated')
return navigateTo('/login')
}
})
7 replies