Watch / unwatch example documentation

[Ronen_Babayoff]

Hey,

I’ve been looking on all the sample blocks, but couldn’t find an example of how to use the watch / unwatch functionality in a fine grained matter. Specifically, do I need to call unwatch to cleanup after I call watch and if yes, use react useEffect to do that?

I don’t want to call useWatchable, because then I have to store a copy of the watchable key value in useState and compare new watchable value to current value in state and it seems like overkill.

My use case involves tracking the cursor.activeViewId.

Thanks,
Ronen

[Emma_Yeap]

Hi Ronen,

Yes, each call to watch() should have a matching call to unwatch() and useEffect() is one way you can do this (by calling unwatch() in the cleanup function). useWatchable and other hooks is our recommended method to handle this, so we don’t have many examples of directly watching/unwatching.

I’m not quite understanding why useWatchable doesn’t work in this case - could you elaborate on why you need to store a copy of the watchable key value in useState? More information on your use case would be helpful.

If your goal is to have the component re-render every time the active view changes, useWatchable(cursor, 'activeViewId') will work. The table structure example block demonstrates this in more detail: https://github.com/Airtable/blocks/blob/master/examples/table-structure-block/frontend/index.js#L18

[Ronen_Babayoff]

Hey Emma,

Yes, I ended up doing exactly that, using useWatchable(cursor, 'activeViewId'), but with a callback function that triggers a state change.

I think my problem was also that I didn’t call useLoadable(cursor) beforehand. That’s something that I ended up doing after looking how one of the example blocks is using the cursor and then reading about useLoadable.

Since your api relies heavily on loadable and watchable models, I would recommend covering those concepts in the guide, not only in the api docs.

I also would recommend covering in a bit more detail the implications of using React Suspense for data fetching in useLoadable. Suspense for data fetching is still an experimental feature that is not well documented, and I found out the hard way that I cannot call more then one suspending hook in a component.

Best,
Ronen

[Emma_Yeap]

Hi Ronen,

Thanks for the extra details and the feedback, glad to hear you got a solution working! Creating more guides is on our radar and we’ll keep your comments in mind.

I’m curious about the errors you encountered without using useLoadable(cursor) - this is not well documented, but you should only need to explicitly load the cursor model when using selectedRecordIds (the active table and view are loaded by default). Do you remember what the issue was?

Thanks,
Emma

[Emma_Yeap]

We just added a guide about reading and handling data from Airtable in your block that covers some of the concepts discussed here: Airtable Blocks SDK