title: RTK Query in Redux-Toolkit is returning data of undefined, when I console.log the data it appears in console
body: <p>I was trying to display an array of data fetched from my custom server with RTK Query using Next.js (React framework). And this is my first time using RTK Query. Whenever I <code>console.log</code> the data, it appears in the browser console. But whenever I try to map the data to render it in the browser, it keeps throwing an error saying <code>Cannot read properties of undefined (reading 'map')</code>.</p>
  <p>I figured Next.js always throws an error if an initial state is <code>undefined</code> or <code>null</code> even if the state change. This link talked about solving the problem using useMemo hook <a href="https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics" rel="nofollow noreferrer">https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics</a>
  But I didn't understand it well. Please kindly help me out with displaying the data.</p>
  <p>Here is the <code>BaseQuery</code> function example I followed, it was derived from redux toolkit docmentation <a href="https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery" rel="nofollow noreferrer">https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery</a></p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const axiosBaseQuery =
    ({ baseUrl } = { baseUrl: &quot;&quot; }) =&gt;
    async ({ url, method, data }) =&gt; {
      try {
        const result = await axios({ url: baseUrl + url, method, data });
        return { data: result.data };
      } catch (axiosError) {
        let err = axiosError;
        return {
          error: { status: err.response?.status, data: err.response?.data },
        };
      }
    };
  
  export default axiosBaseQuery;
  </code></pre>
  <p>I make the GET request here</p>
  <pre><code>import { createApi } from &quot;@reduxjs/toolkit/query/react&quot;;
  import axiosBaseQuery from &quot;./axiosBaseQuery&quot;;
  
  export const getAllCarsApi = createApi({
    reducerPath: &quot;getAllCarsApi&quot;,
    baseQuery: axiosBaseQuery({
      baseUrl: &quot;http://localhost:5000/&quot;,
    }),
    endpoints(build) {
      return {
        getAllCars: build.query({
          query: () =&gt; ({ url: &quot;all-cars&quot;, method: &quot;get&quot; }),
        }),
      };
    },
  });
  
  export const { useGetAllCarsQuery } = getAllCarsApi;
  </code></pre>
  <p>This is my redux store</p>
  <pre><code>import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import { getAllCarsApi } from &quot;./getAllCarsApi&quot;;
  import { setupListeners } from &quot;@reduxjs/toolkit/dist/query&quot;;
  
  const store = configureStore({
    reducer: { [getAllCarsApi.reducerPath]: getAllCarsApi.reducer },
    middleware: (getDefaultMiddleware) =&gt;
      getDefaultMiddleware().concat(getAllCarsApi.middleware),
  });
  setupListeners(store.dispatch);
  
  export default store;
  </code></pre>
  <p>I provide the store to the <code>_app.js</code> file.</p>
  <pre><code>import &quot;../styles/globals.css&quot;;
  import axios from &quot;axios&quot;;
  import { MyContextProvider } from &quot;@/store/MyContext&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import store from &quot;@/store/ReduxStore/index&quot;;
  
  axios.defaults.withCredentials = true;
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;MyContextProvider&gt;
        &lt;Provider store={store}&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Provider&gt;
      &lt;/MyContextProvider&gt;
    );
  }
  
  export default MyApp;
  </code></pre>
  <p>I get the data here in my frontend.</p>
  <pre><code>import { useGetAllCarsQuery } from &quot;@/store/ReduxStore/getAllCarsApi&quot;;
  
  const theTest = () =&gt; {
    const { data, isLoading, error } = useGetAllCarsQuery();
  
    return (
      &lt;div&gt;
        {data.map((theData, i) =&gt; (
          &lt;h1 key={i}&gt;{theData}&lt;/h1&gt;
        ))}
        &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  export default theTest;
  </code></pre>