Nuxt•8mo ago

UseAsyncData with a request params defined by a computed property ?

Should that work ? directusGetItems is a function I defined using the directus base url. I would like to use the computed prop to modify the requestParams in the UI. in this example, it's not reactive, but this non reactive version is not working. It doesn't fetch data on page load. Is it possible to use useAsyncData with a computed prop ?

const requestParams = computed(() => {
    const params = {
        fields: [ '*' ],
        sort: '-date_created',
        limit: 25
    }

    return params;
});

const { data: meals } = await useAsyncData(
    "meals",
    async () => {
        const items = await directusGetItems('Meals', requestParams.value );

        return items;
    }, {
        watch: reqParam,
        server: true 
    }
);

const requestParams = computed(() => {
    const params = {
        fields: [ '*' ],
        sort: '-date_created',
        limit: 25
    }

    return params;
});

const { data: meals } = await useAsyncData(
    "meals",
    async () => {
        const items = await directusGetItems('Meals', requestParams.value );

        return items;
    }, {
        watch: reqParam,
        server: true 
    }
);

6 Replies

Single•8mo ago

The computed is called requestParams while you use reqParam in your method. You also need to use requestParams.value

EricOP•8mo ago

thanks for you answer ! yep sorry. this is a simplified version to make the question easier to understand, and I made somt typos when rewiting it. in my code these errors were fine. Do you know if it should technicaly work ? useAsyncData with a computed prop as queryParameters ?

Single•8mo ago

I don't see any problem with using a computed prob within useAsnycData. You should not expect it to re-execute the useAsyncData method in case your requestParams computed returns a changed value.

EricOP•8mo ago

I shouldn't expect it to re-execute it? oh. I thought that's what the goal is... what does that watch param do then ?

Single•8mo ago

Oh i missed on that one. Yes that will indeed handle the re-execution in case reqParam aka requestParams does change. Try using watch: [requestParams]

EricOP•8mo ago

Thanks for your help. I finaly took another approach, but I managed to get this to work. thanks!

Gaming

Programming

UseAsyncData with a request params defined by a computed property ?