How should I know the correct cache key when I use global mutate function

[mafirat]

I'm stuck with mutate system. I'm going to try to explain my situation, I hope I can make it.

I'm working on a social media app, it's something like a combination of Instagram and Twitter. We have a weird RestAPI design in here. for example, we have three endpoints, and let's say A, B, C. all of them return the same type object array(post[]) and have three routes for these endpoints.

// 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}/>)}/>
  )
}

as you can see, I need to update cached data but I don't know how can I pass the correct SWR key to mutate function in that delete handler. In the end, I have many keys because of API design. Also, I use useSWRInfinite too, and it generates new keys when scrolling down.

I can't use the useUser pattern for each endpoint with this case because there are many endpoints and filter queries.

[anothertempore]

We can consider passing the bound mutate method as props into Post component. 🤔

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

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

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

   // update cached SWR data with mutate func
   props.mutate()
 }
  return(
    <div>
      // some other UI components
      </div>
  )
}

[mafirat]

Oh yes. I'm using this method but most of the time "one does not simply pass the method as props" case happens 😀 . There are so many components in the component tree need to access that mutate method. And thank you.