lxsmnsyc / solid-cache

Resource caching in SolidJS

solid-cache

Cache boundaries and resource caching in SolidJS

Install

npm i solid-cache

yarn add solid-cache

pnpm add solid-cache

Usage

<CacheBoundary>

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

import { CacheBoundary } from 'solid-cache';

export default function App() {
  return (
    <CacheBoundary>
      <Main />
    </CacheBoundary>
  );
}

It's ideal to add a <CacheBoundary> 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.

<>
  <CacheBoundary>
    <Navigation />
  </CacheBoundary>
  <CacheBoundary>
    <PageContent />
  </CacheBoundary>
</>

createCachedResource

A primitive similar to createResource, except createCachedResource works differently.

For createCacheResource to be "cached", it requires a <CacheBoundary> 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.

import { createCachedResource } from 'solid-cache';

function Profile() {
  const { data, isFetching } = createCachedResource({
    key: '/profile',
    get: () => getUserProfile(),
  });

  return (
    <div
      style={{
        opacity: isFetching() ? 0.5 : 1,
      }}
    >
      <Suspense fallback={<ProfileSkeleton />}>
        <ProfileDetails data={data()?.details} />
        <ProfileTimeline data={data()?.posts} />
      </Suspense>
    </div>
  );
}

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

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

function RefreshUser() {
  const refresh = useCacheBoundaryRefresh();

  return <RefreshButton onClick={() => 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.

import { fetch } from 'solid-cache';

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

  return (
    <Suspense>
      <img
        src={data()?.message}
        style={{ opacity: isFetching() ? 0.5 : 1 }}
      />
    </Suspense>
  );
}

Sponsors

License

MIT © lxsmnsyc