Getting error in console in redux-toolkit query in reactjs app

Question

I am getting errors when I am using array methods like map, filter, etc in my product API in my console as well as I am not getting anything in my browser. I am using here redux-toolkit/query in my Reactjs app. I am using react 18 version and Node.js 16 version in my system.

Home.js

import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/services/productSlice";

const Home = () => {
  const { data, error, isLoading } = useGetAllProductsQuery();

  data.map(product => {
    console.log(product);
  })

  if (isLoading) return <Loader title="Loading Products..." />;

  if (error) return <Error />;
  return <div>
      Home
    </div>;
};

export default Home;

productSLice.js

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

export const productsApi = createApi({
  reducerPath: "productsApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`,
    }),
  }),
});

export const { useGetAllProductsQuery, useGetProductQuery } = productsApi;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./services/productSlice";

export const store = configureStore({
  reducer: {
    [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(productsApi.middleware),
});

app.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

This is the error

Home.js:7 Uncaught TypeError: Cannot read properties of undefined 
(reading 'map')
at Home (Home.js:7:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

So data is null? Has the query completed? It doesn't look like you check, and we can't see useGetAllProductsQuery. — Dave Newton
– Dave Newton, Commented Nov 3, 2022 at 15:25
no, when I use only data in console.log is it giving 30 products — Pavitar Sharma
– Pavitar Sharma, Commented Nov 3, 2022 at 15:27
Relying on console.log can be misleading; the log will be updated after async processes complete--console.log stringified JSON to avoid this "gotcha". It seems pretty clear you're accessing data before it's been populated. — Dave Newton
– Dave Newton, Commented Nov 3, 2022 at 15:36

Drew Reese · Accepted Answer · 2022-11-03 20:22:13Z

Issue

You are accessing data prior to the data it represents being fetched via the hook, and console logging as an unintentional side-effect outside the component lifecycle.

Take a look at the query hook return value, both data and error are optional, which means they can be undefined.

type UseQueryResult<T> = {
  // Base query state
  originalArgs?: unknown // Arguments passed to the query
  data?: T // The latest returned result regardless of hook arg, if present
  currentData?: T // The latest returned result for the current hook arg, if present
  error?: unknown // Error result if present
  requestId?: string // A string generated by RTK Query
  endpointName?: string // The name of the given endpoint for the query
  startedTimeStamp?: number // Timestamp for when the query was initiated
  fulfilledTimeStamp?: number // Timestamp for when the query was completed

  // Derived request status booleans
  isUninitialized: boolean // Query has not started yet.
  isLoading: boolean // Query is currently loading for the first time. No data yet.
  isFetching: boolean // Query is currently fetching, but might have data from an earlier request.
  isSuccess: boolean // Query has data from a successful load.
  isError: boolean // Query is currently in an "error" state.

  refetch: () => void // A function to force refetch the query
}

Solution

Wait for the data to be loaded prior to consuming the data. Use a useEffect hook for any side-effects like logging state. Add a render case for data being undefined or an empty array.

Example:

const Home = () => {
  const { data, error, isLoading } = useGetAllProductsQuery();

  useEffect(() => {
    // Optional Chaining operator
    data?.map(product => {
      console.log(product);
    });

    // null-check/guard-clause
    data && data.map(product => {
      console.log(product);
    });

    // or more simply just log out the current value
    console.log({ data });
  }, [data]);

  if (isLoading) return <Loader title="Loading Products..." />;

  if (error) return <Error />;

  if (!data?.length) return <div>No Data</div>;
  
  return (
    <div>
      Home
      {data.map(.....)}
    </div>;
  );
};

Thanks, Drew Reese for resolving this problem. Now I am getting the products.

Collectives™ on Stack Overflow

Getting error in console in redux-toolkit query in reactjs app

1 Answer 1

Issue

Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related