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
<@221256893685956609> can it be this?
absolutely, yes
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
sleek hull
What does it mean then?
I summarized that here: https://blog.lichter.io/posts/vue-hydration-error/
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
What is the `Click on one of the hydrate calls.` ?
This article was written for nuxt 2 so the debugging won't work 1:1
But the concept is the same
sleek hull
But the strange thing is it only gets triggered on a refresh on live
yep, that's also described in the article (and why)
sleek hull
@south crater Which OS you use? Windows?
south crater
Yes
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
you would rather do `const { data: page } = await useFetch('URL')` ☺️
this is easier for now I'd say
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
I think I fixed it.... <@221256893685956609>
Is this the way to go to fetch?
Then you need to do something like this right?
sleek hull
How would you tackle this?
promise.all 🙂
sleek hull
I want to update my `data: page` object when applying filters. But you can't bec...
page is a ref though when using useFetch
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
sleek hull
Well, it depends how your call to the carriers api would look like. Right now they seemed independent
sleek hull
but what has changed when you refetch?
you don't pass any query params/body or arguments to the call, right?
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.
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,
},
}
}
}
)
no worries. it is more the mental modal 🙂
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>
So when you change the computed
It automatically refetches?
Because you trigger a refetch function nowhere?