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.
Yes, each call to
watch() should have a matching call to
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
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.
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?
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