Repository pattern warning useFetch with Nuxt 3.10

[torn thorn]

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) }
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, }) }
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)
}`

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

[torn thorn]

Up please

[faint crane]

Would be easier to provide a running reproduction 🙂

[torn thorn]

This requires a lot of additional code and my api will not be accessible :/

What do you recommend in very large applications for code sharing at the API call level? (while keeping my custom composable which wrap useFetch to add the token in particular) ?

This warning can be disabled ?

[torn thorn]

Hello !

I made a repro to illustrate (in a very simplified way the problems following the update)

The problem will occurs when you click the button to make another call.

I have this kind of case in my application hundreds of times (whether to apply a filter, to make an API call after an action..)

I also need to keep my wrapper at useFetch to add my token (here I left it empty but it's to show my archi)

Thanks in advance !

https://stackblitz.com/edit/github-pgv3r7?file=app.vue

[faint crane]

@torn thorn You technically do a version of the mistake I show in my video, but "more complex" 😄
https://www.youtube.com/watch?v=njsGVmcWviY

[torn thorn]

Thank you for your feedback, and an additional subscription 😉

Wow
I'm going to have to rethink a lot of things to fix this.

If I understood correctly, when I need to make a call with immediate rendering (SSR) I must go through the useFetch, in all other cases $fetch ?

Would it be okay to pass a boolean to my functions to say to use useFetch or $fetch depending on where the calls are made ?

[faint crane]

you are welcome! Thanks for the sub 🙏

Hmm, not exactly. useFetch is also fine on the client. The thing is though: You don't want to call composables without the "right context"

So you don't want to call useFetch in a click handler

instead, you would want to use fetch there

Would it be okay to pass a boolean to my functions to say to use useFetch or $fetch depending on where the calls are made ?

From an architectural point, these are two very different things (function vs. composable). I'd not do that

instead, use your repository pattern fully based on $fetch, then use useAsyncData to call the pattern 🙂

[torn thorn]

The problem is that if I use $fetch in my wrapper, I will no longer have a call that will be made in SSR?

I don't really see how I could use useAsyncData to call the pattern
Really thank you for taking the time to answer me

[faint crane]

the idea would be to do sth. like useAsyncData(() => MyRepositoryHere.get('/url/')

which will be "under the hood":

useAsyncData(() => $fetch('/url'/, {...}))

[torn thorn]

Okay, I see the idea. I will try to set this up today. I'll tell you what happens 🙂

[torn thorn]

I tried to update the stackblitz to follow your recommendations but I have 2 problems:

• The first call is made on the client side, with the old way they were made on the server side
• Hydration concerns due to differences

https://stackblitz.com/edit/github-pgv3r7?file=composables%2FuseApiFetch.ts,api%2Fbase.ts,app.vue

Where did I go wrong ?

[faint crane]

@torn thorn I'll release a video about it tomorrow 😄

As I got quite some requests on that 😄

[torn thorn]

Oh great, I can't wait to see this!
Hoping to get over this problem very soon 🤗

[faint crane]

@torn thorn https://www.youtube.com/watch?v=jXH8Tr-exhI 🙂

(live at 3pm)

[torn thorn]

Yeahhhh

[torn thorn]

Hello @faint crane

it's me again 🙂

Thank you again for your video, it’s very interesting!
I have a question because in my implementation I also transform the data before returning it. How to do with the implementation so that the returned data is well transformed?

[torn thorn]

Moreover, using the example of the video, I still have my problems with the warnings :/

I updated the stackblitz to show the problem (on button click)
https://stackblitz.com/edit/github-pgv3r7?file=app.vue

[faint crane]

because you still use composables in your handler functions 🙂

try

<template>
  <div>
    <button @click="fetchOtherTodo">Fetch other todo</button>
    <div>{{ localTodo ?? 'no todo' }}</div>
  </div>
</template>

<script setup lang="ts">
import { Todo } from './entities/todo';

const { $api } = useNuxtApp();
const todoRepo = repository($api);

const localTodo = useState<Todo | null>('todos', () => null);
const fetchTodo = async (todoId: number) => {
  try {
    const data = await todoRepo.getOne(todoId)
    localTodo.value = data;
  } catch (e: any) {
    console.error(e);
  }
};

const fetchOtherTodo = async () => {
  const randomId = Math.floor(Math.random() * 10) + 2;
  await fetchTodo(randomId);
};

await fetchTodo(1);
</script>

[torn thorn]

With your proposal I no longer have the warning, however the first call is made on the client side whereas previously it was done on the server side :/

[faint crane]

this is made on both right now

I'd use useAsyncData instead there 😄

(with a parameter + watch) for example

[torn thorn]

I also tried with useAsyncData and either I got the warning or the first call is only made on the client side
I must really be doing something wrong ^^

[faint crane]

let me show you 🙂

https://stackblitz.com/edit/nuxt-discord-cesar

[torn thorn]

wow it works well with this implementation, awesome!

I'm going to look into this and try to implement it on a small part of my application!

A big thank you 🤗