Skip to main content

Lesson 1 - 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.

To learn query modules in Appsmith, 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:

  • Create and configure the query module
  • Integrate the module into your app
  • Pass parameters to the module

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;
  1. Run and publish the module.

You have successfully created the first query module.

Use query module​

Follow these steps to access its data in any application:

  1. Open your App 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.

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

Pass parameters to module​

In this section, you will update the query module to accept dynamic inputs, allowing us to pass parameters from the app to the query module for tailored and responsive data retrieval.

  1. Open the ProductUtils package,

  2. Navigate to the property pane of the GetProducts query. Inputs allow you to pass parameters from your application to modules, facilitating dynamic query adjustments based on user inputs or application requirements.

Create two inputs, named limit and offset with default values of 5 and 4 respectively.

  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.
info

When you update and publish a package, these modifications automatically apply in the edit mode of the app. However, the live (deployed) version of the app remains unchanged until you redeploy the app.

  1. Open your app from the homepage to dynamically pass Table widget values to the module.

  2. From the Queries Tab, select 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.

You've successfully integrated query modules; If dynamic inputs are not provided, it sets to default values.

Next steps​