Nuxt•2y ago

Why do I get an error on refresh with dynamic content?

Hi, I'm having a really big issue right now. When I refresh my page on localhost everything is working fine. But when I deploy my site to netlify my page gives the Error.vue page only on refresh. https://uebler.netlify.app/ -> if you go to fietsendragers in the menu. It all works. But if you refresh it triggers my Error.vue page. I don't have a single clue why .... Can someone spot my bug?

Homepagina - Uebler Benelux | Voor al uw fietsendragers

Uebler Benelux is de importeur van Uebler fietsendrager. Wij leveren fietsendragers voor autos, aanhangers, campers, caravans en bestelwagens.

68 Replies

ThijsOP•2y ago

I'm using Directus CMS

manniL•2y ago

@Thijs could you provide a stackblitz or codesandbox 👀

ThijsOP•2y ago

@manniL / TheAlexLichter can it be this?

manniL•2y ago

absolutely, yes

ThijsOP•2y ago

I googled the error But can't find a fix

manniL•2y ago

This is for sure a problem but there can be other issues "on top" too The fix really depends on your project

ThijsOP•2y ago

These are the only warnings

manniL•2y ago

ThijsOP•2y ago

What does it mean then? Simple said

manniL•2y ago

I summarized that here: https://blog.lichter.io/posts/vue-hydration-error/

blog.Lichter.io

What to do when Vue hydration fails

SSR is amazing but also comes with errors you might have not seen before. Especially one problem still boggles lots of minds: When Vue Hydration fails. In this article we will take a look at possible reasons, explain what the error means and how to fix it

ThijsOP•2y ago

I guess its because I render dynamic content in a v-for But the strange thing is it only gets triggered on a refresh on live Not when you're coming from another page @manniL / TheAlexLichter What is the Click on one of the hydrate calls. ?

ThijsOP•2y ago

Over here @manniL / TheAlexLichter

manniL•2y ago

This article was written for nuxt 2 so the debugging won't work 1:1 But the concept is the same yep, that's also described in the article (and why)

ThijsOP•2y ago

@manniL / TheAlexLichter I already get a mismatch here wtf

ThijsOP•2y ago

I have NO CLUEwhy

manniL•2y ago

@Thijs middleware/plugins? layouts/app.vue?

ThijsOP•2y ago

Had to restart my server Happens a lot @manniL / TheAlexLichter cache i guess?

manniL•2y ago

@Thijs Which OS you use? Windows?

ThijsOP•2y ago

Yes

manniL•2y ago

Which Nuxt version you run? That should be resolved since 3.2.2

manniL•2y ago

https://github.com/nuxt/nuxt/issues/18635

GitHub

Server side not updating when in dev mode on Windows · Issue #18635...

Environment Operating System: Windows_NT Node Version: v18.12.1 Nuxt Version: 3.1.1 Nitro Version: 2.1.1 Package Manager: [email protected] Builder: vite User Config: - Runtime Modules: - Build Modules: -...

ThijsOP•2y ago

I think I fixed it.... @manniL / TheAlexLichter Is this the way to go to fetch?

manniL•2y ago

no, not really you would rather do const { data: page } = await useFetch('URL') ☺️ But for directus you can also use the nuxt directus module straight away this is easier for now I'd say

ThijsOP•2y ago

Hero Thanks @manniL / TheAlexLichter 1 last question

ThijsOP•2y ago

I want to update my data: page object when applying filters. But you can't because it isn't a ref.

ThijsOP•2y ago

How would you tackle this? Then you need to do something like this right?

manniL•2y ago

promise.all 🙂 page is a ref though when using useFetch

ThijsOP•2y ago

Is it already a red?

manniL•2y ago

So that should work

ThijsOP•2y ago

So you could overwrite

manniL•2y ago

not overwrite, no

ThijsOP•2y ago

With just page.value =

manniL•2y ago

you rather want to use a computed like const filteredEntries = computed(() => entries.value.filter(() => {...}))

ThijsOP•2y ago

Yeh But the template needs to update Now you have 2 refs. Your way Isn't it better to make a ref. Fill that one on load Then replace the ref.value with the new await call?

manniL•2y ago

Not sure I understand your issue 🤔 The first ref from useFetch contains the "raw" data the computed ref contains the data you'll show no filter = "all" of the data filter = filtered data

ThijsOP•2y ago

If I filter, I fetch again from Directus

ThijsOP•2y ago

So the carriers.data in my template. Needs to be replaced with the new carriers.data from the new fetch

manniL•2y ago

