useQuery no overload matches this call

React
1

I am following react 18 intermediate and I was refactoring from useData to react query, in section refactoring usePlatforms I got this issue.
usePlatforms.tsx

import { useQuery } from "@tanstack/react-query";
import platforms from "../data/platforms";
import platformServices, { Platform } from "../services/platformServices";
import { FetchResponse } from "../services/api-client";

const usePlatforms = () => useQuery<FetchResponse<Platform>>({
    queryKey: ["platforms"],
    queryFn: platformServices,
    staleTime: 24 * 60 * 60 * 1000, // 24 hours
    initialData: { count: platforms.length, results: platforms }
  });


export default usePlatforms;

platformServices.tsx

import { AxiosResponse } from "axios";
import apiClient, { FetchResponse } from "./api-client";

export interface Platform {
    id: string | number;
    name: string;
    slug: string;
    platforms: Platform[];
}
const platformServices = () => apiClient.get<FetchResponse<Platform>, AxiosResponse>('/platforms/lists/parents').then(res => res.data);
export default platformServices;

error I get

src/hooks/usePlatforms.ts:7:10 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataOptions<FetchResponse<Platform>, Error, FetchResponse<Platform>, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
    Type '{ count: number; results: { id: number; name: string; slug: string; platforms: ({ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { ...; })[]; }[]; }' is not assignable to type 'undefined'.
  Overload 2 of 3, '(options: DefinedInitialDataOptions<FetchResponse<Platform>, Error, FetchResponse<Platform>, QueryKey>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error.
    Type '{ id: number; name: string; slug: string; platforms: ({ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { id: number; ... 6 more ...; year_end: null; })[]; }[]' is not assignable to type 'Platform[]'.
      Type '{ id: number; name: string; slug: string; platforms: ({ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { id: number; ... 6 more ...; year_end: null; })[]; }' is not assignable to type 'Platform'.
        Types of property 'platforms' are incompatible.
          Type '({ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: null; year_end: null; })[]' is not assignable to type 'Platform[]'.
            Type '{ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: null; year_end: null; }' is not assignable to type 'Platform'.
              Property 'platforms' is missing in type '{ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; }' but required in type 'Platform'.
  Overload 3 of 3, '(options: UseQueryOptions<FetchResponse<Platform>, Error, FetchResponse<Platform>, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
    Type '{ id: number; name: string; slug: string; platforms: ({ id: number; name: string; slug: string; games_count: number; image_background: string; image: null; year_start: number; year_end: null; } | { id: number; ... 6 more ...; year_end: null; })[]; }[]' is not assignable to type 'Platform[]'.
2

You’re farther along than I am, but all the errors specify an issue with type. Specifically that something (not sure if it’s an element, variable or what) is not assignable the way it’s being defined. The ones called out are type ‘undefined’, type ‘Platform’, or type ‘Platform’

When I get an error that I can’t figure out, I often ask ChatGPT or Bing Chat what is wrong with my code, then paste the snippet into the prompt. About half the time it points me in the right direction.

In this case the code plus the error might help an AI to point to the problem.

Good luck.

I just had one where VS Code told me my string input wasn’t a number, even though I was using parseInt. Quitting VS Code and restarting it resolved it. What’s that about?

1 Like