Allow passing an object with a keyword "key" to set the cache key

[gkiely]

Currently a developer can pass a string, array or object and that gets parsed as the cache key.

Unfortunately this can make it difficult to reference in other areas of the code base.

It would be great to be able to pass an object and set the key, this would allow for complex queries which could then be referenced in other areas of the codebase with the singular key.

E.g.

const { data } = useSWR({
  key: 'my-simple-key', // library specific key that sets the cache key/value
  arg1: 'my-custom-arg'
}, async ({ key, arg1 } ) => {
  // my fetcher
});


// Elsewhere in the codebase
const { data } = useSWR('my-simple-key');

[gkiely]

I ended up writing some middleware that allows me to do this. Along the lines of:

import { type Middleware, type SWRHook } from 'swr';
import invariant from 'tiny-invariant';

export const fetchWithKey: Middleware = (useSWRNext: SWRHook) => (keyObj, fetcher, config) => {
  if (keyObj) {
    invariant(typeof keyObj === 'object' && 'key' in keyObj, 'Invalid key');
    invariant(!!fetcher, 'Invalid fetcher');
    return useSWRNext(keyObj.k, () => fetcher(keyObj), config);
  }
  return useSWRNext(keyObj, fetcher, config);
};