Getting 304 status code on server console even after cache is deleted

292 Views Asked by At

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.

enter image description here

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;

0

There are 0 best solutions below