promise - 如何使用 SWR nextjs hook 在一个页面中进行多个调用？

Question

我想为一个页面获取 3 个端点，我正在使用 next.js 的 SWR Hook ，因为我需要从客户端获取它。documentation对我没有帮助，因为我在另一个文件中有 url 的变量。我对此很陌生。这是我所拥有的，并且只使用一个端点就可以很好地工作:

data.ts

const fetcher = (url: string) => fetch(url).then((response) => response.json())

const getData = (endpoint: string) => {
  try {
    const { data, error } = useSWR(`${ENDPOINTS_URL}${endpoint}`, fetcher)
    return { data, error }
  } catch (error) {
    console.log('error:', error)
    throw error
  }
}

export const getData1 = () => getData(`endpoint1`)
export const getData2 = () => getData(`endpoint2`)
export const getData3 = () => getData(`endpoint3`)

这就是我所说的:

index.tsx

const { data, error } = getData1()
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

Answer 1

好的，我明白了!
这是我的解决方案(没有错误):

数据.ts

const getData = (endpoint: string) => {
  try {
    const { data } = useSWR(`${ENDPOINTS_URL}${endpoint}`, fetcher)
    return { data: data }
//...
}

export const getData1 = () => getData(`endpoint1`)

索引.tsx

const { data: name1 } = getData1()
const { data: name2 } = getData2()

等等!我希望它可以帮助将来的人:)