Next.js Discord

Discord Forum

Re-fetch request on revalidate on demand

Unanswered
Round sardinella posted this in #help-forum
Open in Discord
Round sardinellaOP
Is it possible to re-fetch a server component after used revalidate on demand?

This is my server component:
import NavItems from './NavItems';

const query = `{
  cptMenus {
    nodes {
      slug

      acfMenu {
        menu {
          primaryLinks {
            link {
              target
              title
              url
            }
          }
        }
      }
    }
  }
}`;

type Link = { target: string; title: string; url: string };
type MenuNode = { slug: string; acfMenu?: { menu: { primaryLinks: { link: Link }[] } } };
type MenuData = { data: { cptMenus: { nodes: MenuNode[] } } };

export default async function Nav() {
  try {
    const response = await fetch('https://cod.gwst13.com/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query, next: { tags: ['nav'] } }),
    });

    const { data }: MenuData = await response.json();

    const menu = data.cptMenus.nodes.find((node) => node.slug === 'main-menu');

    if (!menu?.acfMenu?.menu.primaryLinks) return null;

    return <NavItems menu={menu.acfMenu.menu.primaryLinks} />;
  } catch (error) {
    console.error(error);

    return null;
  }
}


This is my app/api/revlidate/nav/route.ts
import { revalidateTag } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');
  const tag = request.nextUrl.searchParams.get('tag');

  if (secret !== 'ZEuvEH7PaVZSXCCEy271gbFiVSDrhsUx') {
    return Response.json({ message: 'Invalid secret' }, { status: 401 });
  }

  if (!tag) {
    return Response.json({ message: 'Missing tag param' }, { status: 400 });
  }

  revalidateTag(tag);

  return Response.json({ revalidated: true, now: Date.now() });
}


The idea is to update the Navigation without the user having to press refresh.

4 Replies

Round sardinellaOP
Bump!
First things first: you shouldn’t share the secret here in this thread or in the browser (searchparams). Try to use the body from your post request to keep everything secure.

I don’t know how to help you with the problem, but wanted to keep you informed about security issues
Round sardinellaOP
Thanks @B33fb0n3. This secret is just for testing, so no worries
@Round sardinella Thanks <@301376057326567425>. This secret is just for testing, so no worries
Even then don’t share it in the browser