How to Save Comments from the Comment Thread Component in RetoolDB

If you've tried to save comments from Retool's Comment Thread component into RetoolDB, you've probably noticed there's no built-in way to do it. The component tracks conversations inside your app, but storing those messages in your own database — so you can query, audit, or display them elsewhere — requires a manual setup. This guide walks you through exactly how to save comments from the Comment Thread component in RetoolDB using additionalScope, a resource query, and a simple event handler. We'll also cover how to hide the delete button with custom CSS, since that's the next problem most teams hit.

Why Retool Doesn't Persist Comment Thread Data Natively

As of now, Retool's Comment Thread component stores conversation data internally but doesn't expose delete or edit events, and there's no native integration to write submissions to a database automatically. The Retool team is tracking feature requests for delete callbacks and comment editing, but there's no public timeline. In the meantime, the workaround below is stable and production-ready for the submit flow.

What You'll Need Before You Start

• A Retool app with a Comment Thread component already placed on the canvas
• Access to RetoolDB (or any connected database you want to write to)
• A basic understanding of additionalScope — Retool's mechanism for passing dynamic values into resource queries at runtime

Quick additionalScope refresher: In your resource query settings, you declare a key (e.g. {{ commentBody }}). When you trigger the query from a script, you pass the actual value for that key using additionalScope. This lets you inject runtime values — like the text a user just typed — into a query without hardcoding anything.

Step 1: Create a Comments Table in RetoolDB

In RetoolDB, create a new table — name it something like comments. Add the following columns at minimum:

• body — the text content of the comment
• user_id — to reference who submitted it
• name — the user's display name
• email — optional, but useful for filtering or notifications
• created_at — a timestamp column so you can sort and audit entries

You can add any other columns that make sense for your app — a thread_id or record_id foreign key is worth adding if you're tracking comments per row in another table.

Step 2: Create a Resource Query to Write to the Table

At the app level, create a new Resource Query pointed at your RetoolDB comments table. Set the action to Insert record (or a bulk insert if needed). Configure the column mappings like this:

• body → {{ commentBody }} (this will be passed via additionalScope)
• user_id → {{ current_user.id }}
• name → {{ current_user.fullName }}
• email → {{ current_user.email }}

The name and user_id values are pulled dynamically from Retool's built-in current_user object, so they'll always reflect whoever is logged in. The commentBody value is what you'll inject at trigger time using additionalScope.

Step 3: Add a Submit Event Handler to the Comment Thread Component

Select your Comment Thread component and open its event handlers. Add a handler for the Submit event and choose Run script as the action. In the script, trigger your insert query and pass the comment body using additionalScope:

saveComment.trigger({ additionalScope: { commentBody: commentThread1.value } });

Replace saveComment with the actual name of your resource query, and commentThread1 with your component's name. That's it — when a user submits a comment, the Comment Thread component handles the in-app display as usual, and your query writes the data to RetoolDB simultaneously.

How to Hide the Delete Button Using Custom CSS

Here's the problem: users can still delete comments from the Comment Thread component UI, but because there's no delete event callback, your RetoolDB records won't be updated. Your comment counts and stored data will go out of sync fast.

The cleanest fix right now is to hide the delete button entirely using custom CSS. In your app's custom CSS settings, add:

.retool-grid-content [id*="yourButtonComponentName"] { display: none; }

The tricky part is identifying the correct selector — the delete button disappears from the DOM when you stop hovering over a comment, making it hard to inspect. The approach above targets elements by partial ID match inside the Retool grid. You may need to experiment with your browser's dev tools while actively hovering to catch the element before it disappears. Once you have the right selector, this reliably removes the button from view for all users.

Known Limitations to Be Aware Of

• No delete sync: Deleting a comment in the Comment Thread component won't trigger any event, so your RetoolDB record stays even after the message is gone from the UI.
• No edit sync: The same applies to edits — the component doesn't fire an event when a comment is edited.
• CSS hiding is a patch, not a fix: Custom CSS can be worked around or may break on Retool UI updates. A native disable option is the right long-term solution — vote for it in the Retool feature request tracker.

Wrapping Up

This three-step setup — create a table, configure a resource query with additionalScope, and wire up the Submit event handler — gives you a reliable way to persist every comment your team submits directly into RetoolDB. It's a workaround, not a native feature, but it's stable enough for production apps. Once Retool ships delete and edit callbacks for the Comment Thread component, you'll be able to extend this pattern to keep your database fully in sync with what users see in the UI.