Supabaseの拡張機能を使った関数をNext.jsアプリから呼び出す
前回の記事では、Supabaseに関数を作成して、Next.jsのアプリから呼びだしてトランザクション処理をしました。
今回は、拡張機能を使った関数をNext.jsから呼びだすします。
本記事は、Supbaseが公開している動画のコードをベースに、ステップバイステップで自身の環境で試せるようにアレンジしてお届けします。
拡張機能を有効化
Supbaseのダッシュボードで拡張機能を有効にします。
Databaseで、サイドメニューの「Extensions」を選択します。拡張の一覧が表示されるので、検索ボックスに「http」と入力すると、一覧が絞り込まれます。
絞り込まれた一覧にある「HTTP」のトグルをオンにして有効にします。
これで、関数からHTTPコールができるようになります。
Kanya.rest
有効にした拡張機能を使って、Kanya.restのAPIを呼びだします。
このサイトは、カニア・ウェストというラッパーの歌詞をランダムで返してくれます。
APIをコールすると、次のようなJSONが返ってきます。
{
quote: "Today is the best day ever and tomorrow's going to be even better"
}
関数を作成
それでは、関数を作成します。
次のSQLをSQL Editorで実行します。
create or replace function talk_to_kanye(name text)
returns text
language plpgsql
as $$
declare
kayne_quote text;
begin
select content::json->>'quote'
into kayne_quote
from http_get('https://api.kanye.rest/');
return concat('Hey ', name, '. ', kayne_quote);
end;
$$;
拡張機能によりhttp_getという関数が使えるようになります。この関数にURLを引数で渡して実行すると、APIをコールできます。返ってきたレスポンスをcontent::jsonで取得して、quoteキーの内容を変数に格納します。
Netx.jsアプリから呼びだす
セットアップ
前回の記事をベースにしていきます。
degit経由で取得して、必要なパッケージをインストールします。
npx degit hirotaka/examples/supabase-nextjs-database#atlanta-0.0.5 supabase-nextjs-database
cd supabase-nextjs-database
npm install
環境変数のセットなどは次を参考にしくてださい。
コンポーネントを作成
関数を呼びだして、返ってきた内容を表示するコンポーネントを作成します。
import { useState, useEffect } from 'react'
import { useUser } from '@/contexts/user'
import { supabase } from '@/lib/supabase-client'
export default function Kanye() {
const { user } = useUser()
const [loading, setLoading] = useState(false)
const [quote, setQuote] = useState()
useEffect(() => {
const rpcTalkToKanye = async () => {
try {
setLoading(true)
const { data } = await supabase.rpc('talk_to_kanye', {
name: user.name,
})
setQuote(data)
} catch (error) {
alert(error.message)
} finally {
setLoading(false)
}
}
if (user) rpcTalkToKanye()
}, [user])
return (
<div className="mt-6">
<label className="block">Kanye Quote</label>
<p className="mt-2">{loading ? '読み込み中...' : quote}</p>
</div>
)
}
rpcメソッドで関数名とユーザー名を引数で渡して実行します。返ってきた結果をquoteステートに保持します。
ダッシュボードに表示
先ほど作成したコンポーネントをインポートします。
ユーザーの名前が必要なので、プロフィールが作成済みの場合のみコンポーントを表示するようにします。
@@ -2,6 +2,7 @@ import { useUser } from '@/contexts/user'
import Message from '@/components/message'
import Profile from '@/components/profile'
import Counter from '@/components/counter'
+import Kanye from '@/components/kanye'
export default function Dashboard() {
const { logout, user } = useUser()
@@ -11,7 +12,12 @@ export default function Dashboard() {
<h1 className="text-2xl">ダッシュボード</h1>
<Message />
<Profile />
- {user.profile && <Counter />}
+ {user.profile && (
+ <>
+ <Counter />
+ <Kanye />
+ </>
+ )}
<div className="mt-6">
<button className="secondary" onClick={() => logout()}>
ログアウト
ダッシュボードを表示すると、下の方にランダムで歌詞が表示されることを確認できます。
ここまでのコードはリポジトリーで確認してください。
おわりに
Supbaseでは、拡張機能が用意されているので、管理画面からトグルをオンにしてすぐに使えるので便利です。
どのような拡張機能が使えるかはこちらも参考にしてください。
参考
Supbaseの知識を深めるために、ドキュメントの翻訳に取り組んでいます。
関数について、こちらも参考にしてください。
Discussion