I am trying to iterate over the result of calling function X, but I get the error: 'X is not a function or its return value is not iterable.

I am using RTK Query. I am fetching data using post call on button click.

this is how my code looks like

searchApiSlice.js

export const searchApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        searchCustomers: builder.query({
            query: (reqBody) => ({
            url: '/customers/search',
            method: 'POST',
            body: reqBody
        })
        }),
    })
});

export const { useSearchCustomersQuery } = searchApiSlice;

SearchControls.js

function SearchControls(){
  
  const req = { startDate: "2024-10-01T12:00:00", endDate: "2024-08-29T12:00:00" };

  const [ trigger, { data } ] = api.endpoints.searchCustomers.useLazyQuery();

  function handleSearch(args){
    trigger(args)
  }

  return(
    <div>
      <button type="button" onClick={() => handleSearch(req)}>Search</button>
   </div>
  );
}

export default SearchControls;

What could be causing this issue? I have checked that X is defined, but I am still encountering this error.

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable

I am trying to iterate over the result of calling function X, but I get the error: 'X is not a function or its return value is not iterable.

I am using RTK Query. I am fetching data using post call on button click.

this is how my code looks like

searchApiSlice.js

export const searchApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        searchCustomers: builder.query({
            query: (reqBody) => ({
            url: '/customers/search',
            method: 'POST',
            body: reqBody
        })
        }),
    })
});

export const { useSearchCustomersQuery } = searchApiSlice;

SearchControls.js

function SearchControls(){
  
  const req = { startDate: "2024-10-01T12:00:00", endDate: "2024-08-29T12:00:00" };

  const [ trigger, { data } ] = api.endpoints.searchCustomers.useLazyQuery();

  function handleSearch(args){
    trigger(args)
  }

  return(
    <div>
      <button type="button" onClick={() => handleSearch(req)}>Search</button>
   </div>
  );
}

export default SearchControls;

What could be causing this issue? I have checked that X is defined, but I am still encountering this error.

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable

• reactjs
• redux
• redux-toolkit
• rtk-query

• Are you asking about 2 different problems, or is the error at the end of the post what you want specific help with? The code all seems fine to me, can you edit the title to more accurately reflect what you are asking for help with, and to add a complete minimal reproducible example? See also if you can create a running CodeSandbox demo that reproduces the issue that readers can inspect live. – Drew Reese Commented Jan 14 at 16:27
• if code looks fine then yes question is about the error. – noBoom Commented Jan 14 at 17:09
• Please edit to include the complete error message and any accompanying stacktrace(s), and a complete minimal reproducible example that reproduces the problem. – Drew Reese Commented Jan 14 at 20:23

1 Answer 1

following error went away after updating version of react and redux

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable