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 build a query module to fetch and display Product data within a Table widget. By the end of this tutorial, you will know how to:

  • 🔧 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

⏱️ Time: Less than 10 mins

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 10 OFFSET 2;
  1. Create two inputs, limit and offset, from the right-side property pane, with default values set to 5 and 4 respectively.

Inputs allow you to pass parameters from your application to modules, facilitating dynamic query adjustments based on user inputs or application requirements.

  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.
Great Work!

🎉 You have successfully created a 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 modules from the package.

  4. Run the query module.

  5. To display query data, drop a Table widget and connect it to the GetProducts 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.