Data not fetched when missing from cache, when revalidateOn* config set to false

There are some requests that I’m happy to fill the cache, and then always return the cached value without revalidating. However, I can’t figure out the correct config to achieve this?

My understanding from #@sergiodxa’s comment here: https://github.com/vercel/swr/issues/450#issuecomment-642280493

was that setting the revalidate config properties to false would enable data to be fetched when it is not present in the cache, and then not fetched again. However, this doesn’t seem to be the case:

https://codesandbox.io/s/still-thunder-wq9df?file=/src/App.js

The following just always shows ‘no data’.

import React from "react";
import useSWR from "swr";

export const App = () => {
  const { data, error, isValidating } = useSWR(
    "/api/user",
    async () => {
      console.log("fetching user");
      return { name: "Amy " + Math.random() };
    },
    {
      revalidateOnFocus: false,
      revalidateOnMount: false,
      revalidateOnReconnect: false
    }
  );

  if (error) return <div>failed to load {error}</div>;
  if (isValidating) return <div>validating...</div>;
  if (!data) return <div>no data...</div>;
  return <div>hello {data.name}!</div>;
};

Am I missing something? Thanks!

[sergiodxa]

You can set revalidateOnMount to true and call mutate in an effect.

import React from "react";
import useSWR from "swr";

export const App = () => {
  const { data, error, isValidating, mutate } = useSWR(
    "/api/user",
    async () => {
      console.log("fetching user");
      return { name: "Amy " + Math.random() };
    },
    {
      revalidateOnFocus: false,
      revalidateOnMount: false,
      revalidateOnReconnect: false
    }
  );

  React.useEffect(() => {
    if (!data) mutate()
  }, [data, mutate]);

  if (error) return <div>failed to load {error}</div>;
  if (isValidating) return <div>validating...</div>;
  if (!data) return <div>no data...</div>;
  return <div>hello {data.name}!</div>;
};

That should trigger a fetch and update the cache, the function to be used to fetch is the fetcher you passed to useSWR.

[jamescrowley]

Thanks folks 😃

@shuding for our use case, we have data that we read where the records are static (think event log type data) - hence we want the caching benefit, but have no need to re-validate.

I’ll go with @sergiodxa 's suggestion for now, thanks.