#Example #API #wix-fetch #wix-http-functions #backend #frontend #client #server
Demonstrates
Expose an API using wix-http-functions
Access (consume) an external API using wix-fetch
Web modules - server-side (backend) code
Calling Server-side Code from the Front-end with Web Modules
Required for this example
A cold beer.
About the examples
🍻 MyApi (server/API app)
MyApi exposes an API by defining HTTP functions in the http-functions.js backend file. These functions are not called in code. Rather, they are invoked when an HTTP request, using the associated URL for that HTTP function, is received from a client app.
MyApi is essentially “pageless”. That is, the HOME page in this app is not needed for the API and only exists since a Wix site cannot exist without a page.
Important: You must save and publish your API site (MyApi) for changes to take effect on the testing and production endpoints.
🍻 MyApiClient (client app - consumes the API in MyApi)
MyApiClient uses the wix-fetch API to “talk” to the API exposed in MyApi. MyApiClient does not have any database collections of its own. Instead, it sends fetch requests to the API exposed in MyApi, which ultimately invoke the appropriate HTTP functions (endpoints) in the MyApi backend file http-functions.js.
Using the API rules as detailed in the wix-http-functions API, replace the string API_BASE_URL in the serviceModule.jsw file with the Base URL for the MyApi app.
MyApiClient uses a GET fetch to the API to retrieve a list of recipes which are displayed in a Repeater. Clicking on a recipe opens a Lightbox to display the recipe. The user can rate the recipe and a POST fetch request is sent to update the recipe’s rating in the Lightbox.
🍻 MyApiCombined (bonus app)
This is a bonus app which combines both of the above apps into one. Combining the API together with the consuming client makes debugging easier by allowing the display of console.log() diagnostic statements from both server and client to appear in the browser’s Javascript console. After the API and its interfacing have been debugged, you can duplicate the site and use one as the server app (API) and the other as the client app. Then just delete the unnecessary files from each app.
Using the API rules as detailed in the wix-http-functions API, replace the string API_BASE_URL in the serviceModule.jsw file with the Base URL for the MyApi app.
Important: You must save and publish your site (MyApi) for changes to take effect on the testing and production API endpoints.
Hi. I have a stupid question. All of this stuff about wix api expose is IT works allways inside of wix sites or can I use IT at other webs what I have ? Thank
@Yisrael (Wix)
please help
but it works when I set without limit or limit(100)
I have used these codes to get my all products but when I set the limit to 1000 it gives me an error
import {ok, notFound, serverError} from 'wix-http-functions'; import wixData from 'wix-data'; // URL looks like: // https://www.mysite.com/_functions/myFunction/John/Doe // or: // https://user.wixsite.com/mysite/_functions/myFunction/John/Doe export function get_apis(request) { let options = { "headers": { "Content-Type": "application/json" } }; // query a collection to find matching items return wixData.query("Stores/Collections") .limit(1000) .find() .then( (results) => { // matching items were found if(results.items.length > 0) { options.body = { "items": results.items }; return ok(options); } // no matching items found options.body = { "error": `${request.path[0]} ${request.path[1]} wasn't found` }; return notFound(options); } ) // something went wrong .catch( (error) => { options.body = { "error": error }; return serverError(options); } ); }
I got this errror
Which beer is the best for this example ?
@Yisrael (Wix)
- Do I think you write the best example articles? Yes
- Do I believe you think too much about beer? Maybe
- Is beer ever too much? Cheers! 🍻
Do I have to include the function name on the base URL: For example
https://www.wix.com/_functions/get_recipes/