How to Integrate Retool with Google Cloud Firestore

Navigate to the Resources tab in Retool's left navigation. Click Add Resource in the top-right corner. In the resource type picker, find the Google section and click Firebase. In the resource configuration form: - 'Resource name': Enter 'Firestore Production' or a name that identifies the environment. If your team uses separate Firebase projects for development and production, create one resource per project. - 'Service Account Key': Paste the entire contents of your Google service account JSON key file. The JSON block starts with `{ "type": "service_account", "project_id": "...`. Make sure you paste the full JSON — missing curly braces or truncated content will cause authentication failures. Retool encrypts the key immediately on save. - 'Database URL': Enter your Firebase Realtime Database URL (format: https://your-project-id-default-rtdb.firebaseio.com). Even if you are only using Firestore, Retool uses this field to identify the Firebase project. If your project has no Realtime Database, you can use a placeholder URL matching your project ID format. Click Save Changes. Retool will test the service account credentials. If verification succeeds, a green Connected status appears. Note: this single Firebase Resource grants access to all Firebase services for the connected project (Firestore, Realtime Database, Auth, and Cloud Messaging). You select the specific service within each query. You do not need a separate resource for Firestore alone.

Open your Retool app and click + New query in the Code panel. Select your Firebase Resource from the dropdown. The query editor shows a Firebase service picker at the top — click the 'Service' dropdown and select 'Firestore'. The action options update to show Firestore-specific operations. From the 'Action type' dropdown, select 'Query collection'. New input fields appear: - 'Collection': Enter the name of your Firestore collection (e.g., 'users', 'orders', 'products'). Collection names are case-sensitive and must match exactly what is in Firestore. - 'Filters': Click 'Add filter' to add WHERE conditions. Each filter has three parts: field name, operator (== != < <= > >= array-contains array-contains-any in not-in), and value. For example: field 'status', operator '==', value `{{ statusFilter.value || 'active' }}`. - 'Order by': Click 'Add order' to set the sort field and direction. Note: Firestore requires an index for any query that filters on one field and orders by a different field — see the Troubleshooting section for index error handling. - 'Limit': Set a maximum document count (e.g., 25). Firestore does not have OFFSET pagination — use cursor-based pagination instead (covered in step 3). Name the query 'getUsers' and set 'Run query on page load' to On. Click Run to test it. Firestore returns documents as an array of objects. Each object includes the document fields plus a special `__id__` field containing the Firestore document ID. Reference the document ID as `{{ getUsers.data[0].__id__ }}` in subsequent queries.

1// Transformer: reshape Firestore query results for display
2// Firestore returns document data with nested fields and Timestamps
3const docs = data;
4return docs.map(doc => ({
5  id: doc.__id__,
6  email: doc.email || '',
7  status: doc.status || 'unknown',
8  created_at: doc.created_at
9    ? new Date(doc.created_at._seconds * 1000).toLocaleDateString()
10    : 'N/A',
11  plan: doc.subscription?.plan || 'free',
12  last_login: doc.last_login
13    ? new Date(doc.last_login._seconds * 1000).toLocaleString()
14    : 'Never'
15}));

Firestore does not support OFFSET-based pagination (no SKIP N rows). Instead, Firestore uses document cursors: you pass the last document from the current page as a 'start after' reference, and Firestore returns the next page starting after that document. Retool's Firestore query supports this via the 'Start after document ID' field. Create a state variable to track the pagination cursor. In Retool's State panel (bottom of the canvas), add an Array variable named 'pageHistory' with default value []. This array will store document IDs representing the start of each page, enabling both 'Next' and 'Previous' navigation. Add a second state variable 'currentPageIndex' (Number, default 0). Modify your 'getUsers' query: - In the 'Start after document ID' field, enter: `{{ pageHistory.value[currentPageIndex.value] || '' }}` - An empty string means 'start from the beginning'. Add a 'Next Page' button with this JavaScript event handler: ```javascript // Save the last document ID from current results as the next page cursor const lastDoc = getUsers.data[getUsers.data.length - 1]; if (lastDoc) { pageHistory.setValue([...pageHistory.value, lastDoc.__id__]); currentPageIndex.setValue(currentPageIndex.value + 1); getUsers.trigger(); } ``` Add a 'Previous Page' button: ```javascript if (currentPageIndex.value > 0) { currentPageIndex.setValue(currentPageIndex.value - 1); getUsers.trigger(); } ``` Disable the Previous button when `{{ currentPageIndex.value === 0 }}` and the Next button when `{{ getUsers.data.length < 25 }}` (fewer results than the limit means the last page has been reached).

1// JavaScript event handler: Next Page button
2const lastDoc = getUsers.data[getUsers.data.length - 1];
3if (lastDoc && lastDoc.__id__) {
4  // Append the last document ID as the cursor for the next page
5  pageHistory.setValue([...pageHistory.value, lastDoc.__id__]);
6  currentPageIndex.setValue(currentPageIndex.value + 1);
7  getUsers.trigger();
8}

With the collection query and pagination in place, add full CRUD operations to make the panel functional for ops teams. **Get a single document**: Create a query with Action 'Get document', Collection `{{ table1.selectedRow.id ? collectionName : '' }}`, and Document ID `{{ table1.selectedRow.id }}`. Name it 'getDocument'. This loads the full document when a row is selected in the Table, including fields not shown in the collection query. **Add a document**: Create a query with Action 'Add document to collection'. Set Collection to your collection name and Document data to a JSON object referencing form inputs: `{ "email": "{{ emailInput.value }}", "status": "{{ statusSelect.value }}", "created_at": {{ new Date() }} }`. Name it 'addDocument'. Wire a 'Create' button's click event to this query, with getUsers triggered on success to refresh the table. **Update a document (partial update)**: Create a query with Action 'Update document'. Set Collection to your collection name, Document ID to `{{ table1.selectedRow.id }}`, and Update data to only the fields being changed: `{ "status": "{{ statusSelect.value }}", "updated_at": {{ new Date() }} }`. The 'Update' action merges changes without overwriting other fields — use 'Set document' if you want to replace the entire document. **Delete a document**: Create a query with Action 'Delete document'. Set Collection and Document ID from the selected row. Name it 'deleteDocument'. Wire a 'Delete' button with a confirmation modal: 'Are you sure you want to delete document {{ table1.selectedRow.id }}? This cannot be undone.' Arrange a Form component on the canvas that loads the selected document's fields when a table row is clicked (bind Form field default values to `{{ getDocument.data.fieldName }}`), and wire the form Submit to the updateDocument query.

1// Firestore update document data — partial field update
2// Only includes fields that have been modified
3{
4  "status": "{{ statusSelect.value }}",
5  "plan": "{{ planSelect.value }}",
6  "notes": "{{ notesInput.value }}",
7  "updated_at": "{{ new Date().toISOString() }}",
8  "updated_by": "{{ current_user.email }}"
9}

Firestore's hierarchical data model allows subcollections nested under documents (e.g., `users/{userId}/orders/{orderId}`). Retool's Firestore query editor supports subcollection access by specifying the full collection path including parent document IDs. To query a subcollection, set the 'Collection' field to the full path with the parent document ID embedded using Retool template syntax: - Collection: `users/{{ userTable.selectedRow.id }}/orders` This path dynamically changes based on which user is selected in the left-panel table. Create a query named 'getUserOrders' with this collection path, add appropriate filters and ordering, and set 'Run query on page load' to Off. In the userTable's 'Row selection' event handler, trigger getUserOrders so the subcollection query fires when a new user is selected. For deeply nested Firestore documents that contain arrays of embedded objects (e.g., a document with an 'address_history' array of address objects), display the array data in a JSON Viewer component or pre-process it in a transformer: `return data.map(doc => ({ ...doc, address_count: (doc.address_history || []).length, latest_address: doc.address_history?.[0]?.city || 'N/A' }));` For Firestore documents with many nested fields (the document is itself a nested object tree), use a JavaScript transformer to flatten the relevant nested values into top-level properties for cleaner Table display: `return data.map(doc => ({ id: doc.__id__, email: doc.profile?.email, city: doc.profile?.address?.city, plan: doc.subscription?.plan }));` For complex Firestore data models involving collection group queries, transactions, and batch writes across multiple documents, RapidDev's team can help design and implement the full Retool architecture.

1// Transformer: flatten nested Firestore document structure
2// Input: Firestore documents with nested profile and subscription objects
3const docs = data;
4return docs.map(doc => ({
5  id: doc.__id__,
6  email: doc.profile?.email || doc.email || '',
7  display_name: doc.profile?.displayName || '',
8  city: doc.profile?.address?.city || '',
9  country: doc.profile?.address?.country || '',
10  plan: doc.subscription?.plan || 'free',
11  plan_expires: doc.subscription?.expires_at
12    ? new Date(doc.subscription.expires_at._seconds * 1000).toLocaleDateString()
13    : 'N/A',
14  tags: Array.isArray(doc.tags) ? doc.tags.join(', ') : '',
15  doc_count: Array.isArray(doc.orders) ? doc.orders.length : 0
16}));