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

125 messages · Page 1 of 1 (latest)

south crater
#

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?

#

I'm using Directus CMS

sleek hull
#

@south crater could you provide a stackblitz or codesandbox 👀

south crater
#

@sleek hull can it be this?

sleek hull
south crater
#

I googled the error

#

But can't find a fix

sleek hull
#

This is for sure a problem but there can be other issues "on top" too

#

The fix really depends on your project

south crater
#

These are the only warnings

south crater
#

What does it mean then?

#

Simple said

sleek hull
south crater
#

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 @sleek hull

#

What is the Click on one of the hydrate calls. ?

#

Over here @sleek hull

sleek hull
#

But the concept is the same

sleek hull
south crater
#

@sleek hull I already get a mismatch here

#

wtf

#

I have NO CLUEwhy

sleek hull
#

@south crater middleware/plugins?

#

layouts/app.vue?

south crater
#

Had to restart my server

#

Happens a lot

#

@sleek hull cache i guess?

sleek hull
#

@south crater Which OS you use? Windows?

south crater
#

Yes

sleek hull
#

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

south crater
#

I think I fixed it.... @sleek hull

Is this the way to go to fetch?

sleek hull
#

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

sleek hull
south crater
#

Hero

#

Thanks

#

@sleek hull 1 last question

#

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

#

How would you tackle this?

south crater
sleek hull
sleek hull
south crater
#

Is it already a red?

sleek hull
#

So that should work

south crater
#

So you could overwrite

sleek hull
#

not overwrite, no

south crater
#

With just page.value =

sleek hull
#

you rather want to use a computed

#

like const filteredEntries = computed(() => entries.value.filter(() => {...}))

south crater
#

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?

sleek hull
#

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

south crater
#

If I filter, I fetch again from Directus

#

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

sleek hull
#

Oh, you would fetch again from directus on filter?

south crater
#

Yes

sleek hull
#

by passing new parameters?

south crater
#

YEs

sleek hull
#

Then you just need one ref indeed

#

but you better pass the params to useFetch

#

so it can re-fetch whenever they change

south crater
#

How would you trigger it then?

#

Say i have a Filter function

#

Which fetches again

sleek hull
#

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

south crater
#

I want to refetch the carriers

#

can you do carriers.refresh then?

sleek hull
#

but what has changed when you refetch?

#

you don't pass any query params/body or arguments to the call, right?

south crater
#

If I refetch I'll apply filters

#

So I add params

sleek hull
#

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.

south crater
#

@sleek hull here I would pass the filters

#

When I call the function.

sleek hull
#

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

south crater
#

Okay fixed it like this:

#

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

#

This is what I want @sleek hull

#

// 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,
        },
      }
    }
  }
)

sleek hull
#

So

#

initial fetch should not be for published only too?

south crater
#

Just an example

sleek hull
#

give me 1 more example and then I show you 🙂

south crater
#

Changed it

sleek hull
#

👍

#

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>
south crater
#

So when you change the computed

#

It automatically refetches?

#

Because you trigger a refetch function nowhere?

sleek hull
#

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.

south crater
#

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?