Error: (0 , tanstack_react_query__WEBPACK_IMPORTED_MODULE_3_.useQuery) is not a function
While implementing data fetching in my Next.js project using @tanstack/react-query, I encountered the above error message.
Below is the code snippet where the issue occurs:
Shown below is the component responsible for fetching and displaying the data.
import React from 'react'
import ServiceProps from '../interfaces/ServiceProps'
import { fetchServices } from '../api/services/api'
import { useQuery } from "@tanstack/react-query";
const Service = ({ title, content }: ServiceProps) => {
const { data, isLoading, isError, error, } = useQuery({ queryKey: ["fetchServices"], queryFn: fetchServices });
console.log(data)
return (
<div className="dark:bg-transparent rounded-lg dark:border-[#212425] dark:border-2 bg-blue-50 p-8">
{/* <img alt="icon" srcset="/images/icons/icon-1.svg 1x, /images/icons/icon-1.svg 2x" src="/images/icons/icon-1.svg" width="40" height="40" decoding="async" data-nimg="1" className="w-10 h-10 object-contain block" loading="lazy" /> */}
<div className="space-y-2 break-all">
<h3 className="dark:text-white text-xl font-semibold">
{title}
</h3>
<p className=" leading-8 text-gray-lite dark:text-[#A6A6A6]">
{content}
</p>
</div>
</div>
)
}
export default Service
//Here is my API call using Axios
import axios from "axios";
export const fetchServices = async () => {
const response = await axios.get(`api/services`);
return response.data;
};