Проблемы с react & tanstack query
Нужно проверить в Базе Данных, что пользователя нет с таким telegram_id. Если нет создать и показать ему его места. Если есть сразу показать его места. У меня идет бесконечное создание пользователя
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import axios from "axios"
import { useState } from "react"
export function App() {
const [IdTelegramApp, setIdTelegramApp] = useState<number | undefined>(
undefined
)
const [telegram_username, setTelegram_username] = useState<
string | undefined
>(undefined)
interface TelegramUser {
id?: number
telegram_user_id: number
username: string
}
interface Place {
id?: number
name: string
web_app_user_id: number
}
const queryClient = useQueryClient()
const TelegramUserData = useQuery({
queryKey: ["telegram", IdTelegramApp],
queryFn: async () => {
if (IdTelegramApp === undefined) return []
const response = await axios.get<TelegramUser[]>(
`webAppUsers/?telegram_user_id=${IdTelegramApp}`
)
return response.data
},
})
const PlaceData = useQuery({
queryKey: ["places", IdTelegramApp],
queryFn: async () => {
if (IdTelegramApp === undefined) {
return []
}
const response = await axios.get<Place[]>(
`places/?web_app_user_id=${IdTelegramApp}`
)
return response.data
},
})
const mutationTelegram = useMutation({
mutationFn: (data: TelegramUser) => axios.post(`webAppUsers/`, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["telegram", "places"] })
},
})
return (
<>
<button onClick={() => setIdTelegramApp(123)}>telegram user add</button>
<button onClick={() => setTelegram_username("temp")}>
telegram_username
</button>
{!TelegramUserData && IdTelegramApp ? (
<div>
Пользователь найден показываем список его мест:
{PlaceData?.data?.map((place) => (
<p>{place.name}</p>
))}
</div>
) : (
mutationTelegram.mutate({
telegram_user_id: IdTelegramApp!,
username: telegram_username ?? "",
})
)}
</>
)
}
export default App