react async получаю старые данные при сравнении

У меня не срабатывает не один из методов dataPlaces?.map((place: Place) => ... : ( не отображается этот кусочек кода)) Если приходит пустой ответ ([]) просто ничего не показывается. Я так понимаю это из-за async await, но я только учусь

вот исходники github

export default function PlaceList({
  IdTelegramApp,
  setPlaceId,
  telegram_username,
}: PlaceListProps) {
  const queryClient = useQueryClient()
  const { data: TUserQuery } = useTUser(IdTelegramApp)
  const { data: dataPlaces } = usePlacesQuery(IdTelegramApp)

  const handleCreateTelegramUser = () => {
    mutationTelegram.mutate({
      telegram_user_id: IdTelegramApp!,
      username: telegram_username ?? "",
    })
    // Делаем задержку и полностью перезапускаем страницу, т.к. я не нашел другого способа т.к. IdTelegramApp не обновляется
    delay(10000)
    window.location.reload()
  }

  const mutation = useMutation({
    mutationFn: (id: number) => PlaceService.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["places"] })
    },
  })

  const mutationTelegram = useMutation({
    mutationFn: (data: WebAppUser) => TUserService.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["telegram", "places"] })
      console.log("delay_befor")
      delay(50000)
      console.log("delay_after")
    },
    onError: () => {
      delay(50000)
      console.log("delay_5000")
    },
  })

  async function plugForEmptyList() {
    if (dataPlaces?.length == 0 || dataPlaces == undefined) {
      return (
        <>
          <img src={"./Share-expenses_add_place.png"} className="px-6 py-1" />

          <p className="p-3 mt-1 text-sm text-gray-500 dark:text-gray-300">
            Разделите расходы в поездках и мероприятиях. Нажмите "add +"
            Добавьте место для начало работы.
          </p>
        </>
      )
    }
    return ""
  }

  return (
    <>
      {/* Если Id не определен, а если определен то смотрим есть ли такой пользователь в БД, если нет запускаем его создание */}
      {TUserQuery?.length !== 0 || IdTelegramApp !== undefined ? (
        <div className="px-4">
          <ol className="relative border-s border-gray-200 dark:border-gray-700">
            {dataPlaces?.length != 0 || dataPlaces != undefined ? (
              dataPlaces?.map(
                (place: Place) =>
                  (
                    <li className="mb-6 ms-4 pt-2" key={place.id}>
                      <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
                      <div className="mb-2 flex justify-between text-l font-semibold text-gray-900 dark:text-white">
                        <div>
                          <button onClick={() => setPlaceId(place.id!)}>
                            {place.name}
                          </button>
                        </div>
                      </div>
                      <div className="flex justify-between mb-2 text-sm font-normal text-gray-500 dark:text-gray-400">
                        <div>
                          {place.id && (
                            <a
                              href="#"
                              className="inline-block px-2 py-0.5 text-sm font-sm rounded-md bg-blue-200 dark:bg-violet-400 dark:text-gray-900"
                              onClick={() => mutation.mutate(place.id!)}
                            >
                              Удалить
                            </a>
                          )}{" "}
                          Ред.
                        </div>
                      </div>
                    </li>
                  ) ?? (<div>не отображается этот кусочек кода</div>)
              )
            ) : ( <div>не отображается этот кусочек кода</div>)}
          </ol>
        </div>
      ) : (
        <>
          {handleCreateTelegramUser()}
        </>
      )}
      {plugForEmptyList}
    </>
  )
}

Ответы (0 шт):