Why Edge Functions handle server-side logic in Supabase - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an Edge Function that returns a simple message.

Supabase

export async function [1](request) {
  return new Response('Hello from Edge Function!');
}

Drag options to blanks, or click blank then click option'

Afetch

BhandleRequest

Crun

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name like 'handleRequest' or 'run' will not work.

The Edge Function must export a fetch function to handle incoming requests.

2fill in blank

medium

Complete the code to read JSON data from the request body inside an Edge Function.

Supabase

export async function fetch(request) {
  const data = await request.[1]();
  return new Response(JSON.stringify(data));
}

Drag options to blanks, or click blank then click option'

AformData

Btext

Cbody

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() returns raw text, not parsed JSON.

To parse JSON data from the request body, use request.json().

3fill in blank

hard

Fix the error in the Edge Function that tries to access environment variables.

Supabase

export async function fetch(request) {
  const apiKey = [1].get('API_KEY');
  return new Response(apiKey);
}

Drag options to blanks, or click blank then click option'

Awindow.env

Bglobal.env

CDeno.env

Denv

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access environment variables via window, process.env or global will fail.

Environment variables are accessed via Deno.env.get('API_KEY') in Edge Functions.

4fill in blank

hard

Fill both blanks to create a response with JSON content and proper headers.

Supabase

export async function fetch(request) {
  const data = { message: 'Hello' };
  return new Response(JSON.stringify(data), { [1]: { 'Content-Type': [2] } });
}

Drag options to blanks, or click blank then click option'

Aheaders

B'application/json'

C'text/plain'

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using body instead of headers in the options object.

The response headers must include Content-Type: 'application/json' to indicate JSON data.

5fill in blank

hard

Fill all three blanks to handle a POST request and return a JSON response with status 201.

Supabase

export async function fetch(request) {
  if (request.method === [1]) {
    const data = await request.[2]();
    return new Response(JSON.stringify(data), { status: [3], headers: { 'Content-Type': 'application/json' } });
  }
  return new Response('Method Not Allowed', { status: 405 });
}

Drag options to blanks, or click blank then click option'

A'POST'

Bjson

C201

D'GET'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method string or status code.

To handle POST requests, check request.method === 'POST', parse JSON body with request.json(), and respond with status 201 for created.