【Next.js】axios-hooksを使用したHTTPリクエストの実装例

今回は、「Next.js + TypeScript」、「axios-hooks」を使用したHTTPリクエストの実装例を紹介していきます。

スポンサーリンク

検証環境

検証に使用した環境／ライブラリを次に記載します。

  • React
    • バージョン：18.2.0
  • Next.js
    • バージョン：12.2.0
  • axios
    • バージョン：0.27.2
  • axios-hooks
    • バージョン：3.1.5

動作例

プロジェクト情報の詳細と動作例は、次のサイトで確認することができます。

https://codesandbox.io/s/next-js-typescript-axios-hooks-wz9r6n
codesandbox.io

プログラム内容

hooks

「axios-hooks」のインスタンス作成とHTTPリクエストのコンポーネントを作成します。

【components/hooks/useAxiosHook.ts】

「axios-hooks」を使用するためのコンポーネントの全体ソースコードは、次のようになります。

import axios from "axios";
import { makeUseAxios } from "axios-hooks";

const instance = axios.create({
  baseURL: "https://httpbin.org/",
  timeout: 10000
});

const useAxios = makeUseAxios({
  axios: instance
});

export default useAxios;

「axios.create」を使用して「axios」のインスタンスを作成します。設定情報の詳細については、次の「axios」の公式サイトで確認できます。

GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - axios/axios
github.com

「makeUseAxios」を使用して「axios-hooks」のインスタンスを作成します。設定情報に作成した「axios」のインスタンスを指定します。

【components/hooks/useAxiosHook.ts】

「axios-hooks」を使用したHTTPリクエストのコンポーネントの全体ソースコードは、次のようになります。

import useAxios from "./useAxiosHook";

const useApi = () => {
  const [{ data, loading, error, response }, executeGet] = useAxios(
    {},
    { manual: true }
  );
  const execute = async (code: number) => {
    return executeGet({
      method: "GET",
      url: "/status/" + code
    });
  };
  return { data, loading, error, response, execute };
};

export default useApi;

「axios-hooks」を使用するための情報を取得します。

const [{ data, loading, error, response }, executeGet] = useAxios(
  {},
  { manual: true }
);

取得したオブジェクトは、次の情報を取得できます。

  • data：リクエスト成功時の情報が設定されます。
  • loading：リクエスト処理実行中かどうかの情報が設定されます。
  • error：リクエスト失敗時の情報が設定されます。
  • response：リクエスト成功時のオブジェクト情報が設定されます。HTTPステータスコードなどの情報を取得することができます。
  • executeGet：リクエストをするメソッド名を指定します。メソッド名は任意の値に変更することができます。

オプション情報には、次の情報を指定しています。

  • manual：リクエスト処理を手動で実行するかどうかの情報を設定します。trueを指定しない場合は、画面表示のタイミングでリクエスト処理が実行される動作になります。

取得できる値、オプション情報などの設定については、「axios-hooks」の公式サイトで確認できます。

GitHub - simoneb/axios-hooks: 🦆 React hooks for axios
🦆 React hooks for axios. Contribute to simoneb/axios-hooks development by creating an account on GitHub.
github.com

リクエスト処理を実行する処理は、次のようになります。

const execute = async (code: number) => {
  return executeGet({
    method: "GET",
    url: "/status/" + code
  });
};

実行処理の指定している値は、次の情報になります。

  • method：HTTPメソッドを指定します。
  • url：リクエストするときのURLを指定します。例では、引数の値を使用してURLを変更している処理になります。

pages

画面表示でボタン押下したときにリクエスト処理を実施する処理を作成します。

【pages/index.tsx】

画面からリクエスト処理を実施するための全体ソースコードは、次のようになります。

import type { NextPage } from "next";
import useApi from "../components/hooks/useApi";

const Index: NextPage = () => {
  const { data, loading, error, response, execute } = useApi();

  const handleClickGet = async (code: number) => {
    execute(code);
  };

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <div>Next.js + TypeScript + axios-hooks</div>
      <div>
        <button onClick={() => handleClickGet(200)}>
          Get StatusCode = 200
        </button>
      </div>
      <div>
        <button onClick={() => handleClickGet(400)}>
          Get StatusCode = 400
        </button>
      </div>
      <div>
        <div>[data]</div>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
      <div>
        <div>[response]</div>
        <pre>{JSON.stringify(response, null, 2)}</pre>
      </div>
      <div>
        <div>[error]</div>
        <pre>{JSON.stringify(error, null, 2)}</pre>
      </div>
    </div>
  );
};

export default Index;

作成したコンポーネントを使用することでリクエスト情報の取得などをすることができます。ボタン押下したときにリクエスト処理を実施しています。処理が終わると取得した情報を画面に出力する処理を実施しています。

まとめ

「axios-hooks」を使用したリクエスト処理とレスポンス情報を取得した結果を表示する実装例を紹介しました。

参考資料