Can't seem to access deeply nested object from async pinia store method

[lavish sedge]

After the fetch quote data is called, data contains the correct object. However quotes and quotesC remains undefined and I cannot figure out how to populate it other than using the custom fetch's transformer function. If i use the transformer and set the quotes ref from within there, it works. The object does contain "Quotes" it is definitely there.

// Store
export const useQuoteDataStore = defineStoreWithHMR('quote-data', () => {
    const data = ref({});
    const quotes = ref<Quote[]>([]);

    const fetchQuoteData = async () => {
        const result = await useXFetch('/api/Quote/action/GetQuoteDetails', {
            query: {
                EntityID: 3,
                QuoteType: 0
            }
        });
        data.value = result.data;

        if (result.data) {
            quotes.value = result.data.Quotes;
        }

        return result;
    }

    const quotesC = computed<QuoteDto[]>(() => data.value.Quotes);

    return {
        data,
        quotes,
        quotesC,
        fetchQuoteData,
    }
});

[glacial forge]

Hi @lavish sedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I can see you're having an issue with accessing nested data in your Pinia store after an async fetch request in Nuxt. This is a common challenge when working with reactive data and asynchronous operations.

The issue is related to how the data is being accessed after the fetch operation. When working with useFetch or similar async data fetching in Nuxt, the returned data is wrapped in a ref, and you need to properly access the value.

Looking at your code, there are a couple of potential issues:

1. The result from your useXFetch likely returns a ref object where the actual data is in result.data.value, not just result.data.

2. When working with Pinia stores and async data in Nuxt, you need to be careful about how you access and update reactive state.

Here's how you might fix your store:

// Store
export const useQuoteDataStore = defineStoreWithHMR('quote-data', () => {
    const data = ref({});
    const quotes = ref<Quote[]>([]);

    const fetchQuoteData = async () => {
        const { data: fetchedData } = await useXFetch('/api/Quote/action/GetQuoteDetails', {
            query: {
                EntityID: 3,
                QuoteType: 0
            }
        });
        
        // Check if fetchedData is a ref and access its value
        data.value = fetchedData.value || fetchedData;

        if (data.value && data.value.Quotes) {
            quotes.value = data.value.Quotes;
        }

        return { data: data.value };
    }

    const quotesC = computed(() => data.value?.Quotes || []);

    return {
        data,
        quotes,
        quotesC,
        fetchQuoteData,
    }
});

The key changes are:

1. Using destructuring to get the data from the fetch result
2. Handling the possibility that fetchedData might be a ref
3. Using optional chaining (?.) in the computed property to safely access nested properties
4. Adding a fallback (|| []) for the computed property

This issue is related to how Nuxt handles data fetching and reactivity. As mentioned in the Stack Overflow post about useFetch response access, the data from async operations in Nuxt can sometimes be tricky to access directly due to the SSR nature of the responses.

If you're still having issues, you might want to try using the onResponse interceptor approach as shown in that same Stack Overflow post, which can give you more direct access to the response data.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lavish sedge Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[lavish sedge]

Kapa's advice was already tried from what I got from ChatGPT, it has the same advice

See this works when i use the transformer:

export const useQuoteDataStore = defineStoreWithHMR('quote-data', () => {
    const data = ref({});
    const quotes = ref<Quote[]>([]);

    const fetchQuoteData = () => useXFetch('/api/Quote/action/GetQuoteDetails', {
        query: {
            EntityID: 3,
            QuoteType: 0
        },
        transform: (response) => {
            data.value = response;
            quotes.value = response.Quotes;

            return response;
        }
    });

    const quotesC = computed(() => data.value?.Quotes || []);

    return {
        data,
        quotes,
        quotesC,
        fetchQuoteData,
    }

[lavish sedge]

bump

[round hornet]

I would just use $fetch in this case instead of useFetch