Skip to main content

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

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


}

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

Reply


Terms & Conditions