I am working on MERN project, and I am using RTK Query to handle requests and caching. I keep getting 304 status code when I make a request from React, but 200 when it is through Postman. Furthermore, I tried to delete cache and local storage and cookies but nothing changes. The code is displayed on the server's console.
base/empty service (emptySlice.js)
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { baseUrl } from "../utils/base_url";
export const emptySlice = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({ baseUrl: `${baseUrl}/api/` }),
tagTypes: ["Serviceman"],
endpoints: (build) => ({}),
});
servicemenSlice.js
import { emptySlice } from "./emptySlice";
export const serviceMenSlice = emptySlice.injectEndpoints({
endpoints: (build) => ({
getServiceMen: build.query({
query: () => "serviceman",
providesTags: ["Serviceman"],
}),
}),
});
export const { useGetServiceMenQuery } = serviceMenSlice;
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { ApiProvider } from "@reduxjs/toolkit/dist/query/react";
import { emptySlice } from "./services/emptySlice";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<ApiProvider api={emptySlice}>
<App />
</ApiProvider>
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
reportWebVitals();
store.js
I am not using the store since ApiProvider in the index.js. I actually tried using the store with the required middleware, but the result is the same.
Landing.jsx
Here is where the error occurs when serviceMen is fetched.
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Header from "../../components/Header/Header";
import ServiceSearchBar from "../../components/ServiceSearchBar/ServiceSearchBar";
import ServiceCategoryList from "../../components/ServiceCategoryList/ServiceCategoryList";
import { useDispatch, useSelector } from "react-redux";
import { getServices } from "../../features/service/serviceSlice";
import MainContentWrapper from "../../components/MainContentWrapper/MainContentWrapper";
import { getAllServiceMen } from "../../features/serviceMan/serviceManSlice";
import ServiceMan from "../../components/ServiceMan/ServiceMan";
import Footer from "../../components/Footer/Footer";
import PageWrapper from "../../components/PageWrapper/PageWrapper";
import Loading from "../../components/Loading/Loading";
import Badge from "../../components/Badge/Badge";
import { useGetServiceMenQuery } from "../../services/servicemenSlice";
import { useGetServicesQuery } from "../../services/serviceSlice";
const Landing = () => {
const {
data: serviceMen,
isLoading,
isFetching,
isError,
error,
} = useGetServiceMenQuery();
const {
data: services,
isLoading: isLoadingServices,
isFetching: isFetchingServices,
isError: isErrorServices,
} = useGetServicesQuery();
const [activeServiceMen, setActiveServiceMen] = useState([]);
if (isLoading || isFetching) {
return <Loading />;
}
if (isError) {
return <h1>{error}</h1>;
}
const serviceMenList = serviceMen.map((serviceMan) => (
<ServiceMan key={serviceMan._id} serviceMan={serviceMan} />
));
const activeServices = services.filter((service) => service.active);
return (
<PageWrapper>
<Header />
<MainContentWrapper>
<ServiceSearchBar />
<section className="grid grid-col lg:grid-cols-4 w-full gap-5 items-start mb-10">
<div className="flex col-span-full lg:col-span-1 flex-col gap-2">
<Badge text="Services" number={activeServices.length} />
<ServiceCategoryList services={activeServices} />
</div>
<div className="col-span-full lg:col-span-3 w-full justify-center">
<Badge text="Service Men" number={activeServiceMen.length} />
<div className="flex flex-col gap-4 mt-5 pr-6">
{activeServiceMen.length > 0 ? (
{ serviceMenList }
) : (
<div className="flex justify-center items-center">
<p className="text-black">No service man yet</p>
</div>
)}
</div>
</div>
</section>
</MainContentWrapper>
<Footer />
</PageWrapper>
);
};
Landing.propTypes = {};
export default Landing;
