「RemixV2」で外部APIにGETリクエストをする方法

外部APIはremixの

• json
• LoaderFunction
• useLoaderData

を使います。

https://remix.run/docs/en/main/guides/data-loading

loader()を定義して、コンポーネントの中でuseLoaderData()で呼び出しています。

例）coingeckoからビットコインの価格を取得して表示する

_index.tsx

import { json, LoaderFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

// CoinGecko APIからビットコインの価格を取得するためのローダー関数
export const loader: LoaderFunction = async () => {
  const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd');
  const data = await response.json();

  // ビットコインの価格を取得
  const bitcoinPrice = data.bitcoin.usd;

  return json({ bitcoinPrice });
};

// ビットコインの価格を表示するコンポーネント
export default function BitcoinPrice() {
  const { bitcoinPrice } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>ビットコインの価格</h1>
      <p>現在のビットコイン価格: ${bitcoinPrice}</p>
    </div>
  );
}