React

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

作成日：2022年06月06日

更新日：2022年06月06日

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

【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>
    </>
  );
}

特定のタイトルをクリックすると、タイトルの 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 を受け渡せるように、useStateとonClickで状態管理します。

tsx
const [postId, setPostId] = useState("");

tsx
<li key={post.id} onClick={() => setPostId(post.id)}>
  <p style={{ fontWeight: "bold" }}>{post.title}</p>
</li>

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

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

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

React Query を見てみます。

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

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

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

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

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

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する