'NextJS - TypeError: res.unstable_revalidate is not a function

I try to use a brand new feature released in NextJS v.12.1 https://deepinder.me/nextjs-on-demand-isr. The API itself works fine. I can reach it. But in exchange it returns 500 error that says res.unstable_revalidate is not a function. It does not work either over dev (next server && next dev) run or production one (next build && next start).

This is the api endpoint:

// ./api/misc/revalidate

const revalidateCache = async (_, res) => {
    console.log(res.unstable_revalidate, 'TEST REVALIDATE'); // res.unstable_revalidate is undefined here :( 

    try {
        await res.unstable_revalidate('/');

        return res.json({ revalidated: true });
    } catch (err) {
        return res.status(500).send(`Error revalidating: ${err}`);
    }
};

export default revalidateCache;

This is the invoke:

// ./apps/client/services/server
const getRevalidate = async () => {
    await fetch('/api/misc/revalidate');
};

export default getRevalidate;

View layer that I call from:

// .src/pages/index.js

// ...some code here

const HomePage = ({ page, legacy }) => {
    const handleClick = () => {
        getRevalidate();
    };

    return (
        <div className={styles.homeRoot}>
            <button onClick={handleClick}>REVALIDATE</button>
        </div>
    );
};

UPD: I use express to handle API abstration.


import express from 'express';

import revalidateCacheApi from './api/misc/revalidate';

export default app => {
    // ...some code here

    app.use('/api/misc/revalidate', revalidateCacheApi);
};




Solution 1:[1]

NVM. It was an issue with my local server. I use advanced set up with two independent instances (:3000 and :4000) spinning in the memory.

The way I designed API above suppose to call it over :4000 server. Which is in fact Express server (obviously does not has NextJS internal API to purge the cache).

So I moved the call to the pages/api/revalidate and up to :3000 server.

Works fine:

// ./src/pages/server/revalidate.js

const getRevalidate = async () => {
    await fetch('/api/revalidate');
};

export default getRevalidate;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sviat Kuzhelev