0

我被 Vercel 的 SWR 变异系统困住了。我将尝试解释我的情况，我希望我能做到。

我正在开发一个社交媒体应用程序，它类似于 Instagram 和 Twitter 的组合。我们这里有一个奇怪的 RestAPI 设计。例如，我们有三个端点，假设 A、B、C。它们都返回相同类型的对象数组（post[]），并为这些端点提供三个路由。

// Post.jsx
const Post =(props)=> {
 const deleteHandler =()=> {
   //delete post

   // update cached SWR data with mutate func
 }
  return(
    <div>
      // some other UI components
      </div>
  )
}
// pageX.jsx
const PageX =()=> {
  const {data:posts} =useSWR("/api/A", fetcher);

  return(
    <List dataSource={posts} render={p=>(<Post data={p}/>)}/>
  )
}

// pageY.jsx
const PageY =()=> {
  const {data:posts} =useSWR(["/api/B",crateDate],fetcher);

  return(
    <List dataSource={posts} render={p=>(<Post data={p}/>)}/>
  )
}

// pageZ.jsx
const PageZ =()=> {
  const {data:posts} =useSWR(["/api/C",categoryId], fetcher);

  return(
    <List dataSource={posts} render={p=>(<Post data={p}/>)}/>
  )
}

如您所见，我需要更新缓存数据，但我不知道如何将正确的 SWR 密钥传递给该删除处理程序中的 mutate 函数。最后，由于 API 设计，我有很多密钥。另外，我也使用useSWRInfinite它，它在向下滚动时会生成新键。

我们正在使用 NextJS React 框架。

4

0 回答 0