【React】React QueryでAPIから特定のデータを取得する
React

【React】React QueryでAPIから特定のデータを取得する

作成日:2022年06月06日
更新日:2022年06月06日

前回は、React Query でキャッシュを設定します。

react-react-query-staletime-cachetime

【React】React Queryでキャッシュを設定する

今回は、React Query で API から特定のデータを取得します。

JSON Placeholder(https://jsonplaceholder.typicode.com/)から Post データを取得しました。

tsx
import React from "react";
import { useQuery } from "react-query";
interface Post {
userId: string;
id: string;
title: string;
body: string;
}
export default function Page() {
const { isLoading, isError, data } = useQuery("post", () =>
fetch("https://jsonplaceholder.typicode.com/posts/").then((res) =>
res.json()
)
);
if (isLoading) return <>Loading...</>;
if (isError) return <>Error</>;
return (
<>
<ul>
{data.map((post: Post) => (
<li key={post.id}>
<p style={{ fontWeight: "bold" }}>{post.title}</p>
</li>
))}
</ul>
</>
);
}

image2

特定のタイトルをクリックすると、タイトルの Post 詳細を画面上に表示するようにします。

まずは、Detail コンポーネントを作成します。

tsx
import React from "react";
import { useQuery } from "react-query";
export default function Detail({ postId }: { postId: string }) {
const { isLoading, isError, data } = useQuery("post", () =>
fetch(`https://jsonplaceholder.typicode.com/posts/`).then((res) =>
res.json()
)
);
if (isLoading) return <>Loading...</>;
if (isError) return <>Error</>;
return (
<>
<h1>{data.title}</h1>
<p>{data.body}</p>
</>
);
}

useQuery でクエリキーを使うことで、特定のデータを取得することができます。

useQuery の後のクエリ名を『[]』で囲みます。

クエリ名の後に『,』を追加し、postId を指定します。

tsx
const { isLoading, isError, data } = useQuery(["post", postId], () =>
fetch(`https://jsonplaceholder.typicode.com/posts/`).then((res) => res.json())
);

JSONPlaceholder では、posts/の後に post の id を指定することで、詳細データを取得することができます。 URL の後に、${postID}を追加しましょう。

tsx
const { isLoading, isError, data } = useQuery(["post", postId], () =>
fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then((res) =>
res.json()
)
);

Detail コンポーネントの作成が完了したので、一覧画面のコンポーネントに、Detail コンポーネントを追加します。

tsx
return (
<>
<Detail postId={postId} />
<ul>
{data.map((post: Post) => (
<li key={post.id}>
<p style={{ fontWeight: "bold" }}>{post.title}</p>
</li>
))}
</ul>
</>
);

タイトルをクリックすると post の id を受け渡せるように、useStateonClickで状態管理します。

tsx
const [postId, setPostId] = useState("");
tsx
<li key={post.id} onClick={() => setPostId(post.id)}>
<p style={{ fontWeight: "bold" }}>{post.title}</p>
</li>

一通り完成したので、確認してみましょう。

image3

タイトルをクリックすると、

image4

タイトルの内容が表示されました。

React Query を見てみます。

image5

post の id1 の内容を取得することができています。

ちなみに他のタイトルをクリックすると、

image6

他のタイトル内容がアクティブになり、内容を表示することができました。

© 2024あずきぱんウェブスタジオ