Demo: Shopping Mall Directory #3 - Addons

In this guide, we'll explore how to use Xano's add-ons feature to enhance your application's data and improve performance. Add-ons allow you to extend the data of a single request, similar to how GraphQL works for Facebook posts. By combining related data from multiple tables into one request, you can reduce the number of requests and improve your app's efficiency.

What Are Add-Ons?

Add-ons are a way to extend the data of a single request in a REST API. They work like GraphQL, which Facebook developed to fetch all the information related to a post (likes, comments, relationships, etc.) through one request, improving performance.

In a traditional REST API, you might have to make multiple requests to get all the data you need. With add-ons, you can combine data from different tables into a single response, reducing the number of requests and improving performance.

Setting Up an Add-On

Let's walk through an example of how to set up an add-on for a shopping mall directory app. Suppose you have a `stores` table with columns for the store name, description, and location within the mall. You might want to include contact information (phone number and website) when fetching store details.

Step 1: Create a Contact Table

First, create a new table called `contact` with columns for `phone` and `website`. Additionally, add a `storesId` column as a reference to the `stores` table. This will allow you to connect the contact information to the appropriate store.

Step 2: Create the Add-On

1. Go to your API and open the `get stores` API endpoint.
2. Click on the "Function Stack" button, and then click "Output."
3. Click the "Add-On" button to create a new add-on.
4. Select the `contact` table as the table you want to add to the response.
5. Choose "List of Items" as the data return type since you want to fetch multiple contact records.
6. Connect the `contact` table to the `stores` table using the `storesId` reference column.
7. (Optional) Customize the response by selecting only the `phone` and `website` columns.
8. Save and run the API endpoint.

Now, when you fetch store data, the response will include the contact information (phone and website) for each store.

Benefits of Using Add-Ons

1. Performance: By combining related data into a single request, you reduce the number of requests and improve app performance.
2. Flexibility: You can extend the data in a request by adding multiple add-ons, giving you more control over the data you fetch.
3. Simplicity: Add-ons abstract away the complexity of joining tables and fetching related data, making it easier for non-technical users to build powerful applications.

Conclusion

Xano's add-ons feature is a powerful tool that allows you to extend the data of a single request, similar to how GraphQL works. By combining related data from multiple tables, you can improve your application's performance and flexibility. Whether you're a no-code enthusiast, citizen developer, traditional developer, or working for a startup or small business, add-ons can help you build more efficient and feature-rich applications with Xano.