https://github.com/lxsmnsyc/solid-cache

Resource caching in SolidJS
https://github.com/lxsmnsyc/solid-cache

cache fetch solid-js suspense

Last synced: about 2 months ago
JSON representation

Resource caching in SolidJS

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-cache
• Owner: lxsmnsyc
• License: mit
• Created: 2022-07-03T02:16:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-28T05:37:59.000Z (11 months ago)
• Last Synced: 2024-10-06T11:16:04.795Z (2 months ago)
• Topics: cache, fetch, solid-js, suspense
• Language: TypeScript
• Homepage:
• Size: 479 KB
• Stars: 33
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Cache - Resource caching in SolidJS (📦 Components & Libraries / Storage)

README

        
# solid-cache

> Cache boundaries and resource caching in SolidJS

[![NPM](https://img.shields.io/npm/v/solid-cache.svg)](https://www.npmjs.com/package/solid-cache) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-cache/tree/main/examples/demo)

## Install

```bash

npm i solid-cache

```

```bash

yarn add solid-cache

```

```bash

pnpm add solid-cache

```

## Usage

### ``

`` creates a contextual cache for all the cached resources to read/write resource results.

```jsx

import { CacheBoundary } from 'solid-cache';

export default function App() {

  return (

    

      

    

  );

}

```

It's ideal to add a `` at the root of your application, but you can also do it granularly such that different parts of the application don't have to share the same cache.

```jsx

<>

  

    

  

  

    

  

>

```

### `createCachedResource`

A primitive similar to `createResource`, except `createCachedResource` works differently.

For `createCacheResource` to be "cached", it requires a `` as an ancestor component, and it needs a "key" so it knows where to access or share its cached data.

`createCachedResource` also returns `data` and `isFetching`: `data` is a `Resource` while `isFetching` is a reactive boolean signal.

```jsx

import { createCachedResource } from 'solid-cache';

function Profile() {

  const { data, isFetching } = createCachedResource({

    key: '/profile',

    get: () => getUserProfile(),

  });

  return (

    


      }>

        

        

      

    

  );

}

```


`createCachedResource` can also accept a `source` like `createResource` however it won't refetch if the `key` remains unchanged.

```jsx

const { data, isFetching } = createCachedResource({

  source: () => id(),

  key: (currentId) => `/user/${currentId}`,

  get: (currentID) => getUser(currentId),

});

```

If there are multiple `createCachedResource` instances that share the same key, only one is going to fetch and the rest will re-use the same cached value as the fetching instance.

### `useCacheBoundaryRefresh`

`useCacheBoundaryRefresh` returns a function that makes all `createCachedResource` instances to simultaneously refresh in the same ``.

```js

function RefreshUser() {

  const refresh = useCacheBoundaryRefresh();

  return  refresh()} />

}

```

However, if you want to "refresh in the background" while keeping the old data, you can call `refresh(true)` instead, this way, the UI doesn't need to show a loading UI.

### `fetch`

A wrapper for `createCachedResource` and the native `fetch` API.

```jsx

import { fetch } from 'solid-cache';

function DogImage() {

  const { data, isFetching } = fetch('https://dog.ceo/api/breed/shiba/images/random').json();

  return (

    

      

    

  );

}

```

## Sponsors

![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)