Is using Cache as global state a good idea? and is this the best way to do it?

[MightyMoud]

Hi guys,

So I have a stock app where I need to load the user positions for each symbol. So I fetch it with SWR. Thing is, I want to only validate if the cache doesn't have the data of that symbol. If the user goes to another page of another symbol, we should fetch his positions for that symbol and store it in cache under a different key. I got the implentation to work and it's all good. I'm really curious if it's a good idea and if my way is the best way to do it. I wish we had access to the key in the revalidateOnMount part of the options, that would have made my idea much simpler. Take a look a below please and let me know what you think?

  const { data: userPositionsPerSymbol, error: fetchError } = useSWR(
    symbol ? [`/positions`, 'symbol', symbol] : null,
    axiosFetcherWithParams,
    {
      revalidateOnMount: !cache.has(`/positions?symbol=${symbol}`), // here we refer to the SWR cache
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
    },
  );

The fetcher is here:

export const axiosFetcherWithParams = (
  url: string,
  queryKey: string,
  queryVal?: string,
): any =>
  Axios.get(`${url}?${stringify({ [queryKey]: queryVal })}`).then((res) => res.data);

I tried to pass the object directly const query = {symbol} but that resulted in a loop...

What do you guys think?

[MightyMoud]

Also I am not sure if this a bad idea or something, but I had this working before and had to change it to adhere to the usage mentioned in the docs for arguments. But I wanna ask is this wrong?:

  const { data: userPositionsPerSymbol, error: fetchError } = useSWR(
    symbol ? `/positions?symbol=${symbol}` : null,
    axiosFetcher,
    {
      revalidateOnMount: !cache.has(`/positions?symbol=${symbol}`), // here we refer to the SWR cache
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
    },
  );

It greatly simplifies my fetcher...

[joshkel]

From what I understand, useSWR doesn't really care which style you use. In other words:

• Passing objects will cause problems because they'll look like they're always changing.
• Passing implicit parameters will cause problems because useSWR will think they never change. (The token parameter in useSWR('/api/user', url => fetchWithToken(url, token)) isn't part of useSWR's arguments, so it can't know when it changes.)
• Other than those caveats, there's no real difference between passing an array of arguments to your fetcher, and letting your fetcher process them, versus constructing a single key out of your arguments, then passing that key to your fetcher, so do whichever's convenient.

[MightyMoud]

Anyone? 😅

[joshkel]

In general, I think, the cache should be considered an implementation detail. You can access it directly, but you're missing out on some of useSWR's abstractions, which can make things more complicated.

In this particular case, I don't see a way in the useSWR API to do what you're wanting, so accessing the cache seems fine. (If it helps, you're not using cache as arbitrary global state; you're just using it for more fine-grained read-only knowledge of useSWR's own behavior.)

[MightyMoud]

Agreed. I think the way you're thinking about it is more accurate. Thanks for highlighting the difference.

This works for me very well, as I think many times I see global state management just used for fetching and feeding data from API which I think is an overkill. If we can get access to key by default on the cache property it would be awesome. I have already abstracted this part away in a custom hook like below: (just for reference if someone wants to use the same approach)

// Not sure about the name, nor the error type
export function useSWRWithCache(url: string, query = true): { data: unknown; error: Error } { 
  const { data, error } = useSWR(query ? url : null, {
    revalidateOnMount: !cache.has(url),  // Moved other two option to global config
  });

  return {
    data,
    error,
  };
}

I use it like this:

 const { data, error } = useSWRWithCache(`/portfolios`);

Or this:

  const { data: userPositionsPerSymbol, error: fetchError } = useSWRWithCache(
    `/positions?symbol=${symbol}`,
    !!symbol,
  );