Zenn
⚡

Supabaseでuseswrを使ってみる。

2021/09/07に公開
Next.js
React
JavaScript
SWR
Supabase
tech

Supabase で swr 使いたく、やってみたのでまとめ。

参考 🐈 Github

https://github.com/supabase/supabase/discussions/764

SWR
https://swr.vercel.app/ja

Supabase
https://app.supabase.io/

  1. プロジェクト内に
    pages/apiフォルダを作成し、supabase からデータ取得する処理を書く。

  2. useSWR を使って、pages/apiからデータを取得する。

0.supabase のクライアントの設定

https://supabase.io/docs/reference/javascript/supabase-client

公式サイトのリファレンスを参考に設定していく。

インストールする。

npm install @supabase/supabase-js

srcフォルダ内にlibフォルダを作成する。

プロジェクトのディレクトリ直下に.env.localを作成し、ここで URL と KEY を設定する。

gignoreに.env.localが追加されていることを確認する。

lib/supabase

import { createClient } from "@supabase/supabase-js";

// 環境変数のロード
 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
 const SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY;

// URLの環境変数が設定されていなかったらエラー
 if (!SUPABASE_URL) {
 throw new Error("Missing env.NEXT_PUBLIC_SUPABASE_URL");
 }
// KEYの環境変数が設定されていなかったらエラー

 if (!SUPABASE_KEY) {
 throw new Error("Missing env.NEXT_PUBLIC_SUPABASE_KEY");
 }

 export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
env
NEXT_PUBLIC_SUPABASE_URL = あなたのURL
NEXT_PUBLIC_SUPABASE_KEY = あなたのKEY

1. pages/apiフォルダを作成し、supabase からデータ取得する処理を書く。

API ルートを機能させるため、関数をデフォルトとしてエクスポートする必要がある。

https://nextjs.org/docs/api-routes/introduction

supabase/pages/api
import { NextApiRequest, NextApiResponse } from 'next';
import { supabase } from '../../lib/Supabase';


const getAirportAPI = async (req: NextApiRequest, res: NextApiResponse) => {

  const { data, error } = await supabase.from('tabal名').select();

  // 401 Unauthorized、認証が必要
  if (error) return res.status(401).json({ error: error.message });
  // 200番台は、処理が成功して正常にレスポンスができている状態
  return res.status(200).json(data);
};

<!-- 必ずデフォルトとしてエクスポートする -->
export default getAirportAPI;

2. useSWR を使って、pages/apiからデータを取得する。

表示するページで呼び出す。

useSWR(アクセス先,関数,オプション)で記述する。

index
import useSWR, { SWRConfig } from 'swr';
import { supabase } from '../lib/Supabase';

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function App() {

  // useSWR(アクセス先,関数,オプション)

  const { data, error } = useSWR('../api/supabase', fetcher, { refreshInterval: 1000 });

  // データがとれているか確認する
  console.log(data);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  // 各々のデータの形に応じて変更する
  return <div>hello {data[0].name}!</div>;
}

3. もっと実践！

useSWR で呼出す処理を分ける。
useAirportという関数を作成する。

Supabase に空港のデータベースを作成。
./api/airportに Supabase に接続する処理を作っておく。

useAirportで./api/airportからデータ取得する。

supabase/pages/api/airport
import { NextApiRequest, NextApiResponse } from 'next';
import { supabase } from '../../lib/Supabase';


const getAirportAPI = async (req: NextApiRequest, res: NextApiResponse) => {

// .select();で全カラム取得、.select(カラム名)で選択も可能
  const { data, error } = await supabase.from('airport').select();

  // 401 Unauthorized、認証が必要
  if (error) return res.status(401).json({ error: error.message });
  // 200番台は、処理が成功して正常にレスポンスができている状態
  return res.status(200).json(data);
};

<!-- 必ずデフォルトとしてエクスポートする -->
export default getAirportAPI;
index

// fetcherの記述
const fetcher = (...args) => fetch(...args).then((res) => res.json());

// useAirportという関数をつくる
export const useAirport = () => {
  // useSWR(アクセス先,関数,オプション)
  const { data, error } = useSWR('./api/airport', fetcher);
  return {
    airportData: data,
    isLoading: !error && !data,
    isError: error,
  };
};


export default function App() {
// useAirportで返す値を格納する
  const { airportData, isLoading } = useAirport();

// isLoadingのときはロード中！！を表示する
   if (isLoading) return <p>ロード中！！</p>;

  return (
    <>
    // airportDataを使った内容の記述
      :::
      :::
      :::

  </>
  );
}

まとめ

https://swr.vercel.app/ja/docs/with-nextjs

Discussion