How to return data with swr in react?

Question

I try to display data and I use swr data fetching with react and here is the code :

import useSWR from "swr";
import axios from "axios";
const fetcherFunc = (...args) => {
  return axios(...args).then((res) => console.log(res.data));
};
function MyComponent() {
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts/",
    fetcherFunc
  );
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}
export default MyComponent;

The problem is that it's stuck in loading and the data won't get updated and is undefined also the console log of data in fetcher appears to work .

How to fetch data with swr in react and display fetched data ?

Luka · Accepted Answer · 2021-07-10 12:00:43Z

3

You're supposed to return res.data from fetcherFunc instead of console.log-ing data.

Also, just use url as the name of the argument for the fetcherFunc and pass that url to axios.get (don't use ...url spread operator on url). Take look at How To Use Axios for Data Fetching (passing the url, method, payload, etc).

Function for fetching the data should look like:

const fetcherFunc = (url) => axios.get(url).then((res) => res.data);

As for the useSWR hook, use it like this:

const { data, error } = useSWR("https://jsonplaceholder.typicode.com/posts/", fetcherFunc);

edited Jul 10, 2021 at 12:00

answered Jul 10, 2021 at 11:54

Luka

99811 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to return data with swr in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related