错误：tanstack_react_query useQuery 不是函数

Question

错误：(0, tanstack_react_query__WEBPACK_IMPORTED_MODULE_3 _.useQuery) 不是函数

我正在使用 next js 和 @tanstack/react-query 来获取数据，但在获取数据时出现上述错误。

我所做的代码如下。

这是我用于获取和呈现数据的组件。

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;
};

Answer 1

您需要使用“使用客户端”；在服务器页面的顶部。

如果您使用 SSR，您可以在官方文档 Tanstack 中阅读更多内容： https: //tanstack.com/query/v4/docs/react/guides/ssr 这里显示了 2 个版本的实现。使用页面或应用程序路由器。