Custom App not always reloading on filter

[Bryony_Miles]

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();

[fintable]

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>;
}

[somehats]

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!!