Skip to main content

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 null and fetches the data in the background.
  • If the data is cached, it returns the cached value and then revalidates it.
Loading...

Async Version​

asyncFetch is the async version of fetch, meaning that it returns a promise instead of a value.

Loading...
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 fetching
  • the cached value while the data is being fetched
  • A new value if new data is fetched.
Loading...
Parameters
paramrequiredtypedescription
promiseGeneratorrequiredobjecta function that returns a promise, which generates data.
dataKeyrequiredobjectthe unique name (within the current component) to identify the data.
optionsoptionalobjectoptional argument.
options object
  • subscribe (optional): if true, the data refreshes periodically by invalidating cache.
note
  • promiseGenerator: you don't return the promise directly, because it should only be fired once.
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​

NEAR Components have access to a simulated localStorage through the Storage object:

Loading...
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.

paramrequiredtypedescription
keyrequiredobjecta user-defined key
widgetSrcoptionalobjecta 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.

paramrequiredtypedescription
keyrequiredobjecta user-defined key
valuerequiredobjecta user-defined value

Storage.privateGet​

Storage.privateGet(key) - returns the private value for a given key under the current component.

paramrequiredtypedescription
keyrequiredobjecta 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.

note

Private and public values can share the same key and don't conflict.

paramrequiredtypedescription
keyrequiredobjecta user-defined key under the current component
valuerequiredobjecta 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.

Loading...