Repository pattern warning useFetch with Nuxt 3.10

Good morning,

In the latest version of Nuxt (3.10) warnings appeared when using useFetch outside of setup. This causes me problems because I have an architecture split via the pattern repository and there is no reason for this to give me warnings.
(PR #25071)

Here is an example of splitting that I have:

index.vue file:

try {
        data.value = await Repository.taxModule.taxClass.getAll({
            ...defaultFetchTaxClassParams,
            ...options,
        })
    } catch(e:any) {
        setRequestError(e)
    }

try {
        data.value = await Repository.taxModule.taxClass.getAll({
            ...defaultFetchTaxClassParams,
            ...options,
        })
    } catch(e:any) {
        setRequestError(e)
    }

This method calls a utility class acting as a pass-through

Method called:

static async getAll(
        getTaxClassesOptions: API_taxClass_getTaxClassesOptions,
    ): Promise<ResultList<TaxClass>> {
        return await BaseRepository.getAllFactory<TaxClass>({
            apiUrl: TaxClass.getApiUrlPrefix(),
            options: getTaxClassesOptions,
            adapter: TaxClassApiAdapters.formatTaxClassesResponse,
        })
    }

static async getAll(
        getTaxClassesOptions: API_taxClass_getTaxClassesOptions,
    ): Promise<ResultList<TaxClass>> {
        return await BaseRepository.getAllFactory<TaxClass>({
            apiUrl: TaxClass.getApiUrlPrefix(),
            options: getTaxClassesOptions,
            adapter: TaxClassApiAdapters.formatTaxClassesResponse,
        })
    }

And finally the getAllFactory method (calling my useApiFetch component)

static async getAllFactory<T>({
        apiUrl,
        options,
        adapter,
    }: {
        apiUrl: string
        options?: any
        adapter: (data: any, options?: any) => ResultList<T>
    }): Promise<ResultList<T>> {
        const url = ApiQuery.buildQueryString(apiUrl, options)
        let response: unknown

        await useApiFetch(url)
            .catch((error) => {
                throw error
            })
            .then((res) => {
                response = res
            })
        return adapter(response, options)
    }

static async getAllFactory<T>({
        apiUrl,
        options,
        adapter,
    }: {
        apiUrl: string
        options?: any
        adapter: (data: any, options?: any) => ResultList<T>
    }): Promise<ResultList<T>> {
        const url = ApiQuery.buildQueryString(apiUrl, options)
        let response: unknown

        await useApiFetch(url)
            .catch((error) => {
                throw error
            })
            .then((res) => {
                response = res
            })
        return adapter(response, options)
    }

My useApiFetch is currently a composable allowing me to wrap the standard useFetch and add my token and other options
What should I change to keep this architecture while no longer having the warnings?
If I replace the useFetch in my composable with a $fetch, the SSR no longer happens at all..

Thanks in advance

Nuxt•3y ago•

40 replies

Cesar

Repository pattern warning useFetch with Nuxt 3.10

try {
        data.value = await Repository.taxModule.taxClass.getAll({
            ...defaultFetchTaxClassParams,
            ...options,
        })
    } catch(e:any) {
        setRequestError(e)
    }

try {
        data.value = await Repository.taxModule.taxClass.getAll({
            ...defaultFetchTaxClassParams,
            ...options,
        })
    } catch(e:any) {
        setRequestError(e)
    }

This method calls a utility class acting as a pass-through

Method called:

static async getAll(
        getTaxClassesOptions: API_taxClass_getTaxClassesOptions,
    ): Promise<ResultList<TaxClass>> {
        return await BaseRepository.getAllFactory<TaxClass>({
            apiUrl: TaxClass.getApiUrlPrefix(),
            options: getTaxClassesOptions,
            adapter: TaxClassApiAdapters.formatTaxClassesResponse,
        })
    }

static async getAll(
        getTaxClassesOptions: API_taxClass_getTaxClassesOptions,
    ): Promise<ResultList<TaxClass>> {
        return await BaseRepository.getAllFactory<TaxClass>({
            apiUrl: TaxClass.getApiUrlPrefix(),
            options: getTaxClassesOptions,
            adapter: TaxClassApiAdapters.formatTaxClassesResponse,
        })
    }

And finally the getAllFactory method (calling my useApiFetch component)

static async getAllFactory<T>({
        apiUrl,
        options,
        adapter,
    }: {
        apiUrl: string
        options?: any
        adapter: (data: any, options?: any) => ResultList<T>
    }): Promise<ResultList<T>> {
        const url = ApiQuery.buildQueryString(apiUrl, options)
        let response: unknown

        await useApiFetch(url)
            .catch((error) => {
                throw error
            })
            .then((res) => {
                response = res
            })
        return adapter(response, options)
    }

static async getAllFactory<T>({
        apiUrl,
        options,
        adapter,
    }: {
        apiUrl: string
        options?: any
        adapter: (data: any, options?: any) => ResultList<T>
    }): Promise<ResultList<T>> {
        const url = ApiQuery.buildQueryString(apiUrl, options)
        let response: unknown

        await useApiFetch(url)
            .catch((error) => {
                throw error
            })
            .then((res) => {
                response = res
            })
        return adapter(response, options)
    }

Repository pattern warning useFetch with Nuxt 3.10

Repository pattern warning useFetch with Nuxt 3.10

Similar Threads

Similar Threads

Similar Threads