`useFetch` data return null with mismatching client/request options

Environment

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.0.0-27480123.4c77c88`
- Package Manager:  `yarn@1.22.18`
- Builder:          `vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

In clean Nuxt project:

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script lang="ts" setup>
const [{ data: organization }, { data: repos }] = await Promise.all([
  useFetch(`https://api.github.com/orgs/nuxt`),
  useFetch(`https://api.github.com/orgs/nuxt/repos`)
])

console.log(organization.value) // null

const { data: organization } = await useFetch(`https://api.github.com/orgs/nuxt`)
console.log(organization.value) // null
</script>

Describe the bug

useFetch started returning null to the “data” property

Additional context

No response

Logs

No response

[pi0]

For giving manual key and baseURL to useFetch: (notice baseURL case)

await useFetch(`/api/v2/...`, { baseURL, key: 'countries-api' })

This will make keys same.

---

Interesting find @danielroe!

I would still assume it is a bug that the client-side is returning null instead of re-attempt to fetch!

It is not safe to remove baseURL or any other option from auto key generation. Two instances of useFetch with different baseURL will conflict this way.

Thinking about some possible improvements. Supporting proxy for me seems best approach. In the meantime, we should improve documentation and warn about this that if URL or options between client/server are not same, useFetch needs explicit key or will need to refetch (currently mismatch)

[danielroe]

Ah. I’ve just seen what you’re doing with baseURL. The key is based on the URL so by changing the URL between server and client, there is a mismatch.

In your case, you could use useAsyncData and pick a key manually.