useQuery for managing user prefs in localStorage

[DannyDelott]

Treating window.localStorage as a just another side-effect client can be tricky in React, because changes to localStorage do not cause re-renders on their own. For that, a React binding of some kind is required.

Using react-query, we wrote a custom hook, usePref that lets components get/set localStorage values which then trigger re-renders as you'd expect.

// Custom hook 
export function usePref<T>(id: string, defaultValue: T): PrefResult<T> {
  const queryKey = makePrefQueryKey(id);

  const { data } = useQuery<T>(
    queryKey,
    (key: string[], variables: PrefVariables) => {
      return getPrefFromLocalStorage(variables.id) ?? defaultValue;
    },
    {
      initialData: () => getPrefFromLocalStorage<T>(id) ?? defaultValue,
    }
  );

  const setPref = useCallback(
    (newPref: T) => {
      // Use an envelope because JSON.stringify likes serializable objects and
      // prefs could be anything
      const prefEnvelope = makePrefEnvelope(newPref);
      localStorage.setItem(id, JSON.stringify(prefEnvelope));

      // Invalidate this pref so callers will re-ensure the data as needed
      queryCache.invalidateQueries((query) => {
        return isEqual(query.queryKey, queryKey);
      });
    },
    [id, queryKey]
  );

  return {
    pref: data as T, // safe to cast because initialData is set in useQuery
    setPref,
  };
}

function makePrefQueryKey(id: string) {
  const queryKey = [["prefs"], { id }];
  return queryKey;
}

function getPrefFromLocalStorage<T>(id: string) {
  const prefString = localStorage.getItem(id);
  if (!prefString) {
    return;
  }

  const prefEnvelope: PrefEnvelope<T> = JSON.parse(prefString);
  return prefEnvelope.pref;
}

export interface PrefEnvelope<T> {
  pref: T;
  version: string;
}

const PREF_ENVELOPE_VERSION = "1.0.0";

// exported for testing only
export function makePrefEnvelope<T>(pref: T): PrefEnvelope<T> {
  return { pref, version: PREF_ENVELOPE_VERSION };
}

[TkDodo]

I thought react-query needs us to return a Promise from the fetch-fn, and localStorage.getItem is synchronous, is it not?

[DannyDelott]

Perhaps it's unintentional (or this behavior changes in v3?), but useQuery doesn't actually care if your queryFn returns a promise or not:

export declare type QueryFunction<TResult> = (...args: any[]) => TResult | Promise<TResult>;

You are right though in that localStorage access is synchronous-- this is part of our reasoning to use react-query to avoid unnecessary calls into localStorage during renders :)

[tannerlinsley]

The result of the fetchFn is wrapped in a resolve, so yes, technically you can just return synchronous data. We do it in our tests all the time and you can do it in v2 too ;)

[TkDodo]

Ah, i didn’t know that 👍