Next.js 使用 SWR 和 axios

Posted 2023-02-22

【中文标题】Next.js 使用 SWR 和 axios

【英文标题】：Next.js using SWR with axios

【发布时间】：2021-09-28 15:40:29

【问题描述】：

我正在尝试使用 SWR 在我的项目中预取数据。 这是我的代码：

export const getStaticProps = async (res) => 
  const result = await axios.get(
    `/orders/detail/$res.params.cid/$res.params.oid`
  );
  const orderDetailById = await result.data;

  return 
    props:  orderDetailById ,
  ;
;

export const getStaticPaths = async () => 
  const result = await fetch(`$server/api/orders`);

  const orders = await result.json();

  const ids = orders.map((order_detail) => (
    oid: order_detail.oid,
    cid: order_detail.cid,
  ));
  const paths = ids.map((id) => (
    params:  oid: id.oid.toString(), cid: id.cid.toString() ,
  ));
  return 
    paths,
    fallback: false,
  ;
;

const fetcher = (url, params) => 
  return fetch(url + params.cid + '/' + params.oid).then((r) => r.json());
;

const OrderDetailByOId = ( orderDetailById ) => 
  const cid = orderDetailById.customer[0].cid;
  const oid = orderDetailById.detail[0].oid;

  const params = useMemo(() => ( cid, oid ), [cid, oid]);

  const  data, error  = useSWR(['/orders/detail/', params], fetcher, 
    initialData: orderDetailById,
  );

  if (error) 
    console.log('errorHere', error);
    return <div>failed to load</div>;
  
  if (!data) return <div>Loading...</div>;
  return <OrderDetailForm orderDetailById=orderDetailById />;
;

export default OrderDetailByOId;

它在第一次渲染时效果很好。 同时，我没有更改数据库中的任何数据， 所以当它第二次由refreshInterval:1000 渲染时，它不会改变任何东西，但它会弹出一些错误！

errorHere SyntaxError: Unexpected token < in JSON at position 0

当我第一次看到错误时，我猜这只是一些 JSON 问题，所以我将 fetcher 的返回值更改为 (r)=>r.data

我更改后，导致网络返回loading... 这意味着它在第二次渲染中甚至在第一次渲染之后都没有获取任何内容。

有没有人可以帮我找出导致错误的问题。 谢谢~

【问题讨论】：

fetcher 中的请求是否指向正确的 URL？ useSWR 键不应该是 /api/orders/detail/ 吗？

@juliomalves 谢谢你指出我！！！~ 我忘了我在_app.js 中写了这个Axios.defaults.baseURL = server + '/api';。所以我把它改成了axios.get()并返回r.data，现在可以正常使用了~~你愿意在下面回答吗，我给你绿勾~

【参考方案1】：

我忘了我已经设置了 Axios 基本 URL，比如 Axios.defaults.baseURL = server + '/api';

所以我更改了 fetcher 返回，例如 return axios.get(url + params.cid + '/' + params.oid).then((r) => r.data);

它现在对我有用~感谢@juliomalves 指出哪里可能有问题~谢谢！