Skip to content
This repository has been archived by the owner on Dec 5, 2024. It is now read-only.

fix: $fetchState in template leads to hydration error #535

Open
Clex1o1 opened this issue Aug 25, 2021 · 0 comments
Open

fix: $fetchState in template leads to hydration error #535

Clex1o1 opened this issue Aug 25, 2021 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@Clex1o1
Copy link

Clex1o1 commented Aug 25, 2021

πŸ› The bug
Using the useFetch method and add conditional template renderings depending on the $fetchState.pending or $fetchState.error leads to hydration errors.

πŸ› οΈ To reproduce
Steps to reproduce the behavior:
my codesandbox: https://codesandbox.io/s/elastic-ardinghelli-vi4vy?file=/pages/index.vue

Add conditional rending to template which uses useFetch:

<div v-if="$fetchState.pending || $fetchState.error">
      <div class="loading" v-if="$fetchState.pending">Loading...</div>
      <div class="error" v-if="$fetchState.error">
        Error: {{ $fetchState.error }}
      </div>
</div>

🌈 Expected behaviour
I'm using the option API fetch hook in my project: https://nuxtjs.org/docs/2.x/features/data-fetching#the-fetch-hook like this. Is there any difference using it with composition API ?

@Clex1o1 Clex1o1 added the bug Something isn't working label Aug 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants