how to refresh all swr hook used by nested components at top component?

[leviathan-n]

the docs recommends swr style is using swr hook in nested components instead of manually requesting data at top component and then passing down to nested component.
but suppose i hava a component like that

function App() {
  const { data: boards, mutate: mutateBoards } = useSWR('/api/boards')

  return (
    <PullToRefresh onRefresh={ ??? }>
      {boards && !boards.length
        ? <Empty />
        : <IssueBoards boards={boards} />}
    </PullToRefresh>
  )
}

function IssueBoards({ boards }) {
  const [currentBoard, setCurrentBoard] = useState(getDefaultBoard(boards))

  // a board has multiple boardlists, i need fetch all issues to calculate some data 
  const { data: issues, mutate } = useSWR(() => board.lists.map((id) => `/api/boardlist/${id}/issues`)
  return (
  <>
   <BoardPicker boards={boards} currentBoard={currentBoard} onChange={setCurrentBoard} />
   <Board issues={issues} board={currentBoard} />
  </>
  )
}

How can i ensure that when i refresh the page, the boards and issues are all up to date? Sometimes ids of boardlists don't change but issues of boards still need be updated

or just use the global mutate function to mutate keys which match the issues request's pattern? like that

import  { mutate } from 'swr'
......

const handleRefresh = async () => {
  await mutateBoards()
  await mutate([ keys in cache match the pattern])
}
...
<PullToRefresh onRefresh={ handleRefresh }>
...