Fetching data in Next.js with revalidateTag doesn't work - what am I missing?

Question

i'm using next 13.4.3 and i'm trying to revalidate my fetch data with next fetch wrapper through revalidateTag. I can't find the proper way to make this work. In production mode (next build & next start) nothing get's re-rendered. Is this feature not working at all ? I spent the last day trying to make this work with graphql-request and since it doesn't work with basic fetch here i am.

I followed the docs : https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#on-demand-revalidation

I made an api endpoint where it call the revalidateTag method, and i made a special page to test this out. Here is the code for the api :

import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export const POST = async (req: NextRequest) => {
  revalidateTag('a');
  console.log('revalidated');
  return NextResponse.json({ revalidated: true, now: Date.now() });
};

Here is the code of the page :

const page = async () => {
  const res = await fetch('http://127.0.0.1:1337/graphql', {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      query: `
        query Settings($locale: I18NLocaleCode!) {
          setting(locale: $locale) {
            data {
              attributes {
                seo {
                  title
                }
              }
            }
          }
        }
      `,
      variables: {
        'locale': 'fr',
      },
    }),
    next: { tags: ['a'] }
  });
  const { data } = await res.json();
  return (
    <div>{data && data.setting.data.attributes.seo.title}</div>
  )
}

export default page;

Answer 1

Ok that's my bad on this one, I didn't check if it was re re-rendering after a second refresh. As a comment said the feature works correctly, next start re-rendering the page on the first request that you get after revalidation so a second request will get new datas.

The above code works, and since I made this works on graphql (with graphql-request) here is the code of the query function that i call in my page.tsx :

export const Client = new GraphQLClient(`${API_URL}/graphql` as string, {
  headers: {
    authorization: TOKEN ? `Bearer ${TOKEN}` : '',
  },
  fetch: fetch,
});

export const QuerySettings = async (locale: string) => {
  const queryVariables = {
    locale: locale,
  };

  //Add revalidate Tags to next.js fetch
  Client.requestConfig.fetch = (url, options) => fetch(url, { ...options, next: { tags: ['settings'] } });

  const { setting } = await Client.request<{
    setting: {
      data: Setting;
    };
  }>(
    gql`
      query Settings($locale: I18NLocaleCode!) {
        setting(locale: $locale) {
          data {
            attributes {
              seo {
                title
              }
            }
          }
        }
      }
    `,
    queryVariables
  );

  return setting.data.attributes;
};