In trying to use the shazam API, I'm getting the error that my useTopChartsQuery is not being seen as a function

Question

This is the shazamCore.js file

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const shazamCoreApi = createApi({
  reducerPath: "shazamCoreApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://shazam-core.p.rapidapi.com/v1",
    prepareHeaders: (headers) => {
      headers.set("X-RapidAPI-Key", "XYZ");
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getTopCharts: builder.query({ query: () => "/charts/world" }),
  }),
});

export const { useTopChartsQuery } = shazamCoreApi;

This is the Discover.jsx file

import { Error, Loader, SongCard } from "../components";
import { genres } from "../assets/constants";
import { useTopChartsQuery } from "../redux/services/shazamCore";

const Discover = () => {
  const { data } = useTopChartsQuery();
  const genreTitle = "Pop";
  return (
    <div className="flex flex-col">
      <div className="w-full flex justify-between items-center sm:flex-row flex-col mt-4 mb-10">
        <h2 className="font-bold text-3xl text-white text-left">
          Discover {genreTitle}
        </h2>
        <select
          onChange={() => {}}
          value=""
          className="bg-black text-gray-300 p-3 text-sm rounded-lg outline-none sm:mt-0 mt-5 "
        >
          {genres.map((genre) => (
            <option key={genre.value} value={genre.value}>
              {genre.title}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((song, i) => (
          <SongCard key={song.key} song={song} i={i} />
        ))}
      </div>
    </div>
  );
};

export default Discover;

I tried naming in differently, making sure it's the correct path, double checked the package.json file to make sure redux is there and still the same error Uncaught TypeError: useTopChartsQuery is not a function

Answer 1

The query endpoint is named getTopCharts, so the generated hook will be named useGetTopChartsQuery and not useTopChartsQuery.

Either rename the query to match what you are wanting to destructure:

...

endpoints: (builder) => ({
  topCharts: builder.query({ query: () => "/charts/world" }),
}),

...

export const { useTopChartsQuery } = shazamCoreApi;

or destructure and use the correct generated hook:

...

endpoints: (builder) => ({
  getTopCharts: builder.query({ query: () => "/charts/world" }),
}),

...

export const { useGetTopChartsQuery } = shazamCoreApi;