Calling external APIs from Edge Functions in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from an external API using fetch.

Supabase

const response = await fetch([1]);
const data = await response.json();

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

A'https://api.example.com/data'

Bapi.example.com/data

Cresponse.json()

Dfetch('https://api.example.com/data')

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the URL in quotes

Passing the fetch call itself instead of the URL

The fetch function requires the full URL as a string to call the external API.

2fill in blank

medium

Complete the code to set the HTTP method to POST in the fetch options.

Supabase

const response = await fetch('https://api.example.com/data', {
  method: [1]
});

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

A'PUT'

B'GET'

C'POST'

D'DELETE'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' when sending data

Not putting the method value in quotes

To send data to the API, the HTTP method must be set to 'POST'.

3fill in blank

hard

Fix the error in setting the request headers to send JSON data.

Supabase

const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: [1],
  body: JSON.stringify({ key: 'value' })
});

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

A{ 'Content-Type': application/json }

B{ Content-Type: 'application/json' }

C{ 'content-type': 'application/json' }

D{ 'Content-Type': 'application/json' }

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the header key

Not quoting the header value

Using wrong case for 'Content-Type'

Headers must be an object with string keys and string values. The key 'Content-Type' must be quoted and the value must be a string.

4fill in blank

hard

Fill both blanks to correctly handle the fetch response and parse JSON.

Supabase

const response = await fetch('https://api.example.com/data');
const [1] = await response.[2]();

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

Adata

Bjson

Ctext

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() instead of response.json()

Not awaiting the response parsing

The response object has a method json() to parse the response body as JSON. We store the result in a variable, commonly named 'data'.

5fill in blank

hard

Fill all three blanks to send a POST request with JSON body and handle the response.

Supabase

const response = await fetch([1], {
  method: [2],
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ message: 'Hello' })
});
const result = await response.[3]();

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

A'https://api.example.com/send'

B'POST'

Cjson

D'GET'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' for sending data

Not quoting the URL or method

Parsing response with text() instead of json()

To send data, use the POST method and the correct URL. Then parse the response with response.json().