$fetch without await
Hello all,
In the Nuxt documentation, $fetch always comes with await : https://nuxt.com/docs/api/utils/dollarfetch
It's important to note that my project is client-side only, SSR is off, I'm not using useAsync or useFetch
The problem with that is, if the call is slow, the page will load for a long time.
I'm trying to find the "best way" to start printing my page without breaking hydration.
I came up with that :
Setup :
const Users = ref(getUsers().then(x => Users.value = x))
Template :
<UsersList v-if="Users.then == null" :users="Users.users" />
Is there a cleaner to reach that goal ?
It does allow me to preload anything and have placeholders instead of having a big "loading bar" for the whole page, but it feels dirty ^^"
Good to know :
Behind the getUsers there is a basic API Call using $fetch and a Store using Pinia, so I feel I'm kind of "double referencing" at the same time if it makes any sense.... since Pinia will give me a ref() and I'm putting it in a ref()... that I need for the v-if to work properly ^^"
I know I could separate that have a ref() in a boolean that I change alongside a normal variable that will receive the store, but it felt like more variables with the same result.
Thanks ^^
8 Replies
You can easily use useFetch in this case (and should IMO)
But even with $fetch, you can adda pending state if users are not filled, then set the value of users and show a loading state in between
Thanks I'll have a look at both π
Little follow up question ^^
I then changed it to useFetch, and there is kind of typeGuard in TS that I don't really understand most likely from Pinia
this work perfectly... but not in TS I have this type error
probably have you have to provide a type for what
useFetch returns
useFetch<Users[]>() e.g.
+ and create a type for it
Ok thanks a lot, will have a look into that π