Как создать универсальный крючок для извлечения данных в TypeScript для API с различными структурами ответов?

Я работаю над проектом поиска фильмов, где мне нужно получить данные из двух API (сайт фильма Tmdb) с разными структурами ответов (конечными точками фильмов и жанров). Чтобы избежать дублирования одной и той же логики для каждого перехватчика, который я использую для получения данных из API, я знаю, что могу использовать дженерики, но, к сожалению, когда я пытаюсь, я получаю неопределенную ошибку.

Текущие жанры

import { useEffect, useState } from "react";
import apiClient from "../services/api-client";
import { CanceledError } from "axios";

interface Genre {
  id: number;
  name: string;
}

interface FetchGenreResponse {
  genres: Genre[];
}

const useGenres = () => {
  const [genres, setGenres] = useState<Genre[]>([]);
  const [error, setError] = useState();
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    const controller = new AbortController();
    apiClient
      .get<FetchGenreResponse>("/genre/movie/list", {
        signal: controller.signal,
      })
      .then((res) => {
        setGenres(res.data.genres);
        setLoading(false);
      })
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setLoading(false);
        setError(err);
      });

    return () => controller.abort();
  }, []);

  return { genres, error, isLoading };
};

export default useGenres;

Актуальные фильмы

import { useEffect, useState } from "react";
import apiClient from "../services/api-client";
import { CanceledError } from "axios";

interface FetchMoviesResponse {
  total_results: number;
  results: Movie[];
}

export interface Movie {
  id: number;
  title: string;
  backdrop_path: string;
  vote_average: number;
}

const useMovies = () => {
  const [movies, setMovies] = useState<Movie[]>([]);
  const [error, setError] = useState();
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    const controller = new AbortController();
    apiClient
      .get<FetchMoviesResponse>("/discover/movie", {
        signal: controller.signal,
      })
      .then((res) => {
        setMovies(res.data.results);
        setLoading(false);
      })
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setLoading(false);
        setError(err);
      });

    return () => controller.abort();
  }, []);


  return { movies, error, isLoading };
};

export default useMovies;

Но, как вы можете видеть, я продублировал ту же логику, что не является хорошей практикой.

Я попытался извлечь общий крючок для извлечения данных, чтобы уменьшить избыточность, но он работает только для конечной точки фильмов и возвращает неопределенное значение для жанров. Я считаю, что это связано с тем, что общий хук ожидает массив результатов, который присутствует в ответе фильмов, но не в ответе жанров. Вместо этого в ответе жанров используется массив жанров.

Моя попытка решения

import { useEffect, useState } from "react";
import apiClient from "../services/api-client";
import { CanceledError } from "axios";

interface FetchResponse<T> {
  results: T[];
}

const useData = <T>(endpoint: string) => {
  const [data, setData] = useState<T[]>([]);
  const [error, setError] = useState<any>();
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    const controller = new AbortController();

    apiClient
      .get<FetchResponse<T>>(endpoint, {
        signal: controller.signal,
      })
      .then((res) => {
        setData(res.data.results);
        setLoading(false);
      })
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setLoading(false);
        setError(err);
      });

    return () => controller.abort();
  }, []);

  return { data, error, isLoading };
};

export default useData;

Вот APIКлиент

import axios from "axios";

export default axios.create({
  baseURL: "https://api.themoviedb.org/3",
  params: {
    key: "ABC",
  },
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer XYZ",
  },
});

здесь я использую хук useData в фильмах

import useData from "./UseData";

export interface Movie {
  id: number;
  title: string;
  backdrop_path: string;
  vote_average: number;
}

const useMovies = () => useData<Movie>("/discover/movie");

export default useMovies;

и здесь я использую хук useData в жанрах

import useData from "./UseData";

export interface Genre {
  id: number;
  name: string;
}

const useGenres = () => useData<Genre>("/genre/movie/list");

export default useGenres;

Как я могу создать универсальный перехватчик данных, который может получать данные из обеих конечных точек, не привязываясь к атрибутам?