
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 18, 2020 04:14 AM
Hi there,
I’ve made a custom app which is released and working great. The only problem is that when I filter the data in the view, it doesn’t always update the chart - I have to go to the App and click “Reload App”.
This is how I’m getting the data:
const base = useBase();
const table = base.getTableByName(‘securities’);
const view = table.getViewByName(‘Home’);
const queryResult = view.selectRecords();
const records = useRecords(queryResult);
const viewport = useViewport();

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 18, 2020 04:34 AM
You need to use React hooks to watch the view, so that your app automatically reloads when the view is updated.
See here: Airtable Blocks SDK
The problem, I don’t know exactly which WatchableKey you need to watch, because the docs page Airtable Blocks SDK links to a blank page. Perhaps someone from the Airtable team can fix that link.
However this is the kind of code I’m talking about, should probably work:
import {useWatchable} from '@airtable/blocks/ui';
function ActiveView({cursor}) {
useWatchable(cursor, 'activeViewId', () => {
alert('active view changed!!!')
});
return <span>Active view id: {cursor.activeViewId}</span>;
}

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Dec 18, 2020 05:04 AM
Hey @Bryony_Miles!
This should be working without any extra watch keys - useRecords
should watch the list of records returned by the query result for you, so your react component should re-render whenever that list chages.
I tested this out with this app:
import {
initializeBlock,
useBase,
useRecords,
useViewport,
} from "@airtable/blocks/ui";
import React from "react";
function HelloWorldApp() {
const base = useBase();
const table = base.tables[0];
const view = table.views[0];
const queryResult = view.selectRecords();
const records = useRecords(queryResult);
return <div>records: {records.map((record) => record.name).join(",")}</div>;
}
initializeBlock(() => <HelloWorldApp />);
but i wasn’t able to reproduce the issue you’re describing (using version 1.2.5 of @airtable/blocks
).
Couple questions:
- What version of the blocks SDK are you using?
- What happens in your app after the lines you posted?
- Does this issue appear all the time, or only sometimes? Are there particular things that seem to trigger it?
- When the issue occurs, does changing cell values or the name of a field or something like that cause a re-render, or does it seem like the app stops responding to changes entirely?
@fintable, we’ll look into that blank docs page! thanks for highlighting!!
