Web Browser Methods
Anatomy of a DapDap Component: Web Browser Methods
DapDap Components have access to classic web methods that enable them to:
Fetch data from external sources.
Cache values to avoid redundant computations.
Use LocalStorage to store data in the web browser.
Access to the Clipboard.
Fetch
fetch
allows to fetch data from the URL. It acts like a hook. It's a wrapper around the fetch
function from the browser behind the caching layer.
The possible returned values are:
If the data is not cached, it returns
null
and fetches the data in the background.If the data is cached, it returns the cached value and then revalidates it.
Async Version
asyncFetch
is the async
version of fetch
, meaning that it returns a promise instead of a value.
:::tip In contrast with fetch
, asyncFetch
does not cache the resulting value, so it should only be used within a function to avoid frequent requests on every render. :::
Cache
The useCache
hook takes a promise through a generator function, fetches the data and caches it. It can be used to easily use and cache data from async data sources.
The cache is global for the VM, but each cached element is identified by a unique dataKey
within each component.
The possible values returned are:
null
if the cache is cold and data is fetchingthe
cached value
while the data is being fetchedA new
value
if new data is fetched.
:::tip The fetch method is built on top of the useCache
hook. :::
:::note The data is being cached and compared as JSON serialized objects. :::
LocalStorage
DapDap Components have access to a simulated localStorage
through the Storage
object:
Storage.get
Storage.set
Storage.privateGet
Storage.privateSet
Clipboard
DapDap Components can write data to the system's clipboard through the clipboard.writeText
method.
Writing to the clipboard is only allowed in trusted actions, for example, when the user clicks a button.
Last updated