Three (3) simple tips that can make your app better. (Part 1)

How do I do X?
1

When building on appsmith, chances are you run into several errors or your app doesn’t work the way you intend for it to work. Some of these errors are probably caused by little bugs in the appsmith codebase. Sometimes, however, some of these errors are developer errors.

Today, I bring you three tips to help reduce errors in your app as an appsmith developer.
1 — Adopt async/await:

When building on appsmith, you often use data sources connected as traditional databases or as an API ( remember that these data sources are asynchronous operations, i.e., non-blocking). If you have no idea what asynchronous operations are, don’t worry, we have this very detailed post that will explain that to you.
Now, you have a JsObject filled with javascript code, and you’ve gotten to that point where you need to get some data out of your data source. What we’ve noticed appsmith developers do overtime is the following:

export default {
  getDataAndFilter: async () => {
    // fetch data 
    GET_LIST_OF_USER.run()

    // check if there's data
    if(GET_LIST_OF_USER.data) {
      // do something with the data
      const verifiedUsers = GET_LIST_OF_USER.data.filter(user => {
        return user.emailVerified === true;
      })
    }
  }
}

There are two things not quite right with the above approach:

  1. There’s no await when running the query
  2. Multiple uses of GET_LIST_OF_USER.data

To elaborate on the second problem, remember that GET_LIST_OF_USER.data will first run GET_LIST_OF_USER.run() and then try to return the data property of the response gotten back from that call. It’s two steps packed into 1.

Let’s correct everything that was wrong with the above.

export default {
  getDataAndFilter: async () => {
    // fetch data 
    const result = await GET_LIST_OF_USER.run()

    // check if there's data
    if(result.data) {
      // do something with the data
      const verifiedUsers = result.data.filter(user => {
        return user.emailVerified === true;
      })
    }
  }
}

2 —Use Ternary operators going forward.

When writing queries or adding multiple or writing regular Js in your JsObjects, you should reference a value from your widget or the appsmith store. In a case where this value can be empty (take, for instance, a query that is linked to an input widget), it is best to use a ternary operator to use this value in your query, which allows you to insert a default value if the user doesn’t provide a value.
For instance, say you have a select widget, and you want to use the filtered value inside of a query instead of using :

SELECT * FROM users WHERE name={{selectWidget.filterText}}

You can use the following:

SELECT * FROM users WHERE name={{selectWidget.filterText ?? 'DEFAULT_VALUE'}}

3 — JsObject is your friend.
Sometimes, you want to run a query within a widget, pull the data directly, and do some filtering in the process. When you do all this within the widget Js logic, things get clumsy, and we don’t want that. This is where a JsObject shines. Using JsObjects in cases like this offer you the following advantage:

  1. The ability to use async/await and catch query/API errors

  2. Write clean and reusable code that you can share within different widgets.

  3. It Makes it easier to debug your app in the long run.

If you want to learn more about how to use JsObjects in appsmith, see our docs on how to use Jsobjects with appsmith here — How to Use JS Object Within Appsmith? | Appsmith

See you some other time.