Learn to create a public API endpoint from your Wix site using HTTP functions. Build a backend function that queries your ApartmentListings collection, add filtering by bedrooms parameter, and handle errors with notFound and serverError responses.
Chapters
In this video, we'll show you how to expose your site's API using HTTP functions. You'll learn how to set up a URL endpoint, expose selected data through HTTP requests, add filtering capabilities, and handle any errors that may occur. This will allow you to share data with sites and applications that you want to work with. For example, let's take an apartment listing site whose database we want to share with a sister company. To create our API, go to the editor and enable code on the top bar. Then, under site structure, hover over back end, click the plus sign and choose new JS file. To start accepting HTTP requests, we name the file with the reserved term httpfunctions js and press Enter. A full page of code will open with an example function that handles a simple get request. We'll delete it and create our own function. We'll start by importing the ok, not found and Server error functions from the WIX HTTP Functions module. These functions allow us to send different types of responses for HTTP requests. After this, we import the WIX Data module in order to work with our database collection. Next, let's create a function to handle an HTTP request. We need to name it with the type of the request, like like get or post. In this example, we'll use get underscore and then the name of the function. Let's call it Apartment Listings. We then export it to make sure it's accessible. After we publish, a URL endpoint that accepts GET requests will be generated with the following our site URL followed by functions and the name of the function. Following this formula, we'll know the URL endpoint of our web service, which we can use to process HTTP requests and send a response with our collection data. We start this function by creating a Response Options object which will expose all the information we want to be accessible. The first value that we'll add here is the Headers property, which contains the information about the response. Since our response in this example will be JSON type, we'll give Headers a content type of application JSON. To add our apartment Listings collections data to the body of the response, we first return a WIX data query of our apartment listings collection and then chain a then method to check whether items were found and add them to the Response Options object. While the Headers property contains information about the response, the body property is where we'll include the actual payload or data of the response. Our Options object now contains all the data we want to expose and send in the response. To send it, we'll Return the OK function that we've imported with the Options object. Once we click Publish, the HTTP functions take effect. Now, as we see here in the console, whenever a Get request is sent to our endpoint, a connection is made from the requesting client to our server. If successful, our app will send a response with a 200ok status. With the application content type that we defined in our Headers property, as well as the JSON payload we defined in the Body property, we've created a complete web service that exposes our data collection with incoming requests through our new URL endpoint. Let's take it one step further. For example, what if our sister company wants to filter the listings by the number of bedrooms? First, let's go back to our get apartmentlistings function and add our request object as an argument. The request object holds all information that will be included in the HTTP request. Then let's create a variable for the number of bedrooms to filter by. We'll check if the HTTP request contains a Bedroom query property and assign it to the variable. The query property contains additional parameters from the HTTP request. In this example, we'll use these parameters as a value to filter by. Since the field we'll be filtering by is a number type, we'll use the Number function. Now, if an incoming request includes a Bedrooms query in the URL, it will be assigned to the Bedrooms number variable. Next, we restructure our data query. Instead of returning the WIX data query, we first assign it to a variable which we'll name apartmentquery. This allows us to check if a filter was requested and provide only the relevant data. Once that's done, we'll return the apartment query variable and continue the original flow of the function. Now, as we see in the console, by adding a Bedrooms query to the URL endpoint, our sister company can get more specific data. Our web service now has filtering capabilities. Before we wrap up, let's add error handling to our function. If no results were found, we continue the function by giving the body of the Options object an error property and return the not found function with the response Options object. Finally, to handle any errors that may occur during the data query process, we we add a catch statement that receives an error argument. We'll again assign it to the Options body and return a server error with the Options object. Now, our web service will provide a more accurate response when there are no rooms matching the request with a 404-not-found code in our console, together with our custom error message. And that's it. Now you're ready to expose your site's API as a web service, allowing external sources to interact with your Data. Go to Wix.com for a fully detailed API. Reference articles, examples, and more Videos.
