Next Js + SWR: API resolved without sending a response for /api/projects/<slug>, 这可能会导致请求停滞

Question

由于第一次渲染我无法获得 router.query 我从 getServerSideProps 传递参数如下：

export async function getServerSideProps(context) {
    return {
        props: { params: context.params },
    };
}

然后在函数中尝试执行 API 调用但收到 API 停滞错误

API resolved without sending a response for /api/projects/nichole_robel23, this may result in stalled requests.

这是我的代码：

export default function Project({ params }) {
    const { slug } = params;

    let [projectData, setProjectData] = useState([]);
    let [loading, setLoading] = useState(true);

    const { data } = useSWR('http://localhost:3000/api/projects/' + slug);

    useEffect(() => {
        if (data) {
            setProjectData(data.data.project);
            setLoading(false);
        }
    }, [data]);

......

我有全局SWRCofig如下

<SWRConfig value={{ fetcher: (url) => axios(url).then(r => r.data) }}>
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
                    </SWRConfig>

有什么办法可以解决问题吗？

Answer 1

您缺少 fetcher——接受 SWR 密钥和 returns 数据的函数，因此未调用 API。

您也没有从 API 正确返回响应——这很可能是没有等待 promise/async 正确完成的情况。

客户

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

export default function Home({ params }) {
  const { slug } = params;
  const [projectData, setProjectData] = useState([]);
  const [loading, setLoading] = useState(true);

  const { data } = useSWR(`http://localhost:3000/api/projects/${slug}`, fetcher);

  useEffect(() => {
    if (data) {
      setProjectData(data);
      setLoading(false);
    }
  }, [data]);

API

const getData = () => {
  return new Promise((resolve, reject) => {
    // simulate delay
    setTimeout(() => {
      return resolve([{ name: 'luke' }, { name: 'darth' }]);
    }, 2000);
  });
}

export default async (req, res) => {
  // below will result in: API resolved without sending a response for /api/projects/vader, this may result in stalled requests
  // getData()
  //   .then((data) => {
  //     res.status(200).json(data);
  //   });

  // better
  const data = await getData();
  res.status(200).json(data);
}

Next Js + SWR: API resolved without sending a response for /api/projects/<slug>, 这可能会导致请求停滞

Nexjs + SWR: API resolved without sending a response for /api/projects/<slug>, this may result in stalled requests

axios

next.js

swr