useSWR returning undefined data

[FlorjanKlancar]

Hello everyone, my app is returning undefined data if I render my pages with Next/link hook... If I reload that exact same page the data is correct and defined! If I click through an app via Next/link hooks the data keeps being undefined resulting in thrown error.
What do I need to do to render loading if data is undefined and not throw an error...?

const {data, error} = useSWR("data", fetcher);

if (error) return "Error";
if (!data) return "Loading"


{data && (
          <DashboardPage
            orders={data.showItemsOnOrder}
            dashboardCards={data.dashboardCardInfo}
            ordersGraph={data.dashboardGraph}
          />
        )};

[huozhi]

Does isValidating work for your case?

https://swr.vercel.app/docs/options

const { isValidating } = useSWR(key, fetcher)

return isValidation && <Loading />

[shuding]

isValidating will be true for revalidations though. I think it's tricky to deal with the undefined case, we don't have a good way to support it.

[FlorjanKlancar]

So how do I deal with this problem?

[shuding]

Fetcher should return null if it means "none", instead of undefined.

[shuding]

Also, if it's an API request, normally you don't have undefined since it's not serializable in JSON's standard.

[EhanDuan]

@shuding Hi, I got the same problem. I can make sure the api returns json okay, since I tested with a fake api both on my code and your sandbox code.

My code ( Got Undefined )

It is always undefined for my userData. The page stays in Spinner forever.

const Practice = () => {
  const { userData, error } = useSWR(
    "https://jsonplaceholder.typicode.com/todos/1",
    fetcher
  );

  if (!userData) return <Spinner />;
  if (error) return <Heading>Fail to Load Data</Heading>;
  console.log(userData);

Sandbox code Edited from Official One (Works Well)

Here is code in SandBoxCode

I tried to put my code into the sandbox. But I met some trouble like adding swr gave me Internal Server Error.

Do you have any advice on that?

Thanks a lot!

[EhanDuan]

@shuding Never mind, I found my error that, in the page, I should use data instead of userData

 const { data, error } = useSWR(
    user ? `/api/user/${user.uid}` : null,
    fetcher
  );

Too stupid me. 🙃

[jecordjotse]

I had the same problem earlier this week. After hours of troubleshooting, I realised I didn't do a good job with error handling on the API side. I was returning a string instead of JSON. My fetcher response was also respone.json(). So no data that is JSON, the request went through so no error and isValidating == false.

Verify that the API in useSWR("data", fetcher) returns a value that is readable.

[Victor-Lindh]

I'm having a similar problem now. The response from the api call is an object, containing hits (array of objects) and total (number of total hits. Works fine if I use a local react state and set the data that way, but logging out the value of the SWR data variable return undefined, no matter how I return the response.

[EhanDuan]

@jecordjotse Same to me. I saw your solution is to make sure all data is json. But it seems not work for me. Here is mine.
It stays in spinner forever. I console.log the userData. It still shows the userData from useSWR is undefined. But I think I've made results in json.
API Code

// /pages/api/[uId].ts
import db from "../../../../firebaseConfig";
import { getDoc, doc } from "firebase/firestore";

export default async function UserHandler(req: any, res: any) {
  const { method } = req;
  const { uId } = req.query;

  switch (method) {
    case "GET":
      const { userData, noSuchDataError, requestError } = await getUserData(
        uId
      );

      if (requestError) {
        res.status(500).json({ error: requestError });
      } else if (noSuchDataError) {
        res.status(404).json({ error: noSuchDataError });
      } else {
        res.json({
          userData: userData
        });
      }
      break;
    default:
      res.setHeader("Allow", ["GET"]);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

export async function getUserData(uId: string) {
  try {
    const docSnapshot = await getDoc(doc(db, "users", uId));
    if (docSnapshot.exists()) {
      return { userData: docSnapshot.data() };
    } else {
      return { noSuchDataError: "No such user document exists" };
    }
  } catch (e) {
    return { requestError: "Error getting current user data" };
  }
}

Page fetcher Code

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

const Practice = ({
  sIds,
  skillsData
}: {
  sIds: string[];
  skillsData: any[];
}) => {
  const user = useAuth().user;
  const { userData, error } = useSWR(
    user ? `/api/user/${user.uid}` : null,
    fetcher
  );

  if (!userData) return <Spinner />;
  if (error) return <Heading>Fail to Load Data</Heading>;

[EhanDuan]

Never mind, I found my error that, in the page, I should use data instead of userData

 const { data, error } = useSWR(
    user ? `/api/user/${user.uid}` : null,
    fetcher
  );

To stupid me.

[EhanDuan]

Never mind, I found my error that, in the page, I should use data instead of userData

 const { data, error } = useSWR(
    user ? `/api/user/${user.uid}` : null,
    fetcher
  );

Too stupid me. 🙃

[jamsmd]

@FlorjanKlancar Did you manage to fix this?

I'm having the same issue