0Pricing
Supabase Backend as a Service · Ders

İşlevleri Uygulamanızla Entegre Etme

Devreye aldığınız Edge Functions'ı istemci tarafı uygulamanızdan nasıl çağıracağınızı ve yanıtlarını nasıl işleyeceğinizi öğrenin.

İşlevleri Uygulamanızla Entegre Etme, CoddyKit'te ücretsiz bir Supabase Backend as a Service dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Supabase Backend as a Service öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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!

Sıkça Sorulan Sorular

“İşlevleri Uygulamanızla Entegre Etme” dersi ücretsiz mi?

Evet — “İşlevleri Uygulamanızla Entegre Etme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Supabase Backend as a Service kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.

“İşlevleri Uygulamanızla Entegre Etme” dersinde ne öğreneceğim?

Devreye aldığınız Edge Functions'ı istemci tarafı uygulamanızdan nasıl çağıracağınızı ve yanıtlarını nasıl işleyeceğinizi öğrenin. Supabase Backend as a Service ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Supabase Backend as a Service öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Supabase Backend as a Service, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İşlevleri Uygulamanızla Entegre Etme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Supabase Backend as a Service dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Supabase Backend as a Service dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Edge Functions'a Giriş
  2. İlk İşlevinizi Devreye Alma
  3. İşlevleri Uygulamanızla Entegre Etme
  4. Gizli Bilgiler, Ortam Değişkenleri ve Zamanlanmış İşlevler
← Supabase Backend as a Service Sayfasına Dön