Velo: Accessing 3rd-Party Services with the Fetch API

Visit the Velo by Wix website to onboard and continue learning.

Using Velo you can write code to access 3rd-party web services. The Fetch API contains two functions for sending HTTP requests: getJSON() and fetch(). For simple GET requests for retrieving a JSON object we recommend using getJSON(). For more complex requests, fetch() provides greater functionality.

Although you can use the Fetch API in frontend (client-side) or backend (server-side) code, it's usually best to send requests to external APIs from your backend code. This is more secure, especially if the API requires a key or other authentication, and it avoids CORS issues that can occur when sending some requests from the front end.
Note:
Because all Wix sites use HTTPS, you can't request HTTP content from a service in your site's code. Invalid requests cause an error that you can see using your browser's developer tools

Making a GET Request Using getJSON( )

Suppose we want to call a 3rd-party service to GET a set of greetings in random languages at the click of a button, as demonstrated in the example below:

First we need to write a getGreetings() function in a backend web module to make our service call. (For reference, we called the web module dataFetcher.jsw. Later we will need to import getGreetings() from it in our frontend code.)

1import { getJSON } from 'wix-fetch';
2
3// GET call using getJSON
4export async function getGreetings() {
5  const response = await getJSON('https://velo-examples.wixsite.com/training-tester/_functions/greetings');
6  return response;
7}

We start by importing the Fetch API's getJSON() function, then in our getGreetings() function we simply call getJSON() and return the response.

Now we can write frontend code to respond to our "Fetch Greetings" button click by calling our getGreetings() backend function and displaying the results.

1import { getGreetings } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6  $w('#fetchAllButton').onClick(async () => {
7    $w('#fetchAllButton').disable();
8
9    const fetchedData = await getGreetings();
10    const repeaterData = fetchedData.map(item => {
11      item._id = item.id.toString();
12      return item;
13    });
14
15    $w('#helloRepeater').data = repeaterData;
16    $w('#helloRepeater').show();
17        
18    $w('#fetchAllButton').enable();
19  });
20
21  $w('#helloRepeater').onItemReady( ($item, itemData) => {
22    $item('#repeatedLanguageText').text = itemData.language;
23    $item('#repeatedHelloText').text = itemData.greeting;
24  });
25});

We start by importing our getGreetings() function from our backend web module dataFetcher.jsw.

When the "Fetch Greetings" button is clicked, we call getGreetings() and await the response. When it arrives, we convert the recieved ids to strings and use them to populate a repeater.

For more information on the above example and to experiment with it yourself, see our Hello Fetch example page.

Making a GET Request Using fetch( )

Now lets consider a similar example using fetch().

Suppose we want to call a 3rd-party service to GET a greeting in a random language at the click of a button, as demonstrated in the example below:

First we need to write a getRandomGreeting() function in a backend web module to make our service call. (For reference, we called the web module dataFetcher.jsw. Later we will need to import getRandomGreeting() from it in our frontend code.)

1import { fetch } from 'wix-fetch';
2
3// GET call using fetch
4export async function getRandomGreeting() {
5  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/randomgreeting');
6  if(response.ok) {
7    const json = await response.json();
8    return json.greeting;
9  } else {
10    return Promise.reject("Fetch did not succeed");
11  }
12}

We start by importing the Fetch API's fetch() function which we call in our getRandomGreeting() code. If the call succeeded, we convert the response into a JSON file, and then return its greeting object. If it failed we return a Promise.reject message.

Now we can write frontend code to respond to our "Fetch Random Greeting" button click by calling our getRandomGreeting() backend function and displaying the results.

1import { getRandomGreeting } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6  $w('#fetchRandomButton').onClick(async () => {
7    $w('#fetchRandomButton').disable();
8
9    const fetchedData = await getRandomGreeting();
10
11    $w('#languageText').text = fetchedData.language;
12    $w('#helloText').text = fetchedData.message;
13
14    $w('#languageText').show();
15    $w('#helloText').show();
16
17    $w('#fetchRandomButton').enable();
18  });
19});

We start by importing our getRandomGreeting() function from our backend web module dataFetcher.jsw.