Oh, you would fetch again from directus on filter?

ThijsOP•2y ago

Yes

manniL•2y ago

by passing new parameters?

ThijsOP•2y ago

YEs

manniL•2y ago

Then you just need one ref indeed but you better pass the params to useFetch so it can re-fetch whenever they change

ThijsOP•2y ago

How would you trigger it then? Say i have a Filter function Which fetches again

manniL•2y ago

Well, it depends how your call to the carriers api would look like. Right now they seemed independent

ThijsOP•2y ago

I want to refetch the carriers can you do carriers.refresh then?

manniL•2y ago

but what has changed when you refetch? you don't pass any query params/body or arguments to the call, right?

ThijsOP•2y ago

If I refetch I'll apply filters So I add params

manniL•2y ago

for example? (right now, the calls shown above look independent) The filters should be stored in a ref ideally. This ref is then passed to the useFetch as query/body/... (however it is required) or even as part of the URL. useFetch will refetch when the ref (URL, query params) changes.

ThijsOP•2y ago

@manniL / TheAlexLichter here I would pass the filters

ThijsOP•2y ago

When I call the function.

manniL•2y ago

yeah but you can't destructure a ref like that make a computed out of the "standard" filter + the "variable ones" and pass it as params: { filter: myComputedFilter } or so. also, don't set carries.value do const { data: carries } setting ref's like you do there would be a one-off thing

ThijsOP•2y ago

Okay fixed it like this:

ThijsOP•2y ago

But how can I say now when I press a button. Refetch my data: carriers with given params? Sorry never worked like this before so I don't understand the syntax yet

ThijsOP•2y ago

This is what I want @manniL / TheAlexLichter

ThijsOP•2y ago

// INITIAL FETCH
const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/'
)

// FETCH AGAIN ON BUTTON PRESS WITH FILTERS
const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/',
  {
    params: {
      filter: {
        Aantal_Fietsen: {
          _eq: 2,
        },
      }
    }
  }
)

// INITIAL FETCH
const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/'
)

// FETCH AGAIN ON BUTTON PRESS WITH FILTERS
const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/',
  {
    params: {
      filter: {
        Aantal_Fietsen: {
          _eq: 2,
        },
      }
    }
  }
)

manniL•2y ago

no worries. it is more the mental modal 🙂 So initial fetch should not be for published only too?

ThijsOP•2y ago

Just an example

manniL•2y ago

give me 1 more example and then I show you 🙂

ThijsOP•2y ago

Changed it

manniL•2y ago

👍 Just think of it as a very basic implementation. Filters can be set as you like and be more sophisticated

<script setup>
const DEFAULT_FILTERS = {
  status: {
          _eq: 'published',
  },
}

const filters = ref({})
const params = computed(() => ({
  filter: {...DEFAULT_FILTERS, ...filters.value}
}))

const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/',
  {
    params
  }
)

function setTwoFietsen() {
  filters.value = {
    ...filters.value,
    Aantal_Fietsen: {
          _eq: 2,
    },
  }
}
</script>
<template>
  <div>
    {{ carriers.data.map(d => d.Titel) }}
    <button @click="setTwoFietsen">2 Fietsen</button>
  </div>
</template>

<script setup>
const DEFAULT_FILTERS = {
  status: {
          _eq: 'published',
  },
}

const filters = ref({})
const params = computed(() => ({
  filter: {...DEFAULT_FILTERS, ...filters.value}
}))

const { data: carriers } = await useFetch(
  'https://tbxrur5f.directus.app/items/Fietsendrager/',
  {
    params
  }
)

function setTwoFietsen() {
  filters.value = {
    ...filters.value,
    Aantal_Fietsen: {
          _eq: 2,
    },
  }
}
</script>
<template>
  <div>
    {{ carriers.data.map(d => d.Titel) }}
    <button @click="setTwoFietsen">2 Fietsen</button>
  </div>
</template>

ThijsOP•2y ago

So when you change the computed It automatically refetches? Because you trigger a refetch function nowhere?

manniL•2y ago

it will refetch because you pass it to useFetch before and whenever the computed updates, useFetch will do a refetch because it watches the computed internally This is a common pattern for composables.

ThijsOP•2y ago

Ah wow Thanks ma Appreciate it Say I put this in a /composable/fietsendragers.js How can I load the content then in my /pages/fietsendragers/index.vue?

manniL•2y ago

you would wrap it in a function and return the result. You also want to pass the filters as argument to the function

Gaming

Programming

Why do I get an error on refresh with dynamic content?