如何使用 SWR nextjs 钩子在一页中进行多次调用？答案

【问题标题】：How to make multiple calls in one page with SWR nextjs hook?如何使用 SWR nextjs 钩子在一页中进行多次调用？
【发布时间】：2021-03-29 06:39:55
【问题描述】：

我想为一页获取 3 个端点，我正在使用 next.js 中的 SWR 挂钩，因为我需要从客户端获取它。 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>

【问题讨论】：

拨打useSWR 3次还不够好吗？还有什么你想要的吗？
是的，但是如何调用 useSWR 3 次，这是我的问题。尽可能保持干燥。我没有成功解决这个const { data: data1, error } = getData1()const { data: data2, error } = getData2()这不起作用..
等等，你重新分配error。这可能会导致吗？我还不确定，因为我没有仔细检查过。

标签： promise fetch next.js endpoint swr

【解决方案1】：

好的，我明白了！
这是我的解决方案（没有error）：

数据.ts

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

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

index.tsx

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

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

【讨论】：