본문으로 건너뛰기

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

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.
노트
  • 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:

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.

노트

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...
Was this page helpful?