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

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

Open
@Clex1o1

Description

@Clex1o1

πŸ› 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 ?

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions