๋๋จธ์ง ๋ถ๋ถ์ React-query / Fetching Data ์ ๋์ผํ๋ค.
result => { isLoading, data, isError, error }
import { useQuery } from 'react-query';
์ํ๊ฐ์ด ์๋ฌ๋ฉด ์๋์ ์๋ฌ๋ฉ์ธ์ง๋ฅผ ๊ฐ์ ธ์์ ๋ณด์ฌ์ฃผ๊ธฐ
Request failed with status code 404
if (isError) {
return <h2>{error.message}</h2>;
}
import { useQuery } from 'react-query'; // import data fetching Hook
import axios from 'axios';
export const RQSuperHeroesPage = () => {
// Hook ๋ถ๋ฌ์ค๊ธฐ // 1. (unique key) ์ 2. (promise ๋ฅผ ๋ฆฌํดํ๋ ํจ์)๋ฅผ ์ธ์๋ก ๋ฐ๋๋ค.
// ex) ํจ์๋ json server ๋ก๋ถํฐ get request ๋ฅผ ํ๋ค.
// query hook ์ ํตํด์ ๋ฆฌํด๋ query result ๋ฅผ ์ฌ์ฉํ๋ค.
// results ๋ ํ์ฌ query ์์ ๋ด๊ฐ ํ์๋กํ ๋ชจ๋ ๊ฒ์ด ๋ด๊ฒจ์๋ค.
// results ์์์ ๋ด๊ฐ ํ์ํ ์์๋ง destructuring ํ๋ค. result => { isError, ..}
// useQuery ์ ๋๋ฒ์งธ ์ธ์์ inline ์ผ๋ก data fetching ํจ์๋ฅผ ๋ฃ์ง ์๊ณ
// ๋ฐ์์ ์ ์ธํ๋ ๊ฒ(fetchSuperHeroes)์ด react query ์ ์ผ๋ฐ์ ์ธ pattern
const fetchSuperHeroes = () => {
return axios.get('http://localhost:5000/superheroes1');
};
const { isLoading, data, isError, error } = useQuery(
'super-heroes',
fetchSuperHeroes
);
if (isLoading) {
return <h2>Loading...</h2>;
}
// ๋ถ๋ฌ์จ ๊ฐ์ ํ์ฉํด์ jsx ๋ ๋๋ง ํ๊ธฐ
if (isError) {
return <h2>{error.message}</h2>;
}
return (
<>
<h2>React Query Super Heroes Page</h2>
{data?.data.map((hero) => {
return <div key={hero.name}>{hero.name}</div>;
})}
</>
);
};
React Query Tutorial ์ฐธ๊ณ ํ๋ฉฐ ๊ณต๋ถํ ๋ด์ฉ์ ๋๋ค.
ํน์ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ ๊ณผ์ธ ๋ฌธ์ํ๋ ค๋ฉด ์ด๋๋ก ํด์ผํ๋์..?