React redux toolkit useGetFilterProductsQuery and useGetFilterProductsByCategoriesQuery are not defined as functions

Question

I am making a react app using redux toolkit for state management, Here I am getting error message

app_api_apiSlice__WEBPACK_IMPORTED_MODULE_1_.useGetFilterProductsByCategoriesQuery is not a function ProductList@http://localhost:3000/static/js/bundle.js:781:108 renderWithHooks@http://localhost:3000/static/js/bundle.js:33691:31 updateFunctionComponent@http://localhost:3000/static/js/bundle.js:36573:24 beginWork@http://localhost:3000/static/js/bundle.js:38285:20 callCallback@http://localhost:3000/static/js/bundle.js:23283:18 invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:23327:20 invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:23384:35 beginWork$1@http://localhost:3000/static/js/bundle.js:43258:32 performUnitOfWork@http://localhost:3000/static/js/bundle.js:42505:16 workLoopSync@http://localhost:3000/static/js/bundle.js:42428:26 renderRootSync@http://localhost:3000/static/js/bundle.js:42401:11 performSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:42093:38 flushSyncCallbacks@http://localhost:3000/static/js/bundle.js:30123:26 flushSyncCallbacksOnlyInLegacyMode@http://localhost:3000/static/js/bundle.js:30105:9 batchedUpdates$1@http://localhost:3000/static/js/bundle.js:42149:11 batchedUpdates@http://localhost:3000/static/js/bundle.js:23131:16 dispatchEventForPluginEventSystem@http://localhost:3000/static/js/bundle.js:27747:21 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/static/js/bundle.js:25253:42 dispatchEvent@http://localhost:3000/static/js/bundle.js:25247:88 dispatchDiscreteEvent@http://localhost:3000/static/js/bundle.js:25224:22 EventListener.handleEvent*addEventBubbleListener@http://localhost:3000/static/js/bundle.js:25446:14 addTrappedEventListener@http://localhost:3000/static/js/bundle.js:27670:33 listenToNativeEvent@http://localhost:3000/static/js/bundle.js:27614:30 ./node_modules/react-dom/cjs/react-dom.development.js/listenToAllSupportedEvents/<@http://localhost:3000/static/js/bundle.js:27625:34 listenToAllSupportedEvents@http://localhost:3000/static/js/bundle.js:27620:25 legacyCreateRootFromDOMContainer@http://localhost:3000/static/js/bundle.js:45064:35 legacyRenderSubtreeIntoContainer@http://localhost:3000/static/js/bundle.js:45088:16 render@http://localhost:3000/static/js/bundle.js:45153:14 ./src/index.js@http://localhost:3000/static/js/bundle.js:959:50 options.factory@http://localhost:3000/static/js/bundle.js:73591:31 webpack_require@http://localhost:3000/static/js/bundle.js:73036:33 @http://localhost:3000/static/js/bundle.js:74173:56 @http://localhost:3000/static/js/bundle.js:74175:12

My code is as follow

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';


import { useGetProductsQuery, useGetFilterProductsQuery, useGetFilterProductsByCategoriesQuery } from '../../app/api/apiSlice';

import { useSelector } from 'react-redux';

function ProductList() {


  const selectedCategories = useSelector(state => state.filters.selectedCategories);
  const minPrice = useSelector(state => state.filters.minPrice);
  const maxPrice = useSelector(state => state.filters.maxPrice);


  let productQuery;

   if (minPrice && maxPrice) {
    alert(minPrice + " " + maxPrice);
    productQuery = useGetFilterProductsQuery(minPrice, maxPrice );
  } else if (selectedCategories.length > 0) {
    alert(selectedCategories);
    productQuery = useGetFilterProductsByCategoriesQuery(selectedCategories);
  } else {
    console.log(`It is working fine!`);
    productQuery = useGetProductsQuery();
  }
  

  const { data: products, isLoading, isError, isSuccess } = productQuery;


 
  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    console.log('Error' + isError);
    return <p>Error fetching products</p>;
  }
  
    return (
      <Container>
        <h1 className="my-4">Product List</h1>
        <Row>
          {products.products.map((product) => (
            <Col key={product.id} xs={12} md={6} lg={4}>
              <Card className="mb-4">
                <Card.Img variant="top" src={product.image} alt={product.name} />
                <Card.Body>
                  <Card.Title>{product.name}</Card.Title>
                  <Card.Text>{product.description}</Card.Text>
                  <Card.Text>Price: ${product.price}</Card.Text>
                  <Button
                    variant="primary"
                    onClick={() => handleAddToCart(product.id)}
                  >
                    Add to Cart
                  </Button>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    );

}

export default ProductList;

and

// Need to use the React-specific entry point to import createApi
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Define a service using a base URL and expected endpoints
export const productApi = createApi({
  reducerPath: 'productApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:5000/' }),
   endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => 'product', // Change this to match your API endpoint for fetching products
    }),
    getCategory: builder.query({
      query: () => 'categories', // Change this to match your API endpoint for fetching products
    }),
   
    getfilterProducts: builder.query({
        query: ({minPrice,maxPrice}) => `/products/filterbypricerange?minPrice=${minPrice}&maxPrice=${maxPrice}`,
    }),
     
     getfilterProductsByCategories: builder.query({
      query: (categories) => `/products/categories=${categories}`,
     }),  
  }),
})

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetProductsQuery,useGetCategoryQuery, useGetFilterProductsQuery,useGetFilterProductsByCategoriesQuery } = productApi;

Help me in resolving the bug in code

Answer 1

There are typos inside your product api.

Put your variables as camelCase

getfilterProducts: builder.query({
    query: ({minPrice,maxPrice}) => `/products/filterbypricerange?minPrice=${minPrice}&maxPrice=${maxPrice}`,
}),
 
 getfilterProductsByCategories: builder.query({
  query: (categories) => `/products/categories=${categories}`,
 }), 

to

getFilterProducts: builder.query({
    query: ({minPrice,maxPrice}) => `/products/filterbypricerange?minPrice=${minPrice}&maxPrice=${maxPrice}`,
}),
 
 getFilterProductsByCategories: builder.query({
  query: (categories) => `/products/categories=${categories}`,
 }),