WIX Fetch API returns empty JSON (VELO)

Question

Overview

I am using AgileCRM. I would like to create new contacts in this CRM when users complete a form. I have been successful in doing just that within PostMan. I am trying to do a simple "GET" request from WIX so I can understand VELO code before I get into my POST request (create contacts).

Problem

When I make GET request I get a status of 200, I get an empty JSON as a response and in my request header is says my method is a POST which is not what I defined as the method.

Question

What is it that I am doing wrong here that is causing both an empty response and incorrect method?

Setup

My front-end imports a backend function which handles the basic auth and fetching. I did it this way as when I did this from the front-end I got a CORS issue.

//agileapi.jsw
import {fetch} from 'wix-fetch';
import base64 from "nodejs-base64-encode";
import {getSecret} from 'wix-secrets-backend';

export async function getAPIKey() {
  return await getSecret("AGILERESTAPI");
}

export async function getUsername() {
  return await getSecret("AGILEUSERNAME");
}

let password = getAPIKey()
let username = getUsername()

let options = {
    "method": "GET",
    headers: {
        "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
        "Content-Type": "application/json",
    }
}
let url = "https://photodynamic.agilecrm.com/dev/api/contacts";
export async function getContacts() {
   await fetch(url, options)
    .then( (response) => {
        if(response.ok) {
            return response.json()
        }
        else {
            return Promise.reject('Fetch did not succeed');
        }}
    )
    .then((json) => console.log(json))
    .catch((err) => console.log(err));
}

//wix debug page code
import {getContacts} from 'backend/agileapi'

$w.onReady(function (){
   $w("#getContacts").onClick( (event) => {
        getContacts()
    })
});

score 1 · Answer 1 · answered Sep 03 '21 at 14:35

You have to wait until the promises are fulfilled. The password and username in your code it's not a string it's a Promise.

//agileapi.jsw
import { fetch } from 'wix-fetch';
import base64 from "nodejs-base64-encode";
import { getSecret } from 'wix-secrets-backend';

const url = "https://photodynamic.agilecrm.com/dev/api/contacts";

export async function getContacts() {
  // Wait for until all promises to be fulfilled
  const [password, username] = await Promise.all([
    getSecret("AGILERESTAPI"),
    getSecret("AGILEUSERNAME")
  ])

  const options = {
    method: "GET",
    headers: {
      // Now the password and username are the strings
      "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
      "Content-Type": "application/json",
    }
  }

  // Returns the API result to client (browser)
  return fetch(url, options)
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
      return Promise.reject('Fetch did not succeed');
    });
}

Page Code

import { getContacts } from 'backend/agileapi'

$w.onReady(function () {
  $w("#getContacts").onClick((event) => {
    getContacts()
      .then((json) => {
        // Your json
        console.log(json);
      })
      .catch((error) => {
        // Reason of error
        console.log(error)
      });
  })
});

score 0 · Answer 2 · answered May 14 '21 at 16:45

I was able to resolve this. The rest api returned xml by default. By adding the the following to my headers allowed me to get it formatted as JSON.

let options = {
"method": "GET",
    headers: {
        "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
        "Content-Type": "application/json",
        // added this to resolve the issue
        "Accept": "application/json"
    }

}

This solution is specific to AgileCRM and may differ with the API you are using. Hopefully my above code will others trying to do API calls with WIX Velo.

WIX Fetch API returns empty JSON (VELO)

Overview

Problem

Question

Setup

2 Answers2