0Pricing
Supabase Backend as a Service · レッスン

Functionsとアプリの統合

クライアント側アプリケーションからデプロイ済みのEdge Functionsを呼び出し、そのレスポンスを処理する方法を学びます。

「Functionsとアプリの統合」はCoddyKit上の無料Supabase Backend as a Serviceレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSupabase Backend as a Service学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Calling Your Edge Functions

You've learned to deploy Edge Functions. Now, let's connect them to your client application! This is where your app truly becomes dynamic.

Integrating functions allows your app to trigger server-side logic, process data, or interact with external services without managing a dedicated backend server.

How Clients Talk to Functions

Supabase Edge Functions are essentially HTTP endpoints. Your client application communicates with them by making standard HTTP requests.

The Supabase client library simplifies this process, providing a clean way to invoke your deployed functions directly from your JavaScript, TypeScript, or other supported client environments.

The `invoke()` Method

The primary method for calling an Edge Function from your client is supabase.functions.invoke().

It takes two main arguments:

  • Function Name: The name of your deployed Edge Function.
  • Options Object (optional): An object to pass data (payload) or configure the request.

Basic Invocation Syntax

Let's look at the basic structure for invoking an Edge Function without sending any specific data. You'll often use async/await for cleaner asynchronous code.

Invoking a 'Hello' Function

Imagine you have a simple Edge Function named 'hello-world' that just returns a 'Hello!' message. Here's how you'd call it:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callHelloWorld() {
  try {
    const { data, error } = await supabase.functions.invoke('hello-world')
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Response:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Call the function to see the output
callHelloWorld()

Passing Data to Functions

Most real-world functions need input data. You can send a JSON payload to your Edge Function using the body property within the options object.

The body will be accessible inside your Edge Function via the request object.

Invoking with a Payload

Let's say you have a function called 'greet-user' that expects a name. Here's how to send that data:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callGreetUser(userName) {
  try {
    const { data, error } = await supabase.functions.invoke('greet-user', {
      body: { name: userName }
    })
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Greeting:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Try it with your name!
callGreetUser('Coddy')

Handling Function Responses

When you invoke an Edge Function, the supabase.functions.invoke() call returns an object containing data and error properties.

  • data: Contains the successful response from your function.
  • error: Contains details if an error occurred during invocation or within the function itself.

Processing the Response

It's crucial to check for errors and handle both success and failure states. Your client application should gracefully manage these scenarios.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function processResponseExample() {
  const payload = { item: 'book', quantity: 2 }
  try {
    const { data, error } = await supabase.functions.invoke('process-order', {
      body: payload
    })

    if (error) {
      console.error('Order processing failed:', error.message)
      // Display an error message to the user
    } else {
      console.log('Order processed successfully:', data)
      // Update UI with success message or results
    }
  } catch (networkError) {
    console.error('Network or unexpected error:', networkError.message)
    // Handle connectivity issues
  }
}

processResponseExample()

Error Handling & Best Practices

Always implement robust error handling. Supabase's invoke method catches network errors in the catch block, and function-specific errors in the returned error object.

  • Frontend Validation: Validate input before sending.
  • User Feedback: Show loading states, success messages, or clear error messages.
  • Logging: Log errors for debugging.

Function Invocation Quiz

You're calling an Edge Function named 'calculate-total' and passing a JSON object { price: 10, quantity: 3 }. Which of the following code snippets correctly invokes the function and handles a potential error?

Functions in Your App

Great job! You've learned how to integrate Supabase Edge Functions into your client-side applications.

  • Use supabase.functions.invoke() to call functions.
  • Pass data using the body property in the options object.
  • Always handle both successful data and potential error responses.

This knowledge empowers you to build dynamic, interactive features powered by serverless logic directly from your app!

よくある質問

「Functionsとアプリの統合」レッスンは無料ですか？

はい。「Functionsとアプリの統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Supabase Backend as a Serviceコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

「Functionsとアプリの統合」で何を学びますか？

クライアント側アプリケーションからデプロイ済みのEdge Functionsを呼び出し、そのレスポンスを処理する方法を学びます。 ブラウザで直接実行するハンズオンコードでSupabase Backend as a Serviceを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Supabase Backend as a Serviceを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSupabase Backend as a Serviceは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Functionsとアプリの統合」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSupabase Backend as a Serviceレッスンでコードを書いて実行できますか？

はい。すべてのSupabase Backend as a Serviceレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Edge Functions入門
  2. 最初のFunctionをデプロイする
  3. Functionsとアプリの統合
  4. シークレット、環境変数、スケジュール実行関数
← Supabase Backend as a Serviceに戻る