Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-nhpzcs (Open reproduction)

@danielroe This change introduced the warning for every non-truthy value. It should check explicitly for null | undefined.
I propose to only check for undefined. See #28107.

PR welcome to check only for undefined, see also #27718

What is your use-case for returning false or ''?

For example, we have this function from a Pinia store:

    async function isLogged(): Promise<boolean> {
        if (!loggedIn.value) {
            try {
                user.value = await $fetch<User>('/api/user');
                loggedIn.value = true;
            } catch (error: unknown) {
                if (error instanceof FetchError) {
                    if (error.status !== 401 && error.status !== 403) {
                        console.error('No user found', error);
                    }
                }
            }
        }
        return loggedIn.value;
    }

that we use this way in a plugin:

    await useAsyncData('isLogged', () => isLogged(), {dedupe: 'defer'});

I need to wrap it like this if I want to avoid the warn:

    await useAsyncData(
        'isLogged',
        async () => {
            return {isLogged: await isLogged()};
        },
        {dedupe: 'defer'},
    );

Ah, that is exactly what we are trying to warn about. useAsyncData is not for dispatching side effects. There are situations when it might run at a different time than you are expecting.

Are you referencing the states assignations in the store through useAsyncData?

But even without this, I assume we could easily find some use-cases as such:

const {data: isLogged} = await useAsyncData(() => $fetch<boolean>('/api/user/logged'));

And then do something depending on isLogged value in a template or a script setup.
Is this something we should avoid as well?

What is your use-case for returning false or ''?

A use case for explicitly returning null is to indicate that something does not exist.

// fetchMyPost returns Post | null
const { data: post } = await useAsyncData(() => fetchMyPost(route.params.id))

Wouldn't you rather return a 404 Not Found for this one?

Depends on the use case. Sometimes you still want to render the page and just don't show the loaded value or indicate that it does not exist.

I also encountered it and do not fully understand why I am not allowed to return 0 or false. If I want to fetch the count of posts of category X and display something special for 0 posts I have to go the detour of throwing an error? Would appreciate it very much to get more insights, as "must be truthy" is not so telling for me, something with timing, any examples, use-cases?

Also useFetch docs does not state this (directly), so I was even more confused and searched my code for an abandoned useAsyncFetch until I remembered that useFetch is a wrapper

Also discovered the same problem out-of-nowhere on this code after doing some dependency updates.

app.vue
Source: https://github.com/sidebase/nuxt-auth/blob/de1dca620a88b1cec2b408bbe27b67aacd72c355/playground-authjs/app.vue#L10

const { data: token } = await useFetch('/api/token', { headers })

server/api/token.get.ts
https://github.com/sidebase/nuxt-auth/blob/de1dca620a88b1cec2b408bbe27b67aacd72c355/playground-authjs/server/api/token.get.ts#L4

export default eventHandler(event => getToken({ event }))

The endpoint returns null when a user is unauthenticated. What is strange here is that $fetch actually overwrites null to undefined. I couldn't pinpoint the exact cause of it yet, but the behaviour is very consistent.
In development it spams logs with

 WARN  [nuxt] useAsyncData must return a value (it should not be undefined) or the request may be duplicated on the client side.

I had to do a manual $fetch return override to work around this:
sidebase/nuxt-auth@1e2b5a8

P.S. Will try to create a reproduction for it