#10 实作篇 — 使用 SWR 抓取和 Cache 资料

嗨大家！昨天跟大家分享一个 library 叫做 SWR，文章在这里～ 今天用 SWR 新增了小功能，使用者可以输入 Github username 然後列出该 user 的所有 public repository，可以在这里试试看喔。

fetcher Function

像这篇文章提到的，使用 useSWR 时，我们要提供一个 fetcher function 去抓取资料。这 function 要回传 data，发生错误时回 error：

const fetcher = (user, page) =>
  // Github API：列出该 user 的公开 repositories
  // user：Github username
  // page：做 pagination (分页) 用的
  fetch(`https://api.github.com/users/${user}/repos?page=${page}`)
    .then((res) => res.json())
    .then((data) => {
      // API 找不到 user 时会回传 { message: "Not Found" }
      // 所以在这里判断 data 是否包含 message
      if ("message" in data) {
        throw new Error(data.message);
      }
      // 全部正常的话，把 data 回传给 SWR 处理
      return data;
    });

Component State

因为我们发 API 请求时需要给 user 和 page 这两个 parameters，所以我们的 component 也要存这两个参数当 state：

const [input, setInput] = useState(""); // input 用的
const [user, setUser] = useState(input); // Github username
const [page, setPage] = useState(1); // 当页

在这里把 input 和 user 拆开是因为不想要使用者每打字的同时发送请求，而是使用者按按钮时，才会 setUser(input)。

const handleClick = () => {
  setUser(input);
  setPage(1); // 换 user 代表也要从第一页开始看
};

useSWR

有了 fetcher function 和需要的参数，我们可以开始写 SWR hook 了！不过我们只想要使用者有输入 user 的时候才会发送请求，其他时间不要做任何事，而且昨天我们看了 useSWR 只用 string 当 key，那我们今天同时有 user 和 page，怎麽办？

const { data: repos, error } = useSWR(user ? [user, page] : null, fetcher);

• 一，我们可以用 array (阵列) 当 key，array 里面也可以放 object (物件)，不过要注意，SWR 只做 shallow compare，代表 const a = {}; const b = {}; 而 a 不等於 b
• 二，当我们的 key 依赖其他的参数使得 key 有可能是 falsy 的时候，SWR 不会发任何请求。所以 user ? [user, page] : null，代表没有 user 的时候我们不会去呼叫 Github API 喔～

结果

现在可以开始显示资料了！

// error 时显示 error message
{error
  ? "User not found"
  // 把每个 repo 用 RepoCard 去显示～
  : repos?.map((repo) => <RepoCard key={repo.id} data={repo} />)}

我们会看到以下的画面～

小结

今天的文章很短，如果有什麽不清楚的欢迎问我喔！使用了 SWR，资料会自动被 cache，只有第一次抓取的时候会需要时间，第二次之後，资料会直接出现，完全不用等的意思ＸＤ
大家可以试试看（这里～)，换页或重整画面都不用等！

祝大家周末愉快！

Live Demo

晚安 <3

看更多

• Github API
• SWR Getting Started
• #09 No-code 之旅 — 怎麽在 Client-side 抓取资料？SWR 简介