Skip to main content

Package and query modules

Business

A package is a collection of query and JS modules that can be versioned and distributed across instances. Inside packages, you can create multiple query and JS modules, allowing you to bundle and organize your application logic efficiently.

What will I learn? 📝

You'll create a reusable query module using product inventory data and display that data in a Table widget. By the end of this tutorial, you will learn:

  • 🔧 Basics: Learn how to create and configure the query module
  • 🔄 Dynamic Data: Learn how to pass data between the app and query module
  • ♻️ Reusability: Discover how to reuse the query module within applications

Prerequisites​

Before you start, make sure you have the following:

Create query module​

A reusable query module is a query that can be used across multiple applications within the same workspace. They prove beneficial for tasks like fetching details or creating filter queries, eliminating the need to create separate queries for each application.

  1. Click Create New on the top-right corner of your workspace, and then select New Package.

  2. Rename the package to ProductUtils.

  3. Click the New Module button located at the center of the screen. Choose Query Module and proceed to create a new datasource by selecting PostgreSQL.

  4. Enter the following details in the connection parameter fields. For this tutorial, we will use a product inventory database as an example to create queries and display data.

  • Connection mode: READ_WRITE
  • Host address: aws-0-us-east-1.pooler.supabase.com
  • Port: 5432
  • Database name: postgres
  • Username: postgres.hazwlkzitjmrmqbpkqch
  • Password: w9uDFMhmMzOOvPbv

  1. Test and save the datasource.

  2. Click + New Reusable Query from the top-right corner of the datasource editor.

  3. Rename the query module to GetProducts.

  4. Configure the query to retrieve product details using the following SQL:

SELECT * FROM public."product" LIMIT 5 OFFSET 4;

With this, you don't need to create multiple same queries for different pages or applications. You can reuse this same query module in various contexts, such as:

  • Displaying the entire inventory data in a Table widget.
  • Displaying stock data in a chart widget, and more.
  1. Click on the + Add Inputs button from the right-side property pane. These inputs allow you to pass parameters from your application to query module, facilitating dynamic query adjustments based on user inputs or application requirements.

Create two inputs:

  • limit, with a default value of 5.
  • offset, with a default value of 4.

If dynamic values are not passed, it takes the default value.

  1. Update the query by using inputs property for dynamic adjustments:
SELECT * FROM public."product" LIMIT {{inputs.limit}} OFFSET {{inputs.offset}};

  1. Run the query to ensure it retrieves the data correctly.

  2. Publish the query module from top-right corner. This allows the changes to reflect on the app side.

Use query module​

Great job on creating a query module! Now, let's see how you can reuse it in different apps.

  1. Open your App or create a new one from the homepage and ensure that both the app and modules share the same workspace.

  2. From the Queries Tab, click + New query / API.

  3. Select the Add GetProducts query module. You can add multiple instances of the same module and pass different parameters to each one.

  4. Run the query module.

  5. To display query data, drop a Table widget and connect it to the GetProducts1 Query module.

  6. From the Queries Tab, open the GetProducts query module and set the inputs to reference the properties of the Table widget.

This configuration dynamically sets the limit and offset based on the values from the Table widget(Table1).

  • Limit: {{Table1.pageSize}}

  • Offset: {{Table1.pageOffset}}

  1. Enable the Server-side pagination property in the Table.

  2. Set the Table widget's OnPageSizeChange and onPageChange to execute the GetProducts query.

With this, you have connected the query module to the Table widget and enabled server-side pagination, which allows you to dynamically fetch and display data based on the current page and page size.

Great!!

You have successfully integrated the query module into your app, displaying its data in the Table widget.

Next steps​