CODEWITHSUNDEEP
reactjsreact-hooksreact-query
ln09nv2
ln09nv2

Reputation: 1353

How to solve React custom hook TypeError (0 , _ .default) is not a function?

I want to set up a custom hook for data fetching with React Query to easily mock the return values for testing.

This is my useFetchHook custom hook.

export const useFetchData = (idQuery) => {
  const delay = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 500);
    });
  };

  const handleRickAndMortyFetch = () => {
    return delay()
      .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
      .then((res) => res.data);
  };

  const { data, error, isLoading } = useQuery(
    ["rickandmorty", idQuery],
    handleRickAndMortyFetch,
    {
      cacheTime: 1000 * 60 * 60 * 24,
      enabled: false || idQuery !== 0,
      onError: (error) => console.log(error),
      retry: false,
      refetchOnWindowFocus: true,
      staleTime: 1000 * 60 * 60 * 24,
      useErrorBoundary: true
    }
  );

  return { data, error, isLoading };
};

However, I receive a TypeError (0 , _useFetchData2.default) is not a function, which points to this line of code in the <Home/>.

const { data, error, isLoading } = useFetchData(idQuery);

These are my attempts to solve the issue

Please advise how to solve.

Upvotes: 4

Views: 7580

Answers (1)

Giang Le
Giang Le

Reputation: 7089

Cause you "named export" useFetchData instead of default export So change To

import useFetchData from "../../hooks/useFetchData";

in Home.jsx

import { useFetchData } from "../../hooks/useFetchData";

Or change export const useFetchData to export default useFetchData

Upvotes: 3

Related Questions