priem ·
React Hook to declaratively subscribe to external data resources.
Table of Contents
Installation
yarn add priem
Getting Started
App.js
import React from 'react';import createResource from 'priem'; const useReddit = ; const redditData pending = ; if !redditData return pending ? <h2>Loading...</h2> : <h2>Empty</h2>; return <div => <ul> redditData </ul> </div> ;;
server.js
import React from 'react';import ReactDOM from 'react-dom/server';import getDataFromTree from 'priem/server';import flushStore from 'priem';import App from './App'; app;
client.js
import React from 'react';import ReactDOM from 'react-dom';import hydrateStore from 'priem'; ;delete window__PRIEM_STORE__; // Note that the import order is important hereconst App = default; ReactDOM;
Examples
Example apps can be found under the examples/
directory.
API
createResource
Creates a React Hook that fetches and caches data.
Arguments
fn
: (AsyncFunction): An async function that takes arguments fromuseResource
and must return a Promise. If promise rejects, the cache item corresponding to these arguments will have a rejected status.options
(Object): An options object, that can have the following properties:maxAge
(number?): A time in milliseconds after which cache items will expire and trigger a refresh.maxSize
(number?): A number of maximum cache entries in store. After exceeding this amount the most former used item will be removed and a refresh triggered. Defaults to 1.refreshOnMount
(Boolean?): Refreshes data on mounting. Default to false.ssrKey
(string?): A unique key that will be used to place this resource to the store. Required for server-side rendering.
Returns
useResource
.
useResource
A React Hook for subscribing to resources.
Arguments
args
(Record<string, unknown> | undefined): An array of arguments that will be passed to a function increateResource
. Can also beundefined
which will prevent the update which can be utilized for waiting for other async tasks or user interactions to finish. Defaults to[]
.
Returns
The function returns a tuple with data and a meta object:
data
(any): The last successful data. Defaults toundefined
.meta
(Object): Meta properties of most recent promise.pending
(boolean).rejected
(boolean).reason
(Error?).refresh
(Function): a method to update the resource.
getDataFromTree(element)
An async function that walks the component tree and fetches data from resources that have ssrKey
set. Returns a
promise that either resolves with undefined
or rejects on errors.
hydrateStore(initialStore)
A function to hydrate internal store with initial data from server.
flushStore()
A function that clears internal store and returns it. It's safe to serialize it and send to client.