Skip to main content

Asana query tutorial

Learn how to read and write data to Asana.

After setting up an Asana integration with Retool, your Asana resource is available to use in the query editor. Retool generates the available operations directly from Asana's OpenAPI specification, so you select an operation instead of writing a request from scratch.

Create a query​

Switch to the new app builder

Retool recommends using the new app builder so you can use natural language to build React-based apps using AI.

To create an Asana query in a Retool app:

  1. In the Retool app IDE, open the Code tab, then click + in the page or global scope.
  2. Select Resource query.
  3. Choose your Asana resource.
  4. Select an operation and configure its parameters.

Query configuration fields​

Asana queries don't use fixed Retool action types. Instead, the query editor reads Asana's OpenAPI specification and exposes its operations and parameters directly.

Operation​

Select the Asana API operation to call, such as retrieving tasks in a project or creating a task. Operations are grouped by the resource they act on (tasks, projects, teams, workspaces, and so on). Refer to the Asana API reference for the full list of available operations and what each one does.

Parameters​

Once you select an operation, Retool displays the parameters that operation supports, grouped by where they belong in the request: path, query, or header. Required parameters are marked in the editor. Use embedded expressions to populate parameters dynamically.

Example: dynamic project ID
{{ table1.selectedRow.data.gid }}

Request body​

For operations that create or update data (such as creating a task), Retool displays a form generated from Asana's request schema. Fields marked required in the schema must be filled in before the query can run.

Example request body for creating a task
{
  "data": {
    "name": {{ nameInput.value }},
    "notes": {{ notesInput.value }},
    "projects": [{{ projectSelect.value }}],
    "assignee": {{ assigneeSelect.value }},
    "due_on": {{ dueDatePicker.value }}
  }
}

Common use cases​

The following examples demonstrate typical Asana operations in Retool apps. For a complete reference of available operations and parameters, refer to the Asana API documentation.

retrieve tasks in a project

First, create a query and select the Get tasks from a project operation.

Set the project_gid path parameter to the project you want to list tasks for.

Example
{{ projectSelect.value }}

Next, add a Table component to the app and set its Data property to {{ getTasksQuery.data.data }}.

create a new task

First, add a Form component (form1) with input fields for the task name, description, assignee, and due date.

Next, create a query and select the Create a task operation. Configure the request body:

Example request body
{
  "data": {
    "name": {{ form1.data.name }},
    "notes": {{ form1.data.notes }},
    "projects": [{{ projectSelect.value }}],
    "assignee": {{ form1.data.assignee }},
    "due_on": {{ form1.data.dueDate }}
  }
}

Then, add an event handler to the form's Submit event that runs the create query and refreshes the tasks query.

update a task's status

First, add a Button component in your table's action column.

Next, create a query and select the Update a task operation. Set the task_gid path parameter and configure the request body:

Example request body
{
  "data": {
    "completed": true
  }
}
Example task_gid
{{ table1.selectedRow.data.gid }}

Then, add an event handler to the button's Click event that runs the update query and refreshes the tasks query.

assign a task to a user

First, add a Select component listing users in the workspace.

Next, create a query and select the Update a task operation. Set the task_gid path parameter and configure the request body:

Example request body
{
  "data": {
    "assignee": {{ userSelect.value }}
  }
}

Then, add an event handler to the select component's Change event that runs the update query.

add a comment to a task

First, add a Text Area component for the comment body.

Next, create a query and select the Create a story on a task operation. Set the task_gid path parameter and configure the request body:

Example request body
{
  "data": {
    "text": {{ commentInput.value }}
  }
}

Then, add an event handler to a button's Click event that runs the query and clears the comment input.

Best practices​

Follow these best practices to keep Asana queries fast, efficient, and safe.

Performance​

  • Cache responses: For data that doesn't change frequently, enable query caching to reduce API calls and improve response times.
  • Request only what you need: Use the opt_fields query parameter Asana supports on most GET operations to limit the fields returned instead of fetching full task or project objects.
  • Minimize the number of queries: Combine related lookups where Asana's API supports it (such as fetching subtasks alongside parent tasks) instead of issuing separate queries per row.
  • Set appropriate timeouts: Configure query timeouts based on expected API response times to prevent hung requests.

Data integrity​

  • Validate user input: Sanitize and validate all user input before including it in a request body to prevent malformed or unexpected data from reaching Asana.
  • Handle errors gracefully: Configure error notifications and fallback behavior for failed queries to improve user experience.
  • Verify responses: Check the response status and validate the response data structure before using it in your app.
  • Implement retry logic: For transient failures, use Retool's automatic retry settings or implement custom retry logic with exponential backoff.
  • Log query activity: Enable query logging to track requests and responses for debugging and auditing.