0Pricing
Supabase Backend as a Service · Leçon

Intégration des fonctions à votre application

Apprendre à appeler vos fonctions Edge déployées depuis votre application côté client et à traiter leurs réponses.

Intégration des fonctions à votre application est une leçon Supabase Backend as a Service gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Supabase Backend as a Service, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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!

Questions Fréquemment Posées

La leçon « Intégration des fonctions à votre application » est-elle gratuite ?

Oui — le texte complet de « Intégration des fonctions à votre application » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Supabase Backend as a Service, passe à CoddyKit PRO. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Intégration des fonctions à votre application » ?

Apprendre à appeler vos fonctions Edge déployées depuis votre application côté client et à traiter leurs réponses. Tu pratiques Supabase Backend as a Service avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Supabase Backend as a Service ?

Aucune expérience préalable n'est requise. Supabase Backend as a Service sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Intégration des fonctions à votre application » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Supabase Backend as a Service ?

Oui. Chaque leçon Supabase Backend as a Service inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Introduction aux fonctions Edge
  2. Déploiement de votre première fonction
  3. Intégration des fonctions à votre application
  4. Secrets, variables d’environnement et fonctions planifiées
← Retour à Supabase Backend as a Service