如何使用 SWR 钩子中的查询参数进行变异？

Question

目前我正在使用 SWR 来获取数据，我尝试使用 SWR 的 Mutation 功能来重新获取新数据，但是当我通过以下方式调用 mutate() 时出现了问题key 添加了新的查询参数。

我的代码不起作用：

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={() => {            
        mutate('/api/post?author=1&pricing=1')
      }}>
        View more information of this post!
      </button>

    </div>
  )
}

我从 SWR 阅读了文档，我知道 mutate 的键应该与 useSWR() 中的键相同，但在我的情况下需要更多查询参数来获取相应的数据

我该如何解决这个问题？请帮助我！

Answer 1

我不建议在这种情况下使用 mutate，因为您要在突变中使用的 key（URL）与原始的不同。当 mutate 被调用时，它将更新 '/api/post' 的缓存，然后它将包含来自 '/api/post?author=1&pricing=1' 的数据。

作为替代方案，我建议您在 useSWR 调用中将 key 设为一个数组，以便可以将多个参数传递给 fetcher.

const [queryParams, setQueryParams] = useState('')
const { data } = useSWR(['/api/post', queryParams], fetcher)

然后，在您的按钮 onClick 处理程序中，您可以更新 queryParams 状态值以触发重新呈现并使用查询参数发起新请求。

<button onClick={() => {            
    setQueryParams('?author=1&pricing=1')
}}>
    View more information of this post!
</button>

您还需要稍微修改 fetcher 函数以期望有多个参数，并将您传递的查询参数附加到 URL.

const fetcher = (url, queryParams = '') => {
    // Example fetch to demonstrate the logic
    return fetch(`${url}${queryParams}`)
}

通过此更改，您现在为每个 URL 请求提供了不同的密钥（和缓存数据）。

如何使用 SWR 钩子中的查询参数进行变异？

How to mutate with query params in SWR hook?

reactjs

swr