CODEWITHSUNDEEP
javascriptreactjsnext.js
Stykgwar
Stykgwar

Reputation: 721

No overload matches this call when I'm trying to call using tanstack query

so I'm trying to call a single data in my database, it was working successfully when I'm using a useEffect hook, but right now, I'm trying to learn tanstack@query. but I got an error when I tried to call it.

No overload matches this call. Overload 1 of 3, '(options: DefinedInitialDataOptions<unknown, Error, unknown, (string | string[])[]>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<unknown, Error>', gave the following error. Type '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>' is not assignable to type 'unique symbol | QueryFunction<unknown, (string | string[])[], never> | undefined'.
Overload 2 of 3, '(options: UndefinedInitialDataOptions<unknown, Error, unknown, (string | string[])[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error. Type '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>' is not assignable to type 'unique symbol | QueryFunction<unknown, (string | string[])[], never> | undefined'.
Overload 3 of 3, '(options: UseQueryOptions<unknown, Error, unknown, (string | string[])[]>, queryClient?: QueryClient | undefined): UseQueryResult<unknown, Error>', gave the following error. Type '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>' is not assignable to type 'unique symbol | QueryFunction<unknown, (string | string[])[], never> | undefined'.ts(2769) types-MRM6XQm8.d.ts(557, 5): The expected type comes from property 'queryFn' which is declared here on type 'DefinedInitialDataOptions<unknown, Error, unknown, (string | string[])[]>' types-MRM6XQm8.d.ts(557, 5): The expected type comes from property 'queryFn' which is declared here on type 'UndefinedInitialDataOptions<unknown, Error, unknown, (string | string[])[]>' types-MRM6XQm8.d.ts(557, 5): The expected type comes from property 'queryFn' which is declared here on type 'UseQueryOptions<unknown, Error, unknown, (string | string[])[]>'

This is my component


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

and this is my server action

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

Upvotes: 0

Views: 234

Answers (1)

Mina
Mina

Reputation: 17524

This issue happen because you pass the return value of getDataById(eventId) to the queryFn, but what you need is returning a function reference that calls the getDataById function.

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

Upvotes: 1

Related Questions