react-query 기본 설정

yonghee·2023년 9월 10일
0
import React, { useState, useEffect, useCallback } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import api from "./api/api";

function App() {
  const [search, setSearch] = useState<any>();

  const { isLoading, isError, data, error } = useQuery({
    queryKey: ["weather"],
    queryFn: async () => await api(search),

    staleTime: 5000,
  });
  console.log(isLoading);
  console.log(data);

  if (isLoading) return <div>조금만 기다려봐</div>;
  if (isError) return <div>에러 났어</div>;

  return (
    <>
      <button onClick={() => search}>검색</button>
      <input
        type="text"
        onChange={(e) =>
          // console.log(e.target.value)
          setSearch(e.target.value)
        }
      />
      <div>{data[0].name}</div>
    </>
  );
}

export default App;

import React from "react";
import axios from "axios";

export default function api(city: any) {
  console.log("호출 되고 있니", city);
  const data = axios
    .get(
      `http://api.openweathermap.org/geo/1.0/direct?q=${
        city === undefined ? "seoul" : city
      }&limit=5&appid=${""}`
    )
    .then(function (response) {
      // 성공한 경우 실행
      console.log(response);
      return response.data;
    });
  console.log(data);
  return data;
}
profile
필요할 때 남기는 날것의 기록 공간

0개의 댓글