使用 NextJS 和 SWR 库调用多个端点

Question

我在我的 NextJS 项目中使用 SWR 库，目前我正在构建一个仪表板。我想点击多个端点以获取不同的数据，但我找不到任何使用 SWR 对端点进行多次调用的参考。

我使用的语法如下；

const { data, error } = useSWR('/api/users', fetcher);
if (error) return <div>Failed to load</div>

const { data, error } = useSWR('/api/balloons', fetcher);
if (error) return <div>Failed to load</div>

如果我使用上面的代码，它会出错说 data 已经被定义，但是如果我每次尝试将 data 更改为唯一的东西，它根本不起作用.

Answer 1

您可以重命名解构的值。

尝试以下操作：

const { data: users, error: userError } = useSWR("/api/users", userFetcher);
const { data: baloons, error: ballonError } = useSWR("/api/balloons", balloonsFetcher);

if (error) return <div>Failed to load</div>;
if (error) return <div>Failed to load</div>;

Answer 2

您可以嵌套挂钩。

这是一个比嵌套挂钩更复杂的例子，在这个例子中我添加了一些安全性以避免在用户没有权限的情况下获取：

假设我们正在创建一个银行应用程序。为了让我们的用户存入资金，他们必须首先出于合规和监管目的验证他们的账户。因此，我们知道任何尚未验证其帐户的用户都不能拥有余额。

正如您在我们的自定义挂钩中看到的那样，我们使用我们的 useUserSettings SWR 挂钩来获取用户设置。如果我们还没有获取设置，那么我们 return 从我们的关键函数中删除并中止我们的获取。获取设置后，我们将检查用户是否已通过验证。如果用户通过验证，那么我们将调用我们的余额端点。如果没有，我们将变成一个空数组，因为我们知道用户不能有余额。

function useProjects() {
  const { data: user } = useUserSettings();
  return useSWR(() => {
    if (user.id) {
      return `/api/projects?user=${user.id}`;
    }
    return null;
  }, fetcher);
}

使用 NextJS 和 SWR 库调用多个端点

Calling multiple endpoints using NextJS and the SWR library

reactjs

next.js

swr