JavaScript React

React useQueryを使ってみる

最近はreactを勉強しているなおぴです。

今回はその中でuseQueryを使ってAPIからデータを取得するということを

学んだので簡単にまとめていきたいなと思います！

 

初期設定

まずはインストール

npm i -D react-query

次にuseQueryの動作確認を行う前に親コンポーネントのAppコンポーネントのApp.tsxで

QueryClientとQueryClientProviderの設定を行う必要があります。

QueryClientProviderで要素を包みQueryClientをインスタンス化したqueryclientを設定します。

QueryClientはキャッシュ情報のやりとりに利用されます。

色々書いてありますが参考程度にしてみてください。

 App.tsx
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from "./pages/home";
import { Login } from "./pages/login";
import { Register } from "./pages/retister";
import { QueryClient, QueryClientProvider } from "react-query";
const App = () => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
mutations: {
retry: false,
},
},
});
return (
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="register" element={<Register />} />
<Route path="login" element={<Login />} />
</Routes>
</BrowserRouter>
</QueryClientProvider>
);
};
export default App;

 

API作成

 PostApi.ts
import { Post } from "../../types/Post";
import axios from "axios";
const getPosts = async () => {
const { data } = await axios.get<Post[]>("api/posts");
return data;
};
export { getPosts };

 PostQuery.ts
import { useQuery, useMutation, useQueryClient } from "react-query";
import * as api from "../api/post/PostApi";
import { AxiosError } from "axios";
const usePosts = () => {
return useQuery("posts", () => api.getPosts());
};
export { usePosts };

最後に作成した関数を使用して呼び出しましょう。

 index.ts
import { Link } from "react-router-dom";
import styled from "styled-components";
import React from "react";
import { usePosts } from "../../query/PostQuery";
export const Home = () => {
const { data: posts, status } = usePosts();
if (status === "loading") {
return <h1>ローディング中</h1>;
} else if (status === "error") {
return <h1>データの読み込みに失敗しました</h1>;
} else if (!posts || posts.length <= 0) {
return <h1>登録された情報はありません</h1>;
}
console.log(posts);
return (
<Sbody>
<SHeader>header</SHeader>
<Sdiv>
<Link to={`/login/`}>
<Snav>left</Snav>
</Link>
<Smain>
{posts.map((post) => {
return <li key={post.id}>{post.content}</li>;
})}
</Smain>
<Saside>right</Saside>
</Sdiv>
<Sfooter>footer</Sfooter>
</Sbody>
);
};

-JavaScript, React