N
Nuxt•7d ago
Toffe

Fetch is typed but not the object i put it in

When getting the /api/test it is typed correctly. 
const res: SerializeObject<{
    findings: {
        id: string;
        title: string;
        description: string;
        createdById: string | null;
        updatedById: string | null;
        createdAt: Date;
        updatedAt: Date;
        deletedAt: Date | null;
        testId: string;
        severity: $Enums.FindingsSeverity;
    }[];
... some more..
const res: SerializeObject<{
    findings: {
        id: string;
        title: string;
        description: string;
        createdById: string | null;
        updatedById: string | null;
        createdAt: Date;
        updatedAt: Date;
        deletedAt: Date | null;
        testId: string;
        severity: $Enums.FindingsSeverity;
    }[];
... some more..
Using it below 
export const useTestStore = defineStore("test", () => {
    // Store State
    const storeData = ref();

    const reset = () => {
        storeData.value = [];
    };

    const reload = async () => {
        const res = await $fetch("/api/test");

        if (!res) {
            return false;
        }

        storeData.value = res;
        return true;
    };
export const useTestStore = defineStore("test", () => {
    // Store State
    const storeData = ref();

    const reset = () => {
        storeData.value = [];
    };

    const reload = async () => {
        const res = await $fetch("/api/test");

        if (!res) {
            return false;
        }

        storeData.value = res;
        return true;
    };
But if i ever try to use storeData it complains that it is of type any, how can i get the type the fetch gives and put as type for storeData?
2 Replies
kapa.ai
kapa.ai•7d ago
Hi @Toffe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're facing is that TypeScript isn't inferring the type from your $fetch call to your storeData ref. This is a common typing challenge when working with Nuxt's data fetching utilities. Here's how you can properly type your store data: 
export const useTestStore = defineStore("test", () => {
    // Define the type based on what your API returns
    type TestData = Awaited<ReturnType<typeof $fetch<any, "/api/test">>>;
    
    // Initialize with the correct type
    const storeData = ref<TestData | null>(null);

    const reset = () => {
        storeData.value = [];
    };

    const reload = async () => {
        const res = await $fetch<TestData>("/api/test");

        if (!res) {
            return false;
        }

        storeData.value = res;
        return true;
    };
    
    // rest of your store code
});
export const useTestStore = defineStore("test", () => {
    // Define the type based on what your API returns
    type TestData = Awaited<ReturnType<typeof $fetch<any, "/api/test">>>;
    
    // Initialize with the correct type
    const storeData = ref<TestData | null>(null);

    const reset = () => {
        storeData.value = [];
    };

    const reload = async () => {
        const res = await $fetch<TestData>("/api/test");

        if (!res) {
            return false;
        }

        storeData.value = res;
        return true;
    };
    
    // rest of your store code
});
Alternatively, you can also explicitly define your response type: 
// Define your API response type
interface TestResponse {
    findings: {
        id: string;
        title: string;
        description: string;
        createdById: string | null;
        updatedById: string | null;
        createdAt: Date;
        updatedAt: Date;
        deletedAt: Date | null;
        testId: string;
        severity: $Enums.FindingsSeverity;
    }[];
    // other properties...
}

export const useTestStore = defineStore("test", () => {
    // Initialize with the correct type
    const storeData = ref<TestResponse | null>(null);

    // rest of your code...
    
    const reload = async () => {
        const res = await $fetch<TestResponse>("/api/test");
        // ...
    };
});
// Define your API response type
interface TestResponse {
    findings: {
        id: string;
        title: string;
        description: string;
        createdById: string | null;
        updatedById: string | null;
        createdAt: Date;
        updatedAt: Date;
        deletedAt: Date | null;
        testId: string;
        severity: $Enums.FindingsSeverity;
    }[];
    // other properties...
}

export const useTestStore = defineStore("test", () => {
    // Initialize with the correct type
    const storeData = ref<TestResponse | null>(null);

    // rest of your code...
    
    const reload = async () => {
        const res = await $fetch<TestResponse>("/api/test");
        // ...
    };
});
Note that when working with Nuxt's data fetching, you need to be aware of the serialization that happens between server and client. As mentioned in the Nuxt documentation on data fetching, data returned from API routes is serialized using JSON.stringify, which means complex types like Date objects will be converted to strings. Nuxt tries to convert the return type to match the actual value, but you might need to handle this conversion manually in some cases. If you're using useFetch instead of $fetch, you would need to handle the fact that the data is wrapped in a ref: 
const { data } = await useFetch<TestResponse>("/api/test");
storeData.value = data.value;
const { data } = await useFetch<TestResponse>("/api/test");
storeData.value = data.value;
Remember that the data from useFetch is a ref that needs to be accessed with .value as explained in the useFetch documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7d ago
<@260145305754927104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?