Example: MyApi and MyApiClient

Show and tell
,
1

#Example api wix-fetch wix-http-functions #backend #frontend #client #server

1512×809 171 KB

Demonstrates

Required for this example

  • A cold beer.

About the examples

:beers: 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.

:beers: 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.

:beers: 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.

5 Likes
2

Do I have to include the function name on the base URL: For example

https://www.wix.com/_functions/get_recipes/

3

For the base URL , you don’t use the function names. Function names are added to the base URL
in order to reach the function endpoints. See the code in serviceModule.jsw to see how it’s done.

For a base URL for a free site in Preview:
https://{user_name}.wixsite.com/{site_name}/_functions-dev/
For a published site:
https://{user_name}.wixsite.com/{site_name}/_functions/

4

@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! :beers:
5

Which beer is the best for this example ?

6

Hey Shan,

Well, I usually go with Stout or dark lager. In any case, I adhere to the Reinheitsgebot (German Beer Purity Law).

I admit it’s a matter of taste and I won’t judge.

Cheers :beers:

7

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

8

but it works when I set without limit or limit(100)

9

@Yisrael (Wix)
please help

10

What error do you get?

11

@yisrael-wix I am having an issue with connecting my external api to my wixsite. I have no clue as to where I am going wrong within the code but an error message states the public key is not found. Please assist at your earliest convenience.

12

@tsuyoidesigns I have replied to your problem on stackoverflow https://stackoverflow.com/questions/58399409/how-to-add-private-members-to-external-api

You are simply making the post call without using any of the defined parameters. That would be a start to cleaning up your code.

13

@shantanukumar847 I just noticed and replied. If you are able to assist with my response I would greatly appreciate it.

14

@yisrael-wix
Can you help me? I am able to send information to http functions in wix, but I can’t retrieve the filtered value in my database for my application. I am feeling frustrated!

15

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

16

Nope - not a stupid question
 You can expose an API in your Wix site which can be consumed from another web site (even a non-Wix site), an app, or whatever.