https://github.com/explodingcamera/react-sus
Minimal Suspense-based data-fetching
https://github.com/explodingcamera/react-sus
Last synced: 4 months ago
JSON representation
Minimal Suspense-based data-fetching
- Host: GitHub
- URL: https://github.com/explodingcamera/react-sus
- Owner: explodingcamera
- License: mit
- Created: 2022-02-01T12:58:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-12T21:26:32.000Z (over 3 years ago)
- Last Synced: 2025-01-22T02:32:15.643Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 231 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
react-sus
```bash
npm i react-sus
```
Minimal Suspense-based data-fetching (Currently in development and not production-ready)
## Example
TypeScript
```tsx
import { Suspense } from "react";
import { sus } from "react-sus";
interface User {
username: string;
}
const SomeComponent = ({ userID }: { userID: string }) => {
const data = sus(`https://api.example.com/user/${userID}`);
return
{data.username};
};
const App = () => (
Loading...}>
);
```
## API
Simplified API
```tsx
type sus = (
key: Key, // anything that can be serialized to a string
fetcher?: Fetcher | undefined,
userConfig?: Config
) => Await;
interface Config {
fetcher: Fetcher; // any promise or fetch-like function
cacheProvider: Cache; // any Map-like function
}
```
Any Component using this function needs to be wrapped in an `` block. Once the promise is started, control will be given back to react until the promise resolves and the actual data is returned.
The key acts as the key for caching the results, so be sure to not reuse the same cache keys for different requests (only relevant when they both use the same cacheProvider).
When an error occours, it will bubble up to the next ``. Because of this, the return value is guaranteed to be valid.
## Configuration
### Context
> will be available at release
### Pre-Loading
> will be available at release
### Cache Busting
> will be available at release
## Inspirations
This project seeks to combine the simplicity of swr with react-query's feature set and suspend-react's suspense support.
- [swr](https://github.com/vercel/swr)
- [suspend-react](https://github.com/pmndrs/suspend-react)
- [react-query](https://github.com/tannerlinsley/react-query)
## Related Projects
- [snowstorm](https://github.com/explodingcamera/snowstorm) - The lightning-fast and minimalist React Tool