T
TanStack•3mo ago
foreign-sapphire

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;
  }
}
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>
  );
}
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" });
}
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());
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...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?