useSWR returning undefined data without making a request to backend

Question

I am trying to fetch user detail from backend and display profile page using swr and axios but useSWR returning undefined data and error without making request to backend can anyone tell what i'm doing wrong here?

here is my code for fetching user detail

import React, { createContext, useState, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import axiosInstance from "../axios";

export const userDetailContext = createContext();

export default function UserDetailContextProvider({ children }) {
  console.log("running user detail context");
  const router = useRouter();
  const { username } = router.query;
  const fetcher = async (arg) =>
    axiosInstance
      .get(arg)
      .then((res) => res.data)
      .catch((err) => err);

  const { data, error } = useSWR(`${username}/`, fetcher);
  console.log(data, error);
  return (
    <userDetailContext.Provider value={{ data, error }}>
      {children}
    </userDetailContext.Provider>
  );
}

localhost/[username] =>

import React, { useEffect } from "react";
import { useContext } from "react";

import Head from "next/head";
import { useRouter } from "next/router";

import Navbar from "../../components/navbar/Navbar";
import ProfileComp from "../../components/profile/ProfileComp";
import withAuth from "../../components/HigherOrderComps/withAuth";
import UserDetailContextProvider from "../../context/UserDetaillContext";

function Profile() {
  return (
    <UserDetailContextProvider>
      <Head>
        <title>Profile</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ProfileComp />
    </UserDetailContextProvider>
  );
}

error i'm getting

TypeError: Failed to construct 'URL': Invalid URL

Uncaught Error: Failed to parse src "http://localhost:8000undefined" on next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

_"useSWR returning undefined data and error"_ - What error are you seeing? — juliomalves, Jul 12 '22 at 22:47
It's giving error for Image component since it cannot make valid url for image because of undefined data. — Shaikh Ahmed, Jul 13 '22 at 09:33
But is the `axios` request triggering any errors? Do you see the request being successful in the devtools Network tab? — juliomalves, Jul 13 '22 at 10:03
it's rendering "UserDetailContextProvider" component but that component returns undefined data and undefined error — Shaikh Ahmed, Jul 13 '22 at 10:14

useSWR returning undefined data without making a request to backend

0 Answers0