When the "Fetch Random Greeting" button is clicked, we call getRandomGreeting() and await the response. When it arrives, we use our text fields to dsiplay the data.

For more information on the above example and to experiment with it yourself, see our Hello Fetch example page.

Making a POST Request Using fetch( )

fetch() can also be used to make other types of requests to 3rd-party services, such as POST.

Suppose we want to call a 3rd-party service to POST a greeting in a specified language at the click of a button, as demonstrated in the example below:

First we need to write a postGreeting() function in a backend web module to make our service call. (For reference, we called the web module dataFetcher.jsw. Later we will need to import postGreeting() from it in our frontend code.)

1import { fetch } from 'wix-fetch';
2
3// POST call using fetch
4export async function postGreeting(language, greeting) {
5  const jsonBody = {
6    language,
7    greeting
8  };
9    
10  const fetchOptions = {
11    method: 'post',
12    headers: 'application/json',
13    body: JSON.stringify(jsonBody)
14  };
15
16  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions); 
17  return response.json();
18}

We start by importing the Fetch API's fetch() which we call in our postGreeting() function.

Our function accepts language and greeting parameters, which will be passed from the frontend, and POSTs them to the 3rd-party service.

This time we need to pass additional options parameters to fetch() which we called fetchOptions. These options contain the requested method (post), a header describing the format of the data being sent (application/json) and a jsonBody object containing the language and greeting values.

Now we can write frontend code to respond to our "Post Greeting" button click by calling our postGreeting() backend function.

1import { postGreeting} from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6    $w('#postButton').onClick(async () => {
7        $w('#postButton').disable();
8
9        const putResponse = await postGreeting($w('#languageInput').value, $w('#greetingInput').value);
10
11        console.log(putResponse);
12
13        if(putResponse.success) {
14            $w('#successIcon').show();
15            $w('#errorIcon').hide();
16            $w('#responseMessage').text = putResponse.success;
17        }
18        else {
19            $w('#successIcon').hide();
20            $w('#errorIcon').show();
21            $w('#responseMessage').text = putResponse.error;
22        }
23
24        $w('#responseMessage').show();
25        $w('#postButton').enable();
26    });
27});

We start by importing our postGreeting() function from our backend web module dataFetcher.jsw.

When the "Post Greeting" button is clicked, we call postGreeting() with language and greeting vales from our corresponding input elements and await the response. When it arrives, we use a text field to show whether the call succeeded or failed.

For more information on the above example and to experiment with it yourself, see our Hello Fetch example page.

Working With API Keys

Often you will need an API key to access 3rd-party web services.
When working with API keys we recommend:
  1. Storing the API key in the Secrets Manager.
  2. Writing code that will extract the API key using the Secrets API and making the service call in a backend web module. This avoids the security concerns, such as exposing API keys, that would arise if you tried to call the service from your client-side code. 
For example, suppose you want to call a 3rd-party weather service to find the current weather in a city the user has chosen.

First, you create a function in a backend web module to call the weather service and retrieve the data:
1//serviceModule.jsw
2
3import {fetch} from 'wix-fetch'; 
4import {getSecret} from 'wix-secrets-backend';
5
6export async function getCurrentTemp(city) {
7  const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
8  const key = await getSecret(WeatherApiKey);
9    
10  let fullUrl = url + city + '&APPID=' + key + '&units=imperial'; 
11  
12  return fetch(fullUrl, {method: 'get'})
13    .then(response => response.json())
14    .then(json => json.main.temp);
15}

In this example, you start by importing the functions needed to to make https requests and to get secrets from the Secrets Manager. Then you create a new function that takes in a city whose weather you want to look up. The function begins by constructing the full URL for the fetch request. The URL is made up of the service's address and an API key. To make this example work, you'd have to store your API in the Secrets Manager with the name "WeatherApiKey". Then the function makes the actual request. When it receives a response, it pulls out the temperature data. That temperature data will be received by the client-side call.

Did this help?

|
Hire a Velo Web Developer
Need a little extra help with your site? Hire a developer from the Wix Marketplace to build and deploy advanced web applications.
Get Started