Invalidate React Query on SSR Next JS (App Router)

I am using SSR React Query by following this guide - https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

I have a API that fetches me list of products.
I am using SSR react query to cache the response

my common queryClient file

import { isServer, QueryClient } from "@tanstack/react-query";

import { DEFAULT_QUERY_OPTIONS } from "@constants";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchInterval: 10 * 60 * 1000,
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

import { isServer, QueryClient } from "@tanstack/react-query";

import { DEFAULT_QUERY_OPTIONS } from "@constants";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchInterval: 10 * 60 * 1000,
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

import { isServer, QueryClient } from "@tanstack/react-query";

import { DEFAULT_QUERY_OPTIONS } from "@constants";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchInterval: 10 * 60 * 1000,
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

import { isServer, QueryClient } from "@tanstack/react-query";

import { DEFAULT_QUERY_OPTIONS } from "@constants";

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchInterval: 10 * 60 * 1000,
      },
    },
  });
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

and page where I am fetching the products

const qc = getQueryClient();

const Page = async () => {
  await qc.prefetchQuery({queryKey: ["products"], queryFn: getProducts});

  return (
    <HydrationBoundary state={dehydrate(qc)}>{children}</HydrationBoundary>
  );
}

const qc = getQueryClient();

const Page = async () => {
  await qc.prefetchQuery({queryKey: ["products"], queryFn: getProducts});

  return (
    <HydrationBoundary state={dehydrate(qc)}>{children}</HydrationBoundary>
  );
}

const qc = getQueryClient();

const Page = async () => {
  await qc.prefetchQuery({queryKey: ["products"], queryFn: getProducts});

  return (
    <HydrationBoundary state={dehydrate(qc)}>{children}</HydrationBoundary>
  );
}

const qc = getQueryClient();

const Page = async () => {
  await qc.prefetchQuery({queryKey: ["products"], queryFn: getProducts});

  return (
    <HydrationBoundary state={dehydrate(qc)}>{children}</HydrationBoundary>
  );
}

But my main issue is, when the Backend Data change, It takes upto 10 mins to update the data on frontend to validate it.
How can I clear the cache on server side from backend?

I tried create a api route in nextjs and create a POST API

const client = getQueryClient();

export async function POST() {
  client.invalidateQueries();

  return NextResponse.json({ success: true, message: "Cache cleared" });
}

const client = getQueryClient();

export async function POST() {
  client.invalidateQueries();

  return NextResponse.json({ success: true, message: "Cache cleared" });
}

const client = getQueryClient();

export async function POST() {
  client.invalidateQueries();

  return NextResponse.json({ success: true, message: "Cache cleared" });
}

const client = getQueryClient();

export async function POST() {
  client.invalidateQueries();

  return NextResponse.json({ success: true, message: "Cache cleared" });
}

But this doesn't work either.

The I replaced my getQueryClient Function with this as well

export const getQueryClient = cache(() => new QueryClient());

export const getQueryClient = cache(() => new QueryClient());

export const getQueryClient = cache(() => new QueryClient());

export const getQueryClient = cache(() => new QueryClient());

which didn't helped either.
Please suggest something that would help me, or would I need to remove the SSR from frontend?

Advanced Server Rendering | TanStack Query React Docs

Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...

No replies yetBe the first to reply to this messageJoin

Invalidate React Query on SSR Next JS (App Router)

Similar Threads

Similar Threads

Similar Threads