Next.js using SWR with axios

Question

I'm trying to use SWR to prefetch data in my project. Here is my code:

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;

It works well in the first render. At the same time, I didn't change any data in my database, so when it renders the second time by refreshInterval:1000 it wouldn't change anything, but it popped up with some errors!

errorHere SyntaxError: Unexpected token < in JSON at position 0

When I first saw the error I guessed it was just some JSON problems, so I changed the fetcher's return like (r)=>r.data

After I changed this, it caused the web to return loading... It means it didn't fetch anything in the second render or even each after the first render.

Did anyone can help me find out what problems caused the errors. Thanks~

Is the request inside the fetcher pointing to the right URL? Shouldn't the useSWR key be /api/orders/detail/? — juliomalves
– juliomalves, Commented Jul 21, 2021 at 21:23
@juliomalves Thank you to pointing me out!!!~ I forgot I have written this Axios.defaults.baseURL = server + '/api'; in _app.js. So I changed it to axios.get() and return r.data back, it works fine now~~ Will you like to answer down below, and I'll give you the green check~ — hao
– hao, Commented Jul 22, 2021 at 5:42

hao · Accepted Answer · 2021-07-22 05:47:38Z

0

I forgot I have set Axios basic URl like Axios.defaults.baseURL = server + '/api';

so I changed the fetcher return like return axios.get(url + params.cid + '/' + params.oid).then((r) => r.data);

It works for me now~ Thanks for the @juliomalves pointing me out where could be a problem ~ Thanks!

answered Jul 22, 2021 at 5:47

hao

2572 gold badges4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js using SWR with axios

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related