如何在SWR hook中调用携带查询参数的mutate方法？

问题本质 #

你当前组件仅通过useSWR('/api/post', fetcher)订阅了/api/post这个key对应的缓存，调用mutate('/api/post?author=1&pricing=1')只会操作带参数key的缓存，不会触发当前组件的状态更新，且如果没有其他组件订阅这个带参数的key，这个mutate操作不会产生任何可见效果。

解决方案 #

根据你的业务场景可以选择以下两种实现方式：

方案1：点击按钮后切换展示完整接口数据 #

如果需要在当前组件切换展示带参数返回的完整数据，用状态控制SWR的key即可，SWR会自动监听key变化发起新请求：

import useSWR, { useSWRConfig } from 'swr'
import { useState } from 'react'

function Profile () {
  const [showFullInfo, setShowFullInfo] = useState(false)
  // SWR会根据key的变化自动发起新请求
  const { data } = useSWR(
    showFullInfo ? '/api/post?author=1&pricing=1' : '/api/post', 
    fetcher
  )

  return (
    <div>
      <h1>Title post {data?.title}.</h1>
      <button onClick={() => setShowFullInfo(true)}>
        View more information of this post!
      </button>
      {showFullInfo && <p>作者：{data?.author}</p>}
    </div>
  )
}

方案2：不切换key，直接更新原有key的缓存为完整数据 #

如果你不想修改原有SWR的key，希望点击按钮后把带参数请求的完整数据覆盖到原有key的缓存，可以主动请求带参数接口后调用原有key的mutate更新缓存：

import useSWR, { useSWRConfig } from 'swr'

function Profile () {
  const { mutate } = useSWRConfig()
  const { data } = useSWR('/api/post', fetcher)

  return (
    <div>
      <h1>Title post {data?.title}.</h1>
      <button onClick={async () => {
        // 主动请求带参数的完整数据
        const fullPostData = await fetcher('/api/post?author=1&pricing=1')
        // 更新原有key的缓存，关闭自动重新校验避免重复请求
        mutate('/api/post', fullPostData, { revalidate: false })
      }}>
        View more information of this post!
      </button>
    </div>
  )
}

如果你的需求是仅预加载带参数key的缓存供其他组件使用，直接在mutate时显式开启重新校验即可：

mutate('/api/post?author=1&pricing=1', undefined, { revalidate: true })

内容的提问来源于stack exchange，提问作者Anna