useSWR return { null, null } 表示有效请求

Question

我正在尝试在我的 next.js 项目中使用 useSWR 向 Firebase 实时数据库发出请求，但由于某种原因，它总是为 data 和 error 变量返回 null。

import useSWR from 'swr';

const LastSales: NextPage = () => {
  const [sales, setSales] = useState<Sale[]>([]);

  const { data, error } = useSWR(
    'https://my-app-12345-default-rtdb.firebaseio.com/sales.json'
  );

  useEffect(() => {    
    if (!data) return;

    const salesArr = [];
    for (const key in data) {
      salesArr.push({
        id: key,
        username: data[key].username,
        volume: data[key].volume,
      });
    }

    setSales(salesArr);
  }, [data]);

  if (error) return <p>Failed to load.</p>;
  if (sales.length === 0) return <p>Loading...</p>;

  return <div>Sales List</div>

使用fetch 发出相同的请求非常有效，但占用的代码行数是原来的 10 倍。为什么data 和error 都等于null？

Answer 1

根据doc，您需要有一个fetcher 来定义它的调用方式。

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function App() {
  const { data, error } = useSWR(
    "https://api.github.com/repos/vercel/swr",
    fetcher
  );