https://github.com/dburles/suspense-data-loader
An experimental React suspense and concurrent mode compatible data loading library
https://github.com/dburles/suspense-data-loader
async concurrent-mode data-loading react react-hooks suspense
Last synced: 12 months ago
JSON representation
An experimental React suspense and concurrent mode compatible data loading library
- Host: GitHub
- URL: https://github.com/dburles/suspense-data-loader
- Owner: dburles
- Created: 2020-11-13T02:09:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-29T09:30:07.000Z (almost 4 years ago)
- Last Synced: 2025-01-01T08:15:13.449Z (about 1 year ago)
- Topics: async, concurrent-mode, data-loading, react, react-hooks, suspense
- Language: JavaScript
- Homepage: https://codesandbox.io/s/suspense-data-loader-demo-forked-5d3co?file=/src/App.js
- Size: 22.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# suspense-data-loader
Experimental. Does not support SSR.
# API
## Table of contents
- [function createDataCache](#function-createdatacache)
- [function useDataLoader](#function-usedataloader)
- [function usePreloadedData](#function-usepreloadeddata)
- [constant DataCacheContext](#constant-datacachecontext)
- [type CacheKey](#type-cachekey)
- [type DataCache](#type-datacache)
- [type DataCacheLoad](#type-datacacheload)
- [type DataCachePreload](#type-datacachepreload)
- [type SubscriptionSubscribe](#type-subscriptionsubscribe)
- [type UseDataLoaderAPI](#type-usedataloaderapi)
- [type UseDataLoaderLoad](#type-usedataloaderload)
- [type UsePreloadedDataOptions](#type-usepreloadeddataoptions)
## function createDataCache
Creates a data cache.
| Property | Type | Description |
| :----------- | :----- | :---------------------------------------------------------------- |
| `maxEntries` | number | The maximum allowed cache entries before old entries are dropped. |
| Parameter | Type | Description |
| :------------ | :----- | :------------------------- |
| `userOptions` | object | User configurable options. |
**Returns:** [DataCache](#type-datacache) — A dataCache object.
---
## function useDataLoader
React hook that returns a cache reference and load function for a specified cache key.
| Parameter | Type | Description |
| :-------- | :------------------------- | :----------- |
| `key` | [CacheKey](#type-cachekey) | A cache key. |
**Returns:** [UseDataLoaderAPI](#type-usedataloaderapi) — The useDataLoader API.
---
## function usePreloadedData
Access preloaded data, suspends if data is unavailable.
| Parameter | Type | Description |
| :------------ | :------------------------------------------------------- | :------------------------- |
| `reference` | CacheReference | A cache reference. |
| `userOptions` | [UsePreloadedDataOptions](#type-usepreloadeddataoptions) | User configurable options. |
**Returns:** \* — The cached value
---
## constant DataCacheContext
A React context.
**Type:** object
| Property | Type | Description |
| :--------- | :------- | :------------------------------------------------------------------------------------ |
| `Provider` | Function | [React context provider component](https://reactjs.org/docs/context#contextprovider). |
| `Consumer` | Function | [React context consumer component](https://reactjs.org/docs/context#contextconsumer). |
---
## type CacheKey
The cache key.
**Type:** string | Array\
---
## type DataCache
A dataCache object.
**Type:** object
| Property | Type | Description |
| :------------- | :--------------------------------------------------- | :---------------------------------------------------------------------------- |
| `cache` | Map | The cache. |
| `get` | Function | Internal API. |
| `set` | Function | Internal API. |
| `subscription` | CreateSubscriptionAPI | Internal API. |
| `preload` | [DataCachePreload](#type-datacachepreload) | Preload asynchronous data. |
| `load` | [DataCacheLoad](#type-datacacheload) | Load asynchronous data. |
| `find` | string \| Function | Find references by key, takes a string or predicate function. |
| `onChange` | [SubscriptionSubscribe](#type-subscriptionsubscribe) | Called whenever cache is updated. First argument is key of updated reference. |
| `reset` | Function | Resets the cache. |
---
## type DataCacheLoad
Loads data into the cache.
**Type:** Function
| Parameter | Type | Description |
| :-------- | :------------------------- | :--------------------------------- |
| `key` | [CacheKey](#type-cachekey) | A cache key. |
| `asyncFn` | Function | A function that returns a Promise. |
---
## type DataCachePreload
Returns cached entry if found, otherwise calls asyncFn and loads data into the cache.
**Type:** Function
| Parameter | Type | Description |
| :-------- | :------------------------- | :--------------------------------- |
| `key` | [CacheKey](#type-cachekey) | A cache key. |
| `asyncFn` | Function | A function that returns a Promise. |
---
## type SubscriptionSubscribe
**Type:** Function
| Parameter | Type | Description |
| :--------- | :------- | :------------------------------------------- |
| `callback` | Function | A function to call whenever an event occurs. |
**Returns:** Function — Unsubscribe.
---
## type UseDataLoaderAPI
The useDataLoader API.
**Type:** Array
| Property | Type | Description |
| :------- | :------------------------------------------- | :----------------------------------- |
| `0` | CacheReference | The cache reference. |
| `1` | [UseDataLoaderLoad](#type-usedataloaderload) | Loads data for this cache reference. |
---
## type UseDataLoaderLoad
Loads data into this cache reference.
**Type:** Function
| Parameter | Type | Description |
| :-------- | :------- | :--------------------------------- |
| `asyncFn` | Function | A function that returns a Promise. |
---
## type UsePreloadedDataOptions
usePreloadedData Options
**Type:** object
| Property | Type | Description |
| :-------------- | :------ | :-------------------------- |
| `reloadOnMount` | boolean | Disable reloading on mount. |