Can I use SWR outside of react, in pure js?

[jared83]

I want to keep data fetching/caching decoupled from react/components, and only interface it via React useReducer/Context.
For that I need to be able to use SWR outside of React.
Does SWR have a pure js API?
Best regards,
Jared

[sergiodxa]

The useSWR hook is React only, but the cache and global mutate function is exposed and you could access it outside React.

[jared83]

Thank you so much!
Could you provide an example?
Does the cache and the mutate function reside on the browser's window object?

[sergiodxa]

You can import them as

import { cache, mutate } from "swr";

But you shouldn't use them to read the data from the cache, mutate is used to update the data and the cache is exposed for more advanced usage like sync the cache with localStorage.

To read the data, and to fetch data, you should use the useSWR hook inside a React component.

[jeremytenjo]

Hi @sergiodxa , cache is not exported from swr anymore.

How to I access cache from outside a react hook?

Thanks

[hems]

That's something i also wonder.

I also would like to be able to useSWR outside of components in order to leverage some of the features such as:

• Built-in cache and request deduplication
• Polling on interval
• Revalidation on focus
• Revalidation on network recovery
• Local mutation (Optimistic UI)

This way for instance i can call useSWR in order to "preload" some data without needing to attach that part of the application logic to an UI object.

Does that make sense?

[shuding]

Preloading data makes a good point (currently you can prefill the cache manually with mutate). Happy to provide an example if you need one.

However it's impossible to use useSWR, which is a React hook, outside of the React lifecycle.

[hems]

Preloading data makes a good point (currently you can prefill the cache manually with mutate).

The other features such as automatically retry when network comes back or the user focus on the TAB is also very nice.

I think the code could potentially be split so those functionalities would be available out of the React Lifecycle?

Check zustand they have implemented a very nice and minimalistic solution where the state management can happen both, inside and outside of React, which on my opinion is the best possible implementation.

Happy to provide an example if you need one.

i'm very familiar with mutate and cache by now, thank you!

It would be great to tap on some of those features from the vanilla js part of my app, embrace the 90's ( :

[shuding]

I see. 👍 This is a solid point and can definitely be our long-term goal!

I think the code could potentially be split so those functionalities would be available out of the React Lifecycle?

[jeremytenjo]

Cache is not exported from swr anymore.

How to I access cache from outside a react hook?

Thanks

[jdolinski1]

Any update on the @jeremytenjo question from devs? Why is cache not exported from swr anymore @shuding?

Thanks.

[hems]

Any update on the @jeremytenjo question from devs? Why is cache not exported from swr anymore @shuding?

Thanks.

@jeremytenjo / @jdolinski1 i have created an issue for that some time ago but unfortunately i got no answer :(

see it here -> #2352 maybe give it a thumbs up or comment on it!

[shuding]

Hi all! I wrote a reply here: #2352 (comment)

[haozi]

I wrote a npm-package that can do something similar: https://github.com/ha0z1/idmp

[zhanzizhen]

I did it by import the swr/_internal util.

import { type Arguments as CacheKey, serialize, createCacheHelper } from 'swr/_internal';
import { SWRConfig } from 'swr';

function createCacheHelperV2<Data>(_k: CacheKey) {
  const [key] = serialize(_k);
  if (!key) {
    throw Error('wrong key');
  }

  const [get, set] = SWRConfig.defaultValue.cache ? createCacheHelper(SWRConfig.defaultValue.cache, key) : [];

  return {
    cache: get?.().data as Data | undefined,
    setCache: (data: Data) => set?.({ data }),
  };
}

/**
 * @description Provides an interface cache implementation that does not depend on react-hooks and shares a set of caches with useSWR.
 */
const cacheUtil = {
  /**
   * @description Returns the cache if it exists, otherwise makes a request.
   * @param key Cache key, same as useSWR key
   * @param fetcher Interface request to be called when there is no cache
   * @returns
   */
  async cacheFirst<K extends CacheKey, Data>(key: K, fetcher: (v: K) => Promise<Data>): Promise<Data> {
    const { cache, setCache } = createCacheHelperV2<Data>(key);

    if (cache) {
      return cache;
    }

    const res = await fetcher(key).then(res => {
      setCache(res);
      return res;
    });
    return res;
  },
  /**
   * @description Makes a request and returns the cache first (if any).
   * @param key Cache key, same as useSWR key
   * @param fetcher Interface request to be called during the revalidation phase
   * @returns
   */
  async swr<K extends CacheKey, Data>(key: K, fetcher: (v: K) => Promise<Data>): Promise<Data> {
    const { cache, setCache } = createCacheHelperV2<Data>(key);

    const fetchPromise = fetcher(key).then(res => {
      setCache(res);
      return res;
    });

    return cache || (await fetchPromise);
  },
  /**
   * @description Makes a request, returns the cache if the request fails.
   * @param key Cache key, same as useSWR key
   * @param fetcher Interface request
   * @returns
   */
  async networkFirst<K extends CacheKey, Data>(key: K, fetcher: (v: K) => Promise<Data>): Promise<Data> {
    const { cache, setCache } = createCacheHelperV2<Data>(key);

    try {
      const res = await fetcher(key);
      setCache(res);
      return res;
    } catch (e) {
      if (cache) {
        return cache;
      } else {
        throw e;
      }
    }
  },
};

export default cacheUtil;