Web Browser Methods
NEAR 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
nulland 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.
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:
nullif the cache is cold and data is fetching- the
cached valuewhile the data is being fetched - A new
valueif new data is fetched.
Parameters
| param | required | type | description |
|---|---|---|---|
promiseGenerator | required | object | a function that returns a promise, which generates data. |
dataKey | required | object | the unique name (within the current component) to identify the data. |
options | optional | object | optional argument. |
subscribe(optional): iftrue, the data refreshes periodically by invalidating cache.
promiseGenerator: you don't return the promise directly, because it should only be fired once.
The fetch method is built on top of the useCache hook.
The data is being cached and compared as JSON serialized objects.
LocalStorage​
NEAR Components have access to a simulated localStorage through the Storage object:
Parameters
Storage.get​
Storage.get(key, widgetSrc?) - returns the public value for a given key under the given widgetSrc or the current component if widgetSrc is omitted. Can only read public values.
| param | required | type | description |
|---|---|---|---|
key | required | object | a user-defined key |
widgetSrc | optional | object | a user-defined component |
Storage.set​
Storage.set(key, value) - sets the public value for a given key under the current widget. The value will be public, so other widgets can read it.
| param | required | type | description |
|---|---|---|---|
key | required | object | a user-defined key |
value | required | object | a user-defined value |
Storage.privateGet​
Storage.privateGet(key) - returns the private value for a given key under the current component.
| param | required | type | description |
|---|---|---|---|
key | required | object | a user-defined key under the current component |
Storage.privateSet​
Storage.privateSet(key, value) - sets the private value for a given key under the current component. The value is private, only the current component can read it.
Private and public values can share the same key and don't conflict.
| param | required | type | description |
|---|---|---|---|
key | required | object | a user-defined key under the current component |
value | required | object | a user-defined value |
Clipboard​
NEAR 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.
