Can I retrieve the return type of useFetch in Nuxt3?

I am running into an issue while trying to specify the APIBody type in the following manner: Property 'test' does not exist on type 'NonNullable<PickFrom<_ResT, KeysOf>>'. It seems like there is no straightforward way to define the return type of useFetch. This makes the whole process feel quite inconvenient...

type APIBody = {
 test: string
}
const {data, error} = await useFetch<APIBody>("api_url here")

console.log(data.value.test) // Property 'test' does not exist on type 'NonNullable<PickFrom<_ResT, KeysOf<DataT>>>'.
typescriptvuejs3nuxtjs3

Answer №1

According to the documentation on Nuxt's website, the data property that is returned by the useFetch function is a Vue Ref. This means that in order to access it, you must use its .value property within the <script setup> section.

To demonstrate this, here is an example with proper typing:

<script setup lang="ts">
type APIBody = {
  test: string
}

const { data, error } = await useFetch<APIBody>("<api_url>")

console.log(data.value.test) // This value is typed as APIBody['test']
</script>

Answer №2

The function useFetch returns a type of Ref<APIBody|null>, as it initializes with a value of null until the fetching process is completed.

To handle this, you have the option to use Optional Chaining:

console.log(data.value?.test)

Another approach would be setting a default value:

const { data, error } = await useFetch<APIBody>("<api_url>",{default: ()=>({test:''}))
console.log(data.value.test)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to organize a collection of objects by a specific characteristic in Typescript?

Imagine you have an array of objects with the following structure: type Obj = { id: number, created: Date, title: string } How can you effectively sort this array based on a specific property without encountering any issues in the type system? For ...

typescriptsorting

Strategies for effectively choosing this specific entity from the repository

Is it possible to choose the right entity when crafting a repository method using typeorm? I'm facing an issue where I need to select the password property specifically from the Admin entity, however, the "this" keyword selects the Repository instead ...

typescriptormnestjstypeormbcrypt

issue with mongoose virtual populate (unable to retrieve populated field)

During my project using mongoose with typescript, I encountered an issue with adding a virtual called subdomains to populate data from another collection. Although it worked without any errors, I found that I couldn't directly print the populated data ...

javascriptnode.jstypescriptexpressmongoose

Comparing the cost of memory and performance between using classes and interfaces

As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...

javascriptangulartypescript

I am seeking advice on how to create an extension for a generic class in TypeScript specifically as a getter

Recently, I discovered how to create extensions in TypeScript: interface Array<T> { lastIndex(): number } Array.prototype.lastIndex = function (): number { return this.length - 1 } Now, I want to figure out how to make a getter from it. For exam ...

typescript

Encountering a problem when launching the "vite-express" template on the Remix app (TSConfckParseError: error resolving "extends")

I recently launched a brand-new [email protected] project using the remix-run/remix/templates/vite-express template after executing this command: npx create-remix@latest --template remix-run/remix/templates/vite-express However, upon trying to run th ...

typescriptviteremix.runvite-tsconfig-paths

Node.js, sigma.js, and the typescript environment do not have a defined window

When attempting to set up a sigma.js project with node.js in TypeScript, I encountered a reference error after starting the node.js server: ts-node index.ts The problem seems to be located within the sigma\utils\index.js file. <nodejsproject& ...

javascriptnode.jstypescriptexpresssigma.js

The submitEvent.target cannot be converted to formdata in Vue

update I successfully created a new function based on the helpful answer provided below export function getFormDataAsJson(e) { const jsondata = {} let fd= new FormData(e.target) for (let key of fd.entries()) { jsondata[key[0]]=key[1] ...

javascriptvue.jsvuejs3

The union type cannot function effectively in a closed-off environment

Here is the code snippet I am working with: if (event.hasOwnProperty('body')) { Context.request = JSON.parse(event.body) as T; } else { Context.request = event; } The variable event is defined as follows: private static event: aws.IGateway ...

typescripttypescript2.0

Exploring the most effective strategies for creating a brand-new type in TypeScript?

In the execution environment I'm working with, there are several global constants that represent different directions: TOP = 1 TOP_RIGHT = 2 RIGHT = 3 BOTTOM_RIGHT = 4 BOTTOM = 5 BOTTOM_LEFT = 6 LEFT = 7 TOP_LEFT = 8 These constants are not just ran ...

typescripttypesglobal-variables

AngularTS regex that enforces the use of a decimal point in numbers

I am working on a requirement where the input should only accept decimal characters, negative or positive. I need to use regex to make the decimal point mandatory, however it is currently allowing negative whole numbers which is not the desired behavior. I ...

angularregextypescript

What is the reason for instances being compatible even if their class constructors do not match?

Why are the constructors in the example below not compatible, but their instances are? class Individual { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } class Worker { name: st ...

typescript

Issue: Angular 14 - Validators Not Resetting in Nested FormGroup

I am currently working on implementing a nested FormGroup. However, I have encountered an error when attempting to reset the form. Here is the structure of the form: form: UntypedFormGroup; this.form = this.fb.nonNullable.group({ f1: [''], f2: ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Experiencing issues with the functionality of getServerSideProps in my project

I'm scratching my head over why server-side props aren't working for me in nextjs (v12). I'm utilizing getServerSideProps inside pages/details/index.tsx. export const getServerSideProps = async (context: any) => { const name = context.q ...

typescriptnext.jsgetserversideprops

Error: The variable _ is undefined when trying to use the .map() function on an array

While working on my project, I encountered a "ReferenceError: _ is not defined" when using the .map function in this code snippet: arr.map(async (elem) => { ... }); I couldn't find any explicit mention of "_" in my code. The error trace pointed me ...

typescriptecmascript-6next.jslodashecmascript-5

Tips for retrieving input data sent from the parent component in Angular 2

I am working on a playlist component that receives an input 'playlist' from its parent component. This input is an object of arrays structured as follows: playList: { headerPlaylists: Array<any>, bodyPlaylists: Array<any> ...

angulartypescript

A step-by-step guide on implementing one-way drag functionality in two lists using Vue.js

I've implemented the vuedraggable library for creating draggable items(https://github.com/SortableJS/Vue.Draggable) My goal is to have two draggable lists where dragging is only enabled from list1 to list2. I want to disable drag from list2 to list1 ...

vue.jsvuejs2vuejs3draggablevuedraggable

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6

The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does ...

typescriptvue.jsvuexquasar

Having trouble injecting $resource into my Jasmine unit test

I've encountered an issue while trying to test my self-written service that utilizes $resource. I'm facing difficulties when trying to inject $resource into my test spec. My setup includes Typescript with AngularJS 1.6.x, and here is a snippet o ...

angularjstypescriptjasminekarma-jasminejasmine2.0