Error with SWR hook: "Fetcher argument not supplied"

Question

Error with SWR hook: "Fetcher argument not supplied"

Using the SWR hook for the first time, everything is working smoothly so far. However, I've encountered an error that I can't seem to figure out. Let me share my code with you.

This is the global configuration:

<AuthContext>
    {isValidRoute && <Navbar />}
    <SWRConfig
        value={{
          fetcher: (url: string) => axios.get(url).then(res => res.data)
        }}
    >
        <Component {...pageProps} />
    </SWRConfig>
</AuthContext>

Here's how I'm using it:

import useSWR from "swr";

import { NavbarPart3 } from "../NavbarStyled";
import { dataObject } from "../../../GlobalInterfaces/AuthContextInterfaces";

const Part3 = () => {
  if (typeof window !== "undefined") {
    const userId: dataObject = JSON.parse(localStorage.getItem("Auth"));
    const { data } = useSWR(
      "http://localhost:5000/api/user/singleU/" + userId.user.id
    );
    console.log(data);
  }

  return <NavbarPart3></NavbarPart3>;
};

export default Part3;

Now, onto the ERROR:

Expected 4 arguments, but got 1.ts(2554)
use-swr.d.ts(4, 91): An argument for 'Fetcher' was not provided

The Challenge: My goal is to troubleshoot this issue. Any idea what might be causing the problem?

reactjs next.js swr

Answer 1

Answer №1

Summary: Make sure to wrap the component where you call useSWR with the SWRConfig provider that defines the global fetcher.

If you're using the Part3 component within your NavBar, the error might be due to how it's being called.

To fix this, move

{isValidRoute && <Navbar />}

inside the SWRConfig provider like shown below.

<AuthContext>
    <SWRConfig
        value={{
            fetcher: (url: string) => axios.get(url).then(res => res.data)
        }}
    >
        {isValidRoute && <Navbar />}
        <Component {...pageProps} />
    </SWRConfig>
</AuthContext>

Avoid conditionally calling useSWR to adhere to the Hooks Rules.

In the Part3 component, place the useSWR call at the top level and the localStorage call inside a useEffect as shown in the code snippet below.

const Part3 = () => {
    const [userId, setUserId] = useState()
    const { data } = useSWR(
        // Fetch URL based on valid userId
        () => "http://localhost:5000/api/user/singleU/" + userId.user.id
    );

    useEffect(() => {
        const auth = JSON.parse(localStorage.getItem("Auth"));
        setUserId(auth);
    }, []);

    console.log(data);

    return <NavbarPart3></NavbarPart3>;
};

Answer 2

Summary: Make sure to wrap the component where you call useSWR with the SWRConfig provider that defines the global fetcher.

If you're using the Part3 component within your NavBar, the error might be due to how it's being called.

To fix this, move

{isValidRoute && <Navbar />}

inside the SWRConfig provider like shown below.

<AuthContext>
    <SWRConfig
        value={{
            fetcher: (url: string) => axios.get(url).then(res => res.data)
        }}
    >
        {isValidRoute && <Navbar />}
        <Component {...pageProps} />
    </SWRConfig>
</AuthContext>

Avoid conditionally calling useSWR to adhere to the Hooks Rules.

In the Part3 component, place the useSWR call at the top level and the localStorage call inside a useEffect as shown in the code snippet below.

const Part3 = () => {
    const [userId, setUserId] = useState()
    const { data } = useSWR(
        // Fetch URL based on valid userId
        () => "http://localhost:5000/api/user/singleU/" + userId.user.id
    );

    useEffect(() => {
        const auth = JSON.parse(localStorage.getItem("Auth"));
        setUserId(auth);
    }, []);

    console.log(data);

    return <NavbarPart3></NavbarPart3>;
};

Error with SWR hook: "Fetcher argument not supplied"

Answer №1

Similar questions

Issue with Firebase authentication during registration for a React application

Exporting a NextJS project as a module

What is the process for selecting dependencies in react native?

Struggling with CSRF token while making an axios post request to Django

The Tooltip from React's material-ui@next component fails to render adjacent to the element within the TableHead Cell

Implementing a provider in NextJS for a select few pages

Utilize SWR in NextJS to efficiently manage API redirection duplication

Struggling with this npm i problem?

Implement an event listener on the reference obtained from the React context

Tips for customizing the color of Menu in material-ui v5

Can Enzyme snapshots be utilized with React fragments?

Retrieve the value stored in the theme using the useState hook

Setting Default Values for Multi-select in React-select Async

Error: Attempting to access property 'map' of an undefined value

Ways to adjust the view of a React Vis.JS Network Graph: How to zoom in or out

What causes og:image to fail to render in React?

AlignItems not functioning properly within a list component in NativeBase

"Enhance user experience with Material UI's versatile layout component designed for seamless transition between desktop

Encountered CSRF validation error while working with a Python Django backend in conjunction with React frontend using Axios for making POST requests

I am experiencing an issue with the PUT method on my API as it is not correctly setting the req.body data