`useFetch` type return

Environment

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-27415326.3c563fa
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

I use Visual Studio Code with Volar

Reproduction

In app.vue, I fetch data with useFetch()

<script setup lang="ts">
interface Book {
  title: string
  authors: string[]
  serie?: string
}

const { data } = await useFetch<Book>('/books?per-page=32', {
  baseURL: 'https://bookshelves.ink/api',
  lazy: true,
})
console.log(data.value)
</script>

CodeSandbox is available.

Describe the bug

When I want to add type to useFetch(), I’ve an error

Type ‘Book’ does not satisfy the constraint ‘string’.

<script setup lang="ts">
const { data } = await useFetch<Book>('/books?per-page=32', {
  baseURL: 'https://bookshelves.ink/api',
  lazy: true,
})
</script>

It works with useAsyncData()

Additional context

Logs

No response

[danielroe]

let’s leave it open as a documentation issue

[danielroe]

You can update it like this:

  script setup lang="ts">
- const { data } = await useFetch<Book>('/books?per-page=32', {
+ const { data } = await useFetch<string, Book>('/books?per-page=32', {
    baseURL: 'https://bookshelves.ink/api',
    lazy: true,
  })
</script>

(The first generic is the type of the URL - it can either be a string or a typed string associated with a particular return type …)

Would be nice to document this.