Global `afterChange` hook seems to trigger only when global code is updated

[fallow vigil]

I'm having trouble with changes I make to a global syncing to my website that uses that global. I'm reading the global like this, because it's the only way I can find to read a global:

export async function Careers() {
  const settings: CareersSetting = await getCachedGlobal("careers-settings", 1)()
  return <CareersClient settings={settings} />
}

When I make changes to this global on the Payload admin dashboard, they don't reflect in the CareersClient component even if I restart the site. So I thought the afterChange hook would help with this, and added it to the global:

export const CareersSettings: GlobalConfig = {
  slug: "careers-settings",
  hooks: {
    afterChange: [revalidateGlobalAfterChange],
  },
...

where the function looks like this:

export const revalidateGlobalAfterChange: GlobalAfterChangeHook = async ({ global, doc }) => {
  revalidateTag(`global_${global.slug}`, "max")
  return doc
}

Now if I update the global in the admin panel, nothing happens when I reload the page that hosts the Careers component, but if I update say a default value on one of the fields in the global's source code, even though I'm not using default value anywhere, the hook seems to be called because the Careers component now shows the up to date value I set in the admin page.

[unkempt pollen]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Context - How To Use Context - Preventing Infinite Loops
• Global Hooks - Config Options - afterChange
• Global Hooks - Config Options - beforeValidate

Community-Help:

• Using collection data to populate another field
• Prevent update of array->string in global
• Api Route
• Update a collection when updating globals with afterChange hook

[silver swan]

Your global is stuck behind Next’s unstable_cache.

revalidateTag must use the exact same string as:

tags: [global_${slug}]

in getCachedGlobal, and it only works on the same Next.js deployment that renders the page.

Changing defaultValue in code usually busts dev or HMR cache. That is not proof the hook ran. Use a log in afterChange to verify.

Add revalidatePath for the careers route if the route cache still serves stale HTML.

[fallow vigil]

Thank you, I will try this in future. I did only say the hook seems to run, but it's nice to know it doesn't. This app won't be suffering under very many hits at all, so I've just reverted to this, to not battle with any cache at all:

  const settings = await payload.findGlobal({
    slug: "careers-settings",
    draft: false,
  })