How to destructor the response from the useQuery

Question

I have a useQuery hook which calls an api and returns the response like :

return {
  title : response?.data?.[0]?.title,
  desc: response?.data?.[0]?.desc,
}

I have the useQuery like this :

const {data: content} = useQuery('entitle', apiCall)

Here, I am trying to destructor this data like :

const {data: {title : [], desc: []}}  = useQuery('entitle', apiCall)

Now, it gives can not read property title of undefined while using it . How can I fix this ?

What are those `[]` supposed to be doing? I think you just want `const { data: { title, desc } } = ...` — Phil, Jul 07 '22 at 04:45
Does this answer your question? [destructuring assignment default value](https://stackoverflow.com/a/49233952/283366). TL;DR default values are assigned via `=`... `const { data: { title = [], desc = [] } } = ...` — Phil, Jul 07 '22 at 04:51
What is `undefined`? Works fine here ~ https://jsfiddle.net/t8k0s257/ — Phil, Jul 07 '22 at 05:01
Here, before api call only this gets called that why it is coming as undefined — ganesh kaspate, Jul 07 '22 at 05:13

score 0 · Answer 1 · answered Jul 07 '22 at 05:20

First do

const {
  data
} = useQuery('entitle', apiCall)

console.log(data)

And pls check if data has the structure you expect. If the request is done alright, then I guess you must expect the log to look like this.

{
  title: "something",
  desc: "something-else"
}

If the structure of the object is not like that or you get undefined. Then you got a problem either with the request or the hook call, somehow the query is not returning what you desire.

If the structure is the one you expect it to be, then write what good Phil wrote earlier in your post's comment.

const {
  data: {
    title = [],
    desc = []
  }
} = useQuery('entitle', apiCall)

score 0 · Answer 2 · answered Jul 07 '22 at 05:30

0

Dont complicate the things

const {data} = useQuery('entitle', apiCall)
const {title=[], desc=[]} = data

answered Jul 07 '22 at 05:30

elVengador

299
3
10

How to destructor the response from the useQuery

2 Answers2