ミドルウェア

function myMiddleware (useSWRNext) {
  return (key, fetcher, config) => {
    // フックが実行される前...
 
    // 次のミドルウェア、またはこれが最後のミドルウェアの場合は `useSWR` を処理します。
    const swr = useSWRNext(key, fetcher, config)
 
    // フックが実行された後...
    return swr
  }
}

<SWRConfig value={{ use: [myMiddleware] }}>
 
// または...
 
useSWR(key, fetcher, { use: [myMiddleware] })

function Bar () {
  useSWR(key, fetcher, { use: [c] })
  // ...
}
 
function Foo() {
  return (
    <SWRConfig value={{ use: [a] }}>
      <SWRConfig value={{ use: [b] }}>
        <Bar/>
      </SWRConfig>
    </SWRConfig>
  )
}

useSWR(key, fetcher, { use: [a, b, c] })

useSWR(key, fetcher, { use: [a, b, c] })

enter a
  enter b
    enter c
      useSWR()
    exit  c
  exit  b
exit  a

function logger(useSWRNext) {
  return (key, fetcher, config) => {
    // 元の fetcher に logger を追加します。
    const extendedFetcher = (...args) => {
      console.log('SWR Request:', key)
      return fetcher(...args)
    }
 
    // 新しいフェッチャーでフックを実行します。
    return useSWRNext(key, extendedFetcher, config)
  }
}
 
// ... コンポーネント内
useSWR(key, fetcher, { use: [logger] })

SWR Request: /api/user1
SWR Request: /api/user2

import { useRef, useEffect, useCallback } from 'react'
 
// これはキーが変更された場合でもデータを保持するための SWR ミドルウェアです。
function laggy(useSWRNext) {
  return (key, fetcher, config) => {
    // 以前に返されたデータを格納するには、 ref を使用します。
    const laggyDataRef = useRef()
 
    // 実際の SWR フック。
    const swr = useSWRNext(key, fetcher, config)
 
    useEffect(() => {
      // データが未定義ではない場合は、 ref を更新します。
      if (swr.data !== undefined) {
        laggyDataRef.current = swr.data
      }
    }, [swr.data])
 
    // 遅延データがある場合は、それをクリアするメソッドを公開します。
    const resetLaggy = useCallback(() => {
      laggyDataRef.current = undefined
    }, [])
 
    // 現在のデータが未定義の場合、前のデータに置き換えられます。
    const dataOrLaggyData = swr.data === undefined ? laggyDataRef.current : swr.data
 
    // 以前のデータを表示していますか？
    const isLagging = swr.data === undefined && laggyDataRef.current !== undefined
 
    // また `isLagging` フィールドを SWR に追加します。
    return Object.assign({}, swr, {
      data: dataOrLaggyData,
      isLagging,
      resetLaggy,
    })
  }
}

const { data, isLagging, resetLaggy } = useSWR(key, fetcher, { use: [laggy] })

function serialize(useSWRNext) {
  return (key, fetcher, config) => {
    // キーをシリアライズする
    const serializedKey = Array.isArray(key) ? JSON.stringify(key) : key
 
    // シリアライズされたキーを渡し、フェッチャーでシリアライズを解除します。
    return useSWRNext(serializedKey, (k) => fetcher(...JSON.parse(k)), config)
  }
}
 
// ...
useSWR(['/api/user', { id: '73' }], fetcher, { use: [serialize] })
 
// ... またはグローバルに有効にします
<SWRConfig value={{ use: [serialize] }}>