TypeScript support for custom middleware

[huksley]

I am using middleware and add it this way: <SWRConfig value={{ use: [logger] }}>....</SWRConfig>

What would be proper typing for middleware from example in the docs?

function logger(useSWRNext) {
  return (key, fetcher, config) => {
    // Add logger to the original fetcher.
    const extendedFetcher = (...args) => {
      console.log('SWR Request:', key)
      return fetcher(...args)
    }

    // Execute the hook with the new fetcher.
    return useSWRNext(key, extendedFetcher, config)
  }
}

[huksley]

Answering myself, after much trial and error I figured out the following type signature. Full implementation included.

const logger = (useSWRNext: SWRHook) => {
  return (key: unknown, fetcher: BareFetcher | null, config: SWRConfiguration) => {
    let nextFetcher = fetcher;

    if (fetcher) {
      nextFetcher = (...args: unknown[]) => {
        const started = Date.now();
        const label = typeof key === "function" ? key() : Array.isArray(key) ? key.join(", ") : key;
        console.info("SWR Request", label);
        const response = fetcher(...args);
        if (response instanceof Promise) {
          return response.then(result => {
            console.info("SWR Request complete", label, "elapsed", Date.now() - started, "ms");
            return result;
          });
        } else {
          console.info("SWR Request complete", label, "elapsed", Date.now() - started, "ms");
          return response;
        }
      };
    }

    // Execute the hook with the new fetcher.
    return typeof key === "function"
      ? useSWRNext(key, nextFetcher, config)
      : useSWRNext(key as Arguments, nextFetcher, config);
  };
};

[kingllama]

I found this answer very helpful for writing my own type-safe middleware. I'm not sure what exactly has changed since this was posted in 2021 (typescript or the swr type definitions) but in 2024 adding the Data variable is necessary (Also setting the type of the logger variable to Middleware is handy).

I've updated the answer above

import { 
  Arguments,
  BareFetcher,
  Middleware,
  SWRHook,  
  SWRConfiguration
} from 'swr';

const logger: Middleware = (useSWRNext: SWRHook) => {
  return <Data = any>(key: unknown, fetcher: BareFetcher<Data> | null, config: SWRConfiguration) => {
    let nextFetcher = fetcher;

    if (fetcher) {
      nextFetcher = (...args: unknown[]) => {
        const started = Date.now();
        const label = typeof key === "function" ? key() : Array.isArray(key) ? key.join(", ") : key;
        console.info("SWR Request", label);
        const response = fetcher(...args);
        if (response instanceof Promise) {
          return response.then((result: Data) => {
            console.info("SWR Request complete", label, "elapsed", Date.now() - started, "ms");
            return result;
          });
        } else {
          console.info("SWR Request complete", label, "elapsed", Date.now() - started, "ms");
          return response;
        }
      };
    }

    // Execute the hook with the new fetcher.
    return typeof key === "function"
      ? useSWRNext(key, nextFetcher, config)
      : useSWRNext(key as Arguments, nextFetcher, config);
  };
};