TypeError: Object(...) is not a function in Reactjs/Redux

Question

I am fetching from an API using RapidAPI wih the following code. However when I log data in the news.js file I get an error TypeError: Object(...) is not a function. Error is caused while calling useGetCryptoNewsQuery() in the news.js file but don't know why ?

cryptoNewsApi.js

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

const cryptoNewsHeaders = {
    'x-bingapis-sdk': 'true',
    'x-rapidapi-host': 'bing-news-search1.p.rapidapi.com',
    'x-rapidapi-key': '47b79d4c67msha7f714530c2bb51p1303cbjsnafa8f32ed345'
}

const baseUrl = 'https://bing-news-search1.p.rapidapi.com/'

const createRequest = (url) => ({ url, headers: cryptoNewsHeaders });

export const cryptoNewsApi = createApi({
    reducerPath: 'cryptoNewsApi',
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getCryptoNews: builder.query({
            query: ({ newsCategory, count }) => createRequest(`/news/search?q=${newsCategory}&safeSearch=Off&textFormat=Raw&freshness=Day&count=${count}`),
        }),
    }),
});

export const { useGetCryptoNewsQuery } = cryptoNewsApi

news.js

import React from 'react';
import { Select, Typography } from 'antd';

import { useGetCryptoNewsQuery } from '../services/cryptoNewsApi';

const News = ({ simplified }) => {

    const { data: cryptoNews } = useGetCryptoNewsQuery({ newsCategory: 'Cryptocurrency', count: simplified ? 6 : 12 });
    console.log(cryptoNews)

    return (
        <div>
            News
        </div>
    )
}

export default News

Answer 1

I think it's because you are importing useGetCryptoNewsQuery from ../services/cryptoNewsApi while it is exported from api.js

Edit the import like this:

import { useGetCryptoNewsQuery } from " // any path api.js is located

Answer 2

The issue is in your import line. It currently is:

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

It needs to be:

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