RTK Query slice endpoint - useGetProductsQuery is not a function

Question

My useGetProductsQuery is not being recognized for some reason.

productsApiSlice.js

import { PRODUCTS_URL } from "../constants";
import { apiSlice } from "./apiSlice";

export const productsApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getProducts: builder.query({
            query: () => ({
                url: PRODUCTS_URL,
            }),
            keepUnusedDataFor: 5,
        }),
    }),
});

export const { useGetProductsQuery } = productsApiSlice;

component:

import { useGetProductsQuery } from "../slices/productsApiSlice";

function HomeScreen() {
    const { data: products, isLoading, error } = useGetProductsQuery();

    return (
        <div className="row">
            {isLoading ? (
                <h2>Loading...</h2>
            ) : error ? (
                <div>{error?.data?.message || error.error}</div>
            ) : (
                <p>test</p>
            )}
        </div>
    );
}

I get the following error:

    (0 , _slices_productsApiSlice__WEBPACK_IMPORTED_MODULE_0__.useGetProductsQuery) is not a function
TypeError: (0 , _slices_productsApiSlice__WEBPACK_IMPORTED_MODULE_0__.useGetProductsQuery) is not a function

Answer 1

This usually happens if createApi is not imported from the React-specific entry point @reduxjs/toolkit/query/react, but from the framework-agnostic @reduxjs/toolkit/query.

Can you please check your imports?