Unable to clear cache in Next.js using RTK query

Question

Unable to clear cache in Next.js using RTK query

Currently, I am utilizing Next.js along with next-redux-wrapper and RTK Query. My application is performing external API requests on the server side. The implementation of the request looks like this:

CompaniesPage.getInitialProps = initialPagePropsWithCompanies;

// ---
import { createWrapper } from 'next-redux-wrapper';

const wrapper = createWrapper<ReturnType<typeof makeStore>>(makeStore);
export const initialPagePropsWithCompanies = wrapper.getInitialPageProps((store: AppStore) => async () => {
  store.dispatch(api.endpoints.getHomePage.initiate());
  await Promise.all(store.dispatch(api.util.getRunningQueriesThunk()));
  return { props: {} };
});

The issue at hand is that the response seems to be cached somewhere in Next.js. I'm unsure how to disable it or shorten its lifespan.

I have the line export const revalidate = 5; on my page.
I've also included cache: 'no-store' in the fetchBaseQuery configuration:

  baseQuery: fetchBaseQuery({
    baseUrl: `${process.env.NEXT_PUBLIC_PROTOCOL || 'https://'}${process.env.NEXT_PUBLIC_VERCEL_URL}/api`,
    headers: {
      'x-telegram-query': typeof window !== 'undefined' ? window.Telegram.WebApp.initData : '',
    },
    cache: 'no-store',
  }),

Additionally, I attempted adding next: { revalidate: 5 } to the fetchBaseQuery configuration.

Unfortunately, none of these solutions seem to be working. I'm out of ideas. Does anyone have any suggestions?

javascript next.js react-redux server-side-rendering rtk-query

Answer 1

Answer №1

Here is a way to achieve it. triggerReload

export const reloadDelay = 0;

const LandingPage = async () => {
  const { info } = await database.update(
    profileApi.endpoints.getUserInfo.initiate(
      { userId: 5 },
      {
        triggerReload: true,
      }
    )
  );
  return (
    <div></div>
  );
};

Answer 2

Here is a way to achieve it. triggerReload

export const reloadDelay = 0;

const LandingPage = async () => {
  const { info } = await database.update(
    profileApi.endpoints.getUserInfo.initiate(
      { userId: 5 },
      {
        triggerReload: true,
      }
    )
  );
  return (
    <div></div>
  );
};

Unable to clear cache in Next.js using RTK query

Answer №1

Similar questions

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Having issues with the basic KnockoutJS binding not functioning as expected

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

When using React, I encountered a JSON return error: Unexpected token, it was expecting a comma

When attempting to execute the "npm run start" command in a ReactJS environment, an error message appeared

Converting JSON information into a mailto hyperlink

Concealing items in a loop using Javascript

I'm having trouble removing an element from an array. The splice() method doesn't seem to be working properly

Effective management and structuring of ExpressJS routes

Is there a specific side effect that warrants creating a new Subscription?

Adding a button input and deleting non-functional parent elements

The d3.select function is failing to update the chart on the website

Encountering a problem with GraphQL API fetching in Next.js: receiving the error message "React functionality 'useContext' is not supported in this environment."

I encountered the following error: Failed to parse due to the module '@babel/preset-react' being missing

Having trouble resetting a checked checkbox label in Vuejs?

The JQuery datepicker fails to provide the date in the format mm/dd/yy

What is the process for triggering data-dismiss after the href has been activated?

Using JSP to send variables from an external Javascript file

Creating a Paytm payment link using API in a React Native app without the need for a server

JavaScript allows you to set an expiration date for a specific item