Fetching data with React Query TypeScript

Question

In React Query with TypeScript, I have this getRecommendations hook, that I want to only send the latestrecs (ill probably have another hook for watchlist etc). I get an error in the queryKey stating:

"No overload matches this call. The last overload gave the following error. Argument of type '{ queryKey: string[]; queryFn: () => Promise<FetchResponse | Recommendations[]>; }' is not assignable to parameter of type 'QueryKey'. Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.ts(2769)"

import { useQuery } from "@tanstack/react-query";
import apiTest from "../../Services/api-test";

export interface Recommendations {
  title_description: string;
  title_id: number;
  title_name: string;
}

export interface FetchResponse<T> {
  latestrecs: T[];
  watchlist: T[];
}

const useRecommendations = () =>

  useQuery<FetchResponse<Recommendations>, Error>({
    queryKey: ['recommend'],
    queryFn: () =>
      apiTest.get<FetchResponse<Recommendations>>("/titles")
        .then((res) => res.data.latestrecs),
  })


export default useRecommendations;

And I have an example piece of JSON data that looks like this: (there would be more titles in each)

{
    "latestrecs": [
        {
            "genre_name": "Sports",
            "title_description": "From the All-England Lawn Tennis and Croquet Club in Wimbledon, England.",
            "title_id": 22996,
            "title_name": "Classic Wimbledon",
            "title_release_year": 2018
        }
    ],
    "watchlist": [
        {
            "genre_name": "Sports",
            "title_description": "From the All-England Lawn Tennis and Croquet Club in Wimbledon, England.",
            "title_id": 22996,
            "title_name": "WL Classic Wimbledon",
            "title_release_year": 2018
        }
    ]
}

I'm trying to get the useRecommendation hook to just send the latestrecs array to a mapping function. I am getting an error under map((title) that says "Property 'map' does not exist on type 'NonNullable'"

{recommendations?.map((title) => (
          <ul key={title.title_id} style={{ margin: 0, padding: 0 }}>
            <div className={styles.title} onClick={() => navigate("/title")}>
              {title.title_name}
            </div>
          </ul>
        ))}

Answer 1

Kind of a late response but i've ran into this issue multiple times and the reason was that the generics i used did not match the return type of queryFn.

This example would cause the error:

const duckFunc = async (): Duck[] => {
   return ducks;
}
useQuery<Goose[]>({
  queryKey: ["ducks"],
  queryFn: duckFunc,
})

The fix is to change the generic to the right type or use a queryFn that returns geese.