当我尝试使用 tanstack 查询调用时，没有与此调用匹配的重载

Question

所以我试图调用数据库中的单个数据，当我使用

useEffect

钩子时它工作成功，但现在，我正在尝试学习

tanstack@query

。但当我尝试调用它时出现错误。

没有重载与此调用匹配。重载 1 of 3, '(选项： DefinedInitialDataOptions，queryClient？：QueryClient |不明确的）： DefinedUseQueryResult'，给出以下错误。 类型“Promise<{ id: string; title: string; email: string; fullName: string; contactPerson: string; department: string; dateOfEvent: string; startingTime: string; endingTime: string; purpose: string; doesHaveDryRun: string; ... 11 more ...; updatedAt: Date; } | { ...; } | null>”不可分配给类型“唯一符号|” 查询函数 |未定义'。
重载 2 of 3, '(选项: UndefinedInitialDataOptions, queryClient?: QueryClient | 未定义）：UseQueryResult'，给出以下错误。 类型“Promise<{ id: string; title: string; email: string; fullName: string; contactPerson: string; department: string; dateOfEvent: string; startingTime: string; endingTime: string; purpose: string; doesHaveDryRun: string; ... 11 more ...; updatedAt: Date; } | { ...; } | null>”不可分配给类型“唯一符号|” 查询函数 |未定义'。
重载 3 of 3，'（选项：UseQueryOptions，queryClient？：QueryClient | 未定义）： UseQueryResult'，给出了以下错误。 类型“Promise<{ id: string; title: string; email: string; fullName: string; contactPerson: string; department: string; dateOfEvent: string; startingTime: string; endingTime: string; purpose: string; doesHaveDryRun: string; ... 11 more ...; updatedAt: Date; } | { ...; } | null>”不可分配给类型“唯一符号|” 查询函数 | undefined'.ts(2769) types-MRM6XQm8.d.ts(557, 5)：预期类型 来自属性“queryFn”，该属性在类型上声明 'DefinedInitialDataOptions' types-MRM6XQm8.d.ts(557, 5)：预期的类型来了 来自在类型上声明的属性“queryFn” 'UndefinedInitialDataOptions' types-MRM6XQm8.d.ts(557, 5): 预期的类型来了 来自在类型上声明的属性“queryFn” '使用查询选项'

这是我的组件

"use client";

import { getDataById } from "@/data-query/appointment";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import React, { useEffect, useState, useTransition } from "react";

export default function EventPageDetail() {

  const {eventId} = useParams()


  const {data, error, isFetching} = useQuery({
    queryKey: ['eventId', eventId],
    queryFn: getDataById(eventId)
  })

  return <div></div>;
}

这是我的服务器操作

export async function getDataById(id: any){
  try {
    const data = await db.appoinmentSchedule.findUnique({
      where: {
        id:id
      }
    })

    return data
  } catch (error) {
    return {error: "Something went wrong"}
  }
}

Answer 1

发生此问题的原因是您将

return

的

getDataById(eventId)

值传递给

queryFn

，但您需要的是返回调用

getDataById

函数的函数引用。

  const { data, error, isFetching } = useQuery({
    queryKey: ['eventId', eventId],
    queryFn: () => getDataById(eventId) // Here you pass an anonymous arrow function which calls the getDataById function.
  });