Kong / swrv

Stale-while-revalidate data fetching for Vue

Home Page:https://docs-swrv.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use swrv with the array function?

VoVAllen opened this issue · comments

If I have multiple fetchs with swrv, how can I use it with the array function?

endpoints.map((endpoint)=> {
  return useSWRV(endpoint) # Raise warning since swrc cannot getCurrentInstance() inside another function
})

You should be able to define an async function that hits your endpoints, and then utilize that function in your swrv fetcher. This is pseudo-code, but something like this:

const fetchAllEndpoints = async () => {
  const [responseA, responseB, responseC] = await Promise.all([
    fetch('/api/endpointA'),
    fetch('/api/endpointB'),
    fetch('/api/endpointC'),
  ])
  
  return [
    responseA,
    responseB,
    responseC,
  ]
}

const { data } = useSWRV(
  () => 'endpoint-request-collection',
  () => fetchAllEndpoints(),
)