swr 或 useSWR 如何在 reactjs / nextjs 中正常工作？

Question

在第一部分我调用了 fetch() 并且它工作正常但是当我使用 useSWR() 时它 returns 未定义

export const getAllEvents = async()=>{
    const response = await fetch('https://*******-rtdb.firebaseio.com/events.json');
    const data = await response.json();
    const events = [];

    for (const key in data){
        events.push({
            id:key,
            ...data[key]
        });
    }
    return events; // returns data as I wanted.. perfect
}

但在下面的代码片段中 returns 未定义（相同 url）

import useSWR from 'swr';
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json');
console.log(data);  // returns undefined

Answer 1

useSWR 期望 fetcher 函数作为第二个参数：

https://swr.vercel.app/#overview

可以是自定义方法，例如

export const fetcher = async (...args: Parameters<typeof fetch>) => {
  const res = await fetch(...args);
  if (!res.ok) {
    throw { status: res.status, statusText: res.statusText };
  }
  return res.json();
};

Answer 2

使用swr还需要带一个fetcher函数，现在只是传一个url。 Swr 不知道如何处理 url..

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


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

我建议你阅读文档。

Answer 3

添加这个：

const fetcher = (...args) => fetch(...args).then(res => res.json())
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json', fetcher);

swr 或 useSWR 如何在 reactjs / nextjs 中正常工作？

how does swr or useSWR works properly in reactjs / nextjs?

reactjs

next.js

swr