How to pull records from multiple tables and display them in a custom app?

[Martin_Carvalho]

Is it possible to fetch all records from the entire base without needing to pick a single table?

I’m creating a To-Do list app that’s pretty much like the example provided by Airtable.
We have multiple tables organized by “Offices” like for example “Development”, “Design”, “Marketing” and so on. Each record is a Task.

Our goal is to simply display all Records in the App that are not marked as Completed so our manager can easily go through those tasks in one place.

The useRecords method requires a Table to be passed as an argument so I thought of maybe looping through all tables and then fetching those records but then I figured that this would make the app not reactive…

So… Is this possible? If not, do you have any suggestions of how I could accomplish this? We sure don’t want our manager to have to select which table he’ll be working on since that’s irrelevant to him…

Thanks for your help!

[Kamille_Parks · Accepted solution]

The following code will get you all the records from every table:

const base = useBase();
const tables = base.tables
const queries = tables.map(table => table.selectRecords())

useLoadable(queries)
useWatchable((queries), ['records'])

const recordsFromQueries = queries.map(x => x.records)

Your issue now is to filter records by the field where “Complete” is a possible value, and since that would be a different field for each table, you’d either need to map those fields in your app’s settings or hope they’re all named the same thing and remain named the same thing.

const incompleteRecords = recordsFromQueries.filter(record => record.getCellValue("a field name consistent across every single table") !== "Complete")

[Martin_Carvalho]

Thanks for your quick response, @Kamille_Parks

It almost works except for that filtering part.

I do have a consistent field (Checkbox type) named “Completed”.
The issue is that when I run:

const incompleteRecords = recordsFromQueries.filter((record) => record.getCellValue("Completed") !== true);

I get TypeError: record.getCellValue is not a function
I guess this is happening because I’m trying to run the getCellValue method on an array? That’s what seems to be assigned to record inside that filter function.

[Kamille_Parks]

If its returning an array then nest another .map() function.

[Martin_Carvalho]

@Kamille_Parks

I was actually able to solve the issue with the array by doing a reduce like this:

const batchRecordsFromQueries = queries.map((x) => x.records);

  const recordsFromQueries = batchRecordsFromQueries.reduce((accum, item) => {
    accum = [...accum, ...item];
    return accum;
  }, []);

  const filteredRecords = recordsFromQueries.filter(
    (record) =>
      !record.getCellValue("Completed") &&
      record.getCellValueAsString(assignedToFieldName) ==
        base.getCollaboratorByIdIfExists(selectedCollaborator).name
  );

It works as expected, it does gets all records and filters them by these criteria, the only issue now is that they are not reactive as I was first concerned…
For example, I have a checkbox that marks task as completed. When hitting this, it does update the record inside Airtable but nothing happens inside the App so I need to reload it in order to see the updates… Could you please help me with that?

This is my updating method:

function TaskDoneCheckbox({ record }) {
  function onChange(event) {
    record.parentTable.updateRecordAsync(record, {
      Completed: event.currentTarget.checked,
    });
  }

  return (
    <input
      type="checkbox"
      checked={!!record.getCellValue("Completed")}
      onChange={onChange}
    />
  );
}

[Kamille_Parks]

Add “cellValues” or “cellValueInField: fieldId” as a watched key in useWatchable. Documentation.

[Martin_Carvalho]

It works!!!
Thanks a LOT for all your help :slightly_smiling_face: