Next.js+TypeScriptで簡単にAPIでデータ取得する方法【useSWR/サンプルコードあり】

2022-05-08

#TypeScript

#Next.js

useSWRとは

VercelのNext.js開発チームが開発したReactフック。

アプリケーションのデータ取得ロジックを簡潔にできます。キャッシュとリクエスト重複削除による速くて軽量な動作を提供しています。

引用

SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。

詳しくはこちら : https://swr.vercel.app/ja

useSWRのインストール

npm install swr

useSWRの使い方

取得したデータは{data}で取り出します。取得エラーなら{error}で取れます。

useSWRの第一引数にkey(APIのURL)、次にそのkeyを渡して取得してくる関数を渡します。

const {data, error} = useSWR('/api/hello',fetcher)

useSWRの使用サンプルコード

例として、pages/api/hello.tsのデータをフェッチしてきます。

呼ばれる側はこちら。GETできるデータはJSON形式で{ text: 'Hello' }です。

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ text: 'Hello' })
}

呼び出し側はこちら

import useSWR from 'swr'

export default function App() {

  const fetcher = async(url:string) =>{
    const res = await(await fetch(url)).json()
    return res.text
  }
  const {data, isValidating} = useSWR('/api/hello',fetcher)

  return(
    <Layout>
      {
        isValidating
        ?<>Loading...</>
        :String(data)
      }
    </Layout>
  )
}