/e2e-typesafety-in-nuxt-fullstack-application.html

[utterances-bot]

E2E Typesafety in Nuxt Fullstack Application | Cody Bontecou

Showcasing a simple approach to sharing types between the server and client within a fullstack Nuxt application.

https://www.codybontecou.com/e2e-typesafety-in-nuxt-fullstack-application.html?source=weeklyVueNews&campaign=136

[woldtwerk]

const { data: userData } = await useFetch('/api/getUser')

This falls short in typing. I had hoped it would implicitly provide the data structure that the server is providing, but instead, it's implicitly unknown.

This is not correct. Nuxt provides type safety. The string you pass to useFetch is also a literal.
You can check the generated types in .nuxt/types/nitro-routes.d.ts:

'/api/getUser': {
      'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/getUser').default>>>>
}

If it does not work for you check if your are affected by this issue: nuxt/nuxt#23984

The preferred implementation should be to write a data fetching function or an api client and put it into useAsyncData:

const { $api } = useNuxtApp()
const { data } = await useAsyncData(
  'users',
  $api.getUsers,
)

You should use the amazing tools nuxt brings to the table.
Btw instead of api/getUsers.ts a better approach would be api/user/index.get.ts for all users and api/users/[uuid].get.ts for a single user ;)

[woldtwerk]

or write a custom useFetch like in this example: https://nuxt.com/docs/examples/advanced/use-custom-fetch-composable

[CodyBontecou]

Hey @woldtwerk, thanks for the in-depth comment.

I'm finally getting around to working on your suggestions and I'm curious about const { $api } = useNuxtApp(). Where is $api coming from here?

It's returning a type of unknown and I can't seem to find anything relating to it in the docs.

Are you referring to the $api variable defined in this blog post https://notes.atinux.com/nuxt-custom-fetch?

[woldtwerk]

$api was just an example. You have to write it yourself. It can be named whatever you want.
You can create a client for your api and provide it:

import { api } from './your-api.ts'

export default defineNuxtPlugin(() => ({
  provide: {
    api,
  }
})

In your components you can access it with const { $api } = useNuxtApp()
Indeed similar to the blog post from Sébastien.