useFetch returns data.result === null on RC.6 in production mode.

[mlbonniec]

Environment

Nuxt CLI v3.0.0-rc.6
RootDir: /Users/.../Documents/development/professional/MY_PROJECT
Nuxt project info:

------------------------------
- Operating System: `Darwin`
- Node Version:     `v18.6.0`
- Nuxt Version:     `3.0.0-rc.5`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `head`, `css`, `vite`, `srcDir`, `progress`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`
------------------------------

Reproduction

I'm sorry, but I can't reproduce the bug except on my project. However, I know the bug is due to the v3.0.0-rc.6 because I tried an old commit, with the v3.0.0-rc.4 so it was working. And just with upgrading to the rc.6, the bug appears. Using the code below, outside of my project, it's working. But it was working on rc.4, so I don't understand 😕

Describe the bug

useFetch returns data.value null on client (at the first fetch), but it seems to have a value on server. When I fetch again (with a "load more" button) I get my results.

<script lang="ts" setup>
import { useFetch } from '#app';

async function fetchArticles (): Promise<void> {
  articles.isLoading = true;
  const { data } = await useFetch<{ posts: GhostPage[] } & BrowseResults>('GHOST CONTENT API', {
    params: {
      key: 'API',
      include: ['authors', 'tags'].join(','),
      page: articles.currentPage
    },
    pick: ['posts', 'meta']
  });
  if (data.value.meta.pagination.pages === articles.currentPage)
    articles.hasMore = false;
  articles.data.push(...data.value.posts);
  articles.filteredData = filterArticles(articles.data);
  articles.isLoading = false;
}
</script>

Additional context

No response

Logs

No response

[wzy1935]

Save problem. I'm just about to submit my issue😂

my reproduction: https://stackblitz.com/edit/github-vyfip2?file=app.vue

await seems not work with this useFetch. In development mode it will show 'success', but in production it's just failed.

[pi0]

Hi, @wzy1935. Trying your reproduction, upgrading to edge channel seems to solve production issue 👍🏼

As another fix, you can explicitly pass fetch key:

const { data: arr } = await useFetch('/api/hello', { key: 'hello' });

[pi0]

@mlbonniec Do you mind to also try with explicit key? Also i can see you are modifying async fetcher data. You have pending ({ data, pending }) that indicates loading status. You can also use transform option to modify the response within the fetcher. Otherwise, you can directly use useState + $fetch to implement your own logic.

(will share an example lately)

[mlbonniec]

@pi0 thanks for sharing you tips of passing key! It's now working as well. However, upgrading to the edge channel isn't working for me. Do you know explain to us why this isn't working without the key property? Is it normal, or an issue? Thanks again! Also, pending is null :eyes:

[danielroe]

The repro seems to be working on edge channel: https://stackblitz.com/edit/github-vyfip2-rinvts.

[wzy1935]

@pi0 @danielroe Edge channel works for me, thanks! Looking forward to the final release👍

[danielroe]

I'm closing as RC8 is now out. Let me know if it wasn't resolved and I'll reopen!