Question:
Continuation of my previous question (here), I’m developing a Blocks App Extension and tryign to perform the most basic task of getting backend data on the frontend. After giving up on the WebMethod approach, I’m trying to do it through exposing an http-functions.js “Blocks App API” Endpoint and fetching it from the endpoint url. I’m having unreasonable amounts of trouble here too, after following the tutorials step by step.
So here’s my setup (abreviated for security reasons)
SITE : https://mta.wixstudio.com/pvl (Base URL)
BLOCKS APP : @mta/gcm
I’ll make changes in my blocks app, the hit TEST on the top right, and it’ll prepare the app. when finished it tells me to test on a site.
I’ll then go to my site in my next tab, where it will apply an update. Sometimes I’ll have to Uninstall my blocks app and install it to confirm the changes.
I’ll make a test page, add my test widget to the test page, and add a link to access the page.
I’ll then publish the site, and go to the url.
BEFORE I was trying to hit the site API, which didn’t exist and I would a 500 error with backend error cannot find module. I created a Site http-functions.js and was able to hit the site endpoing without issue with the url
https://mta.wixstudio.com/pvl/_functions/multiply?leftOperand=3&rightOperand=4
In my last update on the previous post, I said I couldn’t find any documentation for the differences between site http-functions.js and blocks app http-functions.js , and how to access the blocks app api endpoints.
Then I found the folowing page :
which answered my question of the syntax for blocks api endpoint on a site. According to this, The endpoint for my blocks app api endpoint should be
https://mta.wixstudio.com/pvl/_functions/@mta/gcm/multiply?leftOperand=3&rightOperand=4
However when I try that, It gives a 404 Error. On the backend I get an error
Error loading function from web module backend/http-functions.js: function ‘use_mta’ not found" . This error looks like it’s not properly forwarding to the mta backend endpoing, and instead tryign to hit the SITE backend endpoint named mta.
This is both when I try to enter the url directly into the browser, and when I try to hit the endpoint via fetch from the frontend.
CODE IN BLOCKS APP http-functions.js
import { ok, badRequest } from 'wix-http-functions';
export function get_multiply(request) {
const response = {
"headers": {
"Content-Type": "application/json"
}
}
try {
const leftOperand = parseInt(request.query["leftOperand"], 10);
const rightOperand = parseInt(request.query["rightOperand"], 10);
response.body = {
"backend": "blocks-app",
"product": leftOperand * rightOperand
}
return ok(response);
} catch (err) {
response.body = {
"error": err
}
return badRequest(response);
}
}
CODE IN FRONTEND WIDGET CODE
import wixLocationFrontend from "wix-location-frontend";
import { fetch } from "wix-fetch";
$w.onReady(async function () {
// Initialize your widget here. If your widget has properties, this is a good place to read their values and initialize the widget accordingly.
console.log("TEST WIDGET READY. STARTING API CALL");
const baseUrl = await wixLocationFrontend.baseUrl;
const link = baseUrl+"/_functions/@mta/gcm/multiply?leftOperand=3&rightOperand=4";
console.log("HITTING ENDPOINT : ",link);
const response = await fetch(link, { method: 'GET', });
const data = await response.json();
console.log("GOT DATA",data);
$w('#text1').text = data['backend'];
$w('#text2').text = data['product'];
});
When I run this code on my site, it shows" HITTING ENDPOINT : https://mta.wixstudio.com/pvl/_functions/@mta/gcm/multiply?leftOperand=3&rightOperand=4" Then the .json() command fails because it returns a document with 404 error. If I do .text() instead of .json(), it prints the HTML in the data variable. If I just paste the URL into the browser, it shows a wix 404 page.
Product:
Wix Blocks, Wix Studio
What are you trying to achieve:
Get Data from the backend and display that data on the front end.
What have you already tried:
tried with different urls - replacing _functions with _functions-dev and _function, Tried url with and without the @, Tried changing he Blocks app rull id to the name, tried putting the Blocks ID Before the _function in the url,
tried returning Static text instead of Json and using text().
Tried renaming functions, coppy / pasted 3 different example endpoint functions, and tried making one that just returns a statis string as the return body, updating and hitting those API endpoints from the browser, as well as from the widget via fetch.
Tried built-in fetch, as well as Wix-fetch.
Have spent 2 solid half-days trying everything I can think of to hit this blocks app api endpoint.
Additional information:
The latest error seems to be still trying to hit the site backend api function definition despite having the correct correct syntax for the url to hit the blocks app backnd api function.
Also, I’d still prefer to use the WebMethod defined in backend web.js files - That just seems like a better abstraction for this type of system. I’d still like to figure that one out.