access fallback through useSWRConfig().cache

[JCB-K]

It doesn't seems to be possible to access the fallback value passed to SWRConfig by reading the cache through useSWRConfig, like in the following example:

import React from "react";
import useSWR, { useSWRConfig, SWRConfig } from "swr";

const Component = () => {
  const { cache } = useSWRConfig();
  const { data } = useSWR("foo", () => Promise.resolve("fetcher"));
  const output = { fromCache: cache.get("foo"), fromHook: data };
  console.log(output);
  return JSON.stringify(output);
};

export default function App() {
  return (
    <SWRConfig value={{ fallback: { foo: "fallback" } }}>
      <Component />
    </SWRConfig>
  );
}

1. is this expected behaviour?
2. is it possible to access the fallback value in any other way than useSWR?

[koba04]

@JCB-K

is this expected behaviour?

Yes, fallback is not initialData. SWR doesn't store the fallback value in the cache. The fallback is used for fallback data when there is no loaded data corresponding to the key. I think we should clarify the behavior in the documentation.

is it possible to access the fallback value in any other way than useSWR?

I'm not sure what the use case is, but you can get the fallback value from the config.

  const { fallback } = useSWRConfig();

[JCB-K]

@koba04 thank you - that's very useful!

The use case here is two-fold:

• I use fallback to provide initialData at the root of the application, rather than having to pass it through the component tree to where `useSWR is called
• I read from cache.get as a way to read lazy (non-reactive) data, to be used in callbacks

Example:

import React from "react";
import useSWR, { useSWRConfig, SWRConfig } from "swr";

const useLazyData = () => {
  const { cache, fallback } = useSWRConfig();
  return React.useCallback(() => {
    return cache.get("foo") ?? fallback["foo"];
  }, [cache, fallback]);
};

const useData = () => useSWR("foo", () => Promise.resolve("fetcher"));

const Component = () => {
  const { data } = useData();
  return data;
};

const Button = () => {
  const lazyData = useLazyData();
  return <button onClick={() => console.log(lazyData())}>Click</button>;
};

export default function App() {
  return (
    <SWRConfig value={{ fallback: { foo: "fallback" } }}>
      <Component />
      <Button />
    </SWRConfig>
  );
}