Skip to main content

Package and query modules

Business

A package is a collection of JS and query 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 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:

  • 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;
  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 and Publish the query module.

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 input
{{Table1.pageSize}}

//offset input
{{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.

Great!!

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