useQuery - select return undefined data

[ekimkael]

Hello guys,
I have a custom hooks who goes like this:

import { useQuery } from "@tanstack/react-query"

import axios from "@/config/axios"
import { Chat, IGiftedChat } from "../utils/types"

const useGetChat = (id: string) => {
	const query = useQuery({
		queryKey: ["chat", id],
		queryFn: async () => {
			const response = await axios.get<Chat>(`/chats/${id}`)
			return response.data
		},
		select: (data): IGiftedChat => {
			return {
				id: data.id,
				user: data.contact,
				messages: data.messages.map((message) => ({
					_id: data.id,
					text: message.content,
					createdAt: new Date(message.updatedAt),
					user: {
						_id: data.contact.id,
						name: data.contact.firstname,
						avatar: data.contact.avatar ?? undefined,
					},
				})),
			}
		},
	})

	return query
}

export default useGetChat

when I try to use it like that:
const { data, isLoading } = useGetChat(params?.id as string)
I have undefined as the result below the result when I'm logging: data and error
undefined [TypeError: Cannot read property 'map' of undefined]

Can someone help me?

[87xie]

Check that the data is properly structured. The map function is trying to operate on undefined. You can use optional chaining to prevent errors.

useQuery({
  // ...
  select: (data): IGiftedChat => ({
    messages: data?.messages?.map((message) => ({
      // ...
    })) ?? [],
  }),
})

[ekimkael]

I have the undefined error when I use select. If I remove it, the query works just fine.
And the optional chaining doesn't work

[TkDodo]

data is defined when you run select, that's guaranteed. It seems that your data is an object that doesn't have a messages property as you're doing:

messages: data.messages.map((message) => ({

so just console log data and see what it actually is ....

[ekimkael]

My apologies guys. the problem was coming from the API.
In the route to get a chat I though I was returning an object but I was returning an array of objects