How can I use IncrementalCache

[BredyOST]

Hi guys, can you help mt with my code.

Cache-handler.js:
const fs = require('fs');
const Redis = require('ioredis');
const { reviveFromBase64Representation, replaceJsonWithBase64 } = require('@neshca/json-replacer-reviver');
const { IncrementalCache } = require('@neshca/cache-handler');

const REVALIDATED_TAGS_KEY = 'sharedRevalidatedTags';

const pathToRedisCert = 'D:/WEB/search-client/.redis/root.crt';

const config = {
host: 'master.5a8ea7e5-5c92-4bc2-822f-',
port: 6380,
password: 'Cr07o*********',
tls: {
rejectUnauthorized: true,
ca: [fs.readFileSync(pathToRedisCert).toString()],
}
};

const client = new Redis(config);

client.on('connect', () => {
console.log('connection Redis'); // I see this in console
});
client.on('error', (err) => {
console.error('connection error Redis:', err);
});

IncrementalCache.onCreation(async () => {

const useTtl = false;

client.set('testKey', 'testValue')
    .then(() => client.get('testKey'))
    .then(value => {
        console.log('test Redis:', value); // I see this in console
    })
    .catch(error => {
        console.error('test error Redis:', error);
    });
if (!client) {
    console.error('Redis client initialization error');
    return;
}

return {
    useFileSystem: !useTtl,
    cache: {
        async get(key) {
            try {
                const result = (await client.get(key)) ?? null;

                if (!result) {
                    return null;
                }

                // use reviveFromBase64Representation to restore binary data from Base64
                return JSON.parse(result, reviveFromBase64Representation);
            } catch (error) {
                console.error('cache.get', error);

                return null;
            }
        },
        async set(key, value, ttl) {
            try {
                await client.set(
                    key,
                    // use replaceJsonWithBase64 to store binary data in Base64 and save space
                    JSON.stringify(value, replaceJsonWithBase64),
                    useTtl && typeof ttl === 'number' ? { EX: ttl } : undefined,
                );
            } catch (error) {
                console.error('cache.set', error);
            }
        },
        async getRevalidatedTags() {
            try {
                const sharedRevalidatedTags = await client.hGetAll(REVALIDATED_TAGS_KEY);

                const entries = Object.entries(sharedRevalidatedTags);

                const revalidatedTags = Object.fromEntries(
                    entries.map(([tag, revalidatedAt]) => [tag, Number(revalidatedAt)]),
                );

                return revalidatedTags;
            } catch (error) {
                console.error('cache.getRevalidatedTags', error);
            }
        },
        async revalidateTag(tag, revalidatedAt) {
            try {
                await client.hSet(REVALIDATED_TAGS_KEY, {
                    [tag]: revalidatedAt,
                });
            } catch (error) {
                console.error('cache.revalidateTag', error);
            }
        },
    },
};

});

module.exports = IncrementalCache;`

In component:

`import React from 'react';
import cls from './pricePage.module.scss'
import {classNames} from "@/app/components/shared/lib/classNames/className";
import ListsCategory from "@/app/dashboard/price/listsCategory/listsCategory";
import Cards from "@/app/dashboard/price/cards/cards";
import Link from "next/link";
import BlockBtnAdd from "@/app/dashboard/price/blockBtnAdd/blockBtnAdd";
const IncrementalCache = require('./../../../../cache-handler');

async function getData() {
let prices = [];
let categories = [];
console.log(IncrementalCache);

try {
    const pricesRes = await fetch('http://localhost:7777/prices/getAll', { next: { revalidate: 86400 }})
    prices = await pricesRes.json();
    const cacheResult = await IncrementalCache.set('prices', prices)
    // const cache = await IncrementalCache.get('prices');
    // console.log(cache)
} catch (err) {
    console.error('save error Redis:', err);
}
return prices ;

}
`

But I see problem:

cache.set ReplyError: ERR syntax error at parseError (D:\WEB\search-client\node_modules\redis-parser\lib\parser.js:179:12) at parseType (D:\WEB\search-client\node_modules\redis-parser\lib\parser.js:302:14) { command: { name: 'set', args: [ '9aa22891ca163361c3638ac61cb7e9fe95c3e6888fa95badf2c6de48f30225fb', '{"value":{"kind":"FETCH","data":{"headers":{"access-control-allow-origin":"*","connection":"keep-alive","content-length":"728","content-type":"application/json; charset=utf-8","date":"Sun, 10 Dec 2023 19:00:16 GMT","etag" :"W/\\"2d8-5OJHyc1GZXfTBXX+uFcznaQG7J0\\"","keep-alive":"timeout=5","set-cookie":"connect.sid=s%3AsyC6lBh_BZGOMB-uRKUlVZvgxw8QeF3u.RQ%2FRO9bd9NfHQ6NH27jv%2BNkyp1zUgDZbccOncNEQ1lc; Path=/; HttpOnly","x-powered-by":"Express"},"bod y":"W3siaWQiOjEsImlkZW50aWZpY2F0b3JJZCI6IjEiLCJ0aXRsZSI6ItCR0LXRgdC/0LvQsNGC0L3Ri9C5IiwicHJpY2UiOjAsInBlcmlvZCI6MiwiZGVzY3JpcHRpb24iOiLQn9C+0L/RgNC+0LHRg9C5INCx0LXRgdC/0LvQsNGC0L3QviIsInNhbGUiOmZhbHNlLCJwZXJjZW50Rm9yU2FsZSI6MCwi Y3JlYXRlZEF0IjoiMjAyMy0xMi0wOFQxMDoxMzowNy4zOTNaIiwidXBkYXRlQXQiOiIyMDIzLTEyLTA4VDEyOjU5OjA3Ljk4N1oifSx7ImlkIjoyLCJpZGVudGlmaWNhdG9ySWQiOiIyIiwidGl0bGUiOiLQn9C+0LPRgNGD0LfQuNGB0Ywg0LIg0YDQsNCx0L7RgtGDIiwicHJpY2UiOjI1MDAsInBlcmlv ZCI6MSwiZGVzY3JpcHRpb24iOiLQn9C+0LvRg9GH0Lgg0L/QvtC00L/QuNGB0LrRgyIsInNhbGUiOmZhbHNlLCJwZXJjZW50Rm9yU2FsZSI6MCwiY3JlYXRlZEF0IjoiMjAyMy0xMi0wOFQxMDoxMzowNy4zOTNaIiwidXBkYXRlQXQiOiIyMDIzLTEyLTA4VDEyOjU5OjU5LjAzMFoifSx7ImlkIjozLCJp ZGVudGlmaWNhdG9ySWQiOiIzIiwidGl0bGUiOiLQmtC+0LzQsNC90LTQvdGL0LkiLCJwcmljZSI6MCwicGVyaW9kIjowLCJkZXNjcmlwdGlvbiI6ItCU0LvRjyDQutC+0LzQsNC90LTRiyIsInNhbGUiOmZhbHNlLCJwZXJjZW50Rm9yU2FsZSI6MCwiY3JlYXRlZEF0IjoiMjAyMy0xMi0wOFQxMDoxMzowNy4zOTNaIiwidXBkYXRlQXQiOiIyMDIzLTEyLTA4VDEwOjEzOjA3LjM5M1oifV0=","status":200,"url":"http://localhost:7777/prices/getAll"},"revalidate":86400},"lastModified":1702234816230}', '' ] } } save error Redis: TypeError: IncrementalCache.set is not a function at getData (webpack-internal:///(rsc)/./src/app/dashboard/price/page.tsx:43:52) at async PricePage (webpack-internal:///(rsc)/./src/app/dashboard/price/page.tsx:73:36) cache.set ReplyError: ERR syntax error at parseError (D:\WEB\search-client\node_modules\redis-parser\lib\parser.js:179:12) at parseType (D:\WEB\search-client\node_modules\redis-parser\lib\parser.js:302:14) { command: { name: 'set', args: [ '181ef98f48868b9d0c31a45bb187a52cc0c50ed3b21bb98815bee3ede7abdef8', '{"value":{"kind":"FETCH","data":{"headers":{"access-control-allow-origin":"*","connection":"keep-alive","content-length":"7048","content-type":"application/json; charset=utf-8","date":"Sun, 10 Dec 2023 19:00:16 GMT","etag ":"W/\\"1b88-sNnJmbpHhZpv/aC1Sps0hZQ71sw\\"","keep-alive":"timeout=5","set-cookie":"connect.sid=s%3AuN7-CeadoIRHU9KkUwM9iZ2TmNCMmgOa.1S%2FmvK177FrXPAjeb2eEx9qjVHw9vTIStzMRw2wUJmo; Path=/; HttpOnly","x-powered-by":"Express"},"bod y":"W3siaWQiOjEsImlkX2NhdGVnb3J5IjoiMSIsIm5hbWUiOiLQoNC10L/QtdGC0LjRgtC+0YDRgdGC0LLQviIsImRlc2NyaXB0aW9uIjoi0J/QvtC40YHQuiDRg9GH0LXQvdC40LrQvtCyIiwicG9zaXRpdmVXb3JkcyI6WyLQuNGJ0YMg0YDQtdC/0LXRgiIsItC40YnRgyDQv9GA0LXQv9C+0LTQsNCy 0LDRgtC1Iiwi0LjRidGDINC90LDRgdGC0LDQstC90LjQutCwIiwi0LjRidGDINC80LDRgtC10LzQsNGC0LjQutCwIiwi0LjRidGDINGA0YPRgdC40YfQutGDIiwi0LjRidGDINC60YPRgNGB0YsiLCLQvdGD0LbQtdC9INGA0LXQv9C10YIiLCLQvdGD0LbQtdC9INC/0YDQtdC/0L7QtCIsItC90YPQttC1 0L0g0YPRh9C40YLQtSIsItC90YPQttC90Ysg0LrRg9GA0YHRiyIsItC/0L7QtNCz0L7RgtC+0LLQutCwINC6INCV0JPQrSIsItC/0L7QtNCz0L7RgtC+0LLQutCwINC6INCe0JPQrSIsItC/0L7QtNCz0L7RgtC+0LLQutCwINC6INCS0J/QoCIsItC/0L7QtNCz0L7RgtC+0LLQutCwINC6INC+0LvQuNC8 0L/QuNCw0LQiLCLRgtGA0LXQsdGD0LXRgtGB0Y8g0YDQtdC/0LXRgiIsItGC0YDQtdCx0YPRjtGC0YHRjyDQutGD0YDRgdGLIiwi0YLRgNC10LHRg9GO0YLRgdGPINC90LDRgdGC0LDQstC90LjQutC4Iiwi0YLRgNC10LHRg9C10YLRgdGPINC/0YDQtdC/0L7QtNCw0LLQsNGCIiwi0LfQvdCw0LXRgiDR hdC+0YDQvtGI0LXQs9C+INGA0LXQv9C10YLQuNGC0L7RgNCwIiwi0LfQvdCw0LXRgiDRhdC+0YDQvtGI0LjRhSDRgNC10L/QtdGC0LjRgtC+0YDQvtCyIiwi0L/QvtGB0L7QstC10YLRg9C50YLQtSDRgNC10L/QtdGC0LjRgiIsItC/0L7RgdC+0LLQtdGC0YPQudGC0LUg0YPRh9C40YLQtdC7Iiwi0L/Q vtGB0L7QstC10YLRg9C50YLQtSDQv9GA0LXQv9C+0LTQsNCy0LDRgiIsItC/0L7RgdC+0LLQtdGC0YPQudGC0LUg0L3QsNGB0YLQsNCy0L3QuNC6Iiwi0L/QvtGB0L7QstC10YLRg9C50YLQtSDQvNCw0YLQtdC80LDRgtC40LrQsCIsItC/0L7RgdC+0LLQtdGC0YPQudGC0LUg0YDRg9GB0LjRh9C60YMi LCLQv9C+0YHQvtCy0LXRgtGD0LnRgtC1INC60YPRgNGB0YsiLCLQv9C+0YHQvtCy0LXRgtGD0LnRgtC1INC+0L3Qu9Cw0LnQvSDRiNC60L7Qu9GDIiwi0L/QvtGA0LXQutC+0LzQtdC90LTRg9C50YLQtSDRgNC10L/QtdGC0LjRgiIsItC/0L7RgNC10LrQvtC80LXQvdC00YPQudGC0LUg0YPRh9C40YLQ tdC7Iiwi0L/QvtGA0LXQutC+0LzQtdC90LTRg9C50YLQtSDQv9GA0LXQv9C+0LTQsNCy0LDRgiIsItC/0L7RgNC10LrQvtC80LXQvdC00YPQudGC0LUg0L3QsNGB0YLQsNCy0L3QuNC6Iiwi0L/QvtGA0LXQutC+0LzQtdC90LTRg9C50YLQtSDQvNCw0YLQtdC80LDRgtC40LrQsCIsItC/0L7RgNC10LrQ vtC80LXQvdC00YPQudGC0LUg0YDRg9GB0LjRh9C60YMiLCLQv9C+0YDQtdC60L7QvNC10L3QtNGD0LnRgtC1INC60YPRgNGB0YsiLCLQv9C+0YDQtdC60L7QvNC10L3QtNGD0LnRgtC1INC+0L3Qu9Cw0LnQvSDRiNC60L7Qu9GDIiwi0L/QvtC00YHQutCw0LbQuNGC0LUg0L/QvtC20LDQu9GD0LnRgdGC 0LAg0YDQtdC/0LXRgtC40YIiLCLQv9C+0LTRgdC60LDQttC40YLQtSDQv9C+0LbQsNC70YPQudGB0YLQsCDRg9GH0LjRgtC10LsiLCLQv9C+0LTRgdC60LDQttC40YLQtSDQv9C+0LbQsNC70YPQudGB0YLQsCDQv9GA0LXQv9C+0LTQsNCy0LDRgiIsItC/0L7QtNGB0LrQsNC20LjRgtC1INC/0L7QttCw 0LvRg9C50YHRgtCwINC90LDRgdGC0LDQstC90LjQuiIsItC/0L7QtNGB0LrQsNC20LjRgtC1INC/0L7QttCw0LvRg9C50YHRgtCwINC80LDRgtC10LzQsNGC0LjQutCwIiwi0L/QvtC00YHQutCw0LbQuNGC0LUg0L/QvtC20LDQu9GD0LnRgdGC0LAg0YDRg9GB0LjRh9C60YMiLCLQv9C+0LTRgdC60LDQ vtC20LDQu9GD0LnRgdGC0LAiLCLQv9GA0LXQv9C+0LTQsNCy0LDRgtC10LsiLCLQv9C+0LbQsNC70YPQudGB0YLQsCIsItGD0YfQuNGC0LXQuyIsItGF0L7RgNC+0YjQtdCz0L4g0YDQtdC/0LXRgtC40YLQvtGAIiwi0L/QvtC00YHQutCw0LbQuNGC0LUg0YDQtdC/0LXRgtC40YLQvtGAIiwi0YHRgNC+0YfQvdC+INC90YPQttC10L0g0YDQtdC/0LXRgtC40YLQvtGAIiwi0YHRgNC+0YfQvdC+INGA0LXQv9C10YLQuNGC0L7RgCIsItC10YHRgtGMINGA0LXQv9C10YLQuNGC0L7RgNGLPyIsItC10YHRgtGMINGA0LXQv9C10YLQuNGC0L7RgD8iLCLQuNC90LTQuNCy0LjQtNGD0LDQu9GM0L3QvtCz0L4g0YDQtdC/0LXRgtC40YLQvtGA0LA/Il0sIm5lZ2F0aXZlV29yZHMiOlsi0Y8g0L/RgNC10L/QvtC00LDQstCw0YLQtdC70YwiLCLRjyDRgNC10L/QtdGC0LjRgtC+0YAiLCLQv9GA0L7QstC+0LbRgyDQt9Cw0L3Rj9GC0LjRjyIsItC90LDQsdC40YDQsNGOINGD0YfQtdC90LjQutC+0LIiLCLQv9GA0LjQs9C70LDRiNCw0Y4g0LLRgdC10YUg0L3QsCDQt9Cw0L3Rj9GC0LjRjyIsItC/0YDQtdC00LvQsNCz0LDRjiDRg9GB0LvRg9Cz0LgiLCLQsNCy0YLQvtGA0YHQutC40Lkg0LrRg9GA0YEiLCLQsNCy0YLQvtGA0YHQutC40Lkg0Y3QutGB0L/RgNC10YHRgSIsItGPINC/0YDQtdC00LvQsNCz0LDRjiDQv9C+0LzQvtGJ0YwiLCLQv9C+0LTQs9C+0YLQvtCy0LvRjiDQuiDQtdCz0Y0iLCLQv9C+0LTQs9C+0YLQvtCy0LvRjiDQuiDQvtCz0Y0iLCLQvdCw0LHQuNGA0LDQtdGCINGD0YfQtdC90LjQutC+0LIiLCLQvdCw0LHQuNGA0LDRjiDRg9GH0LXQvdC40LrQvtCyIiwi0L/RgNC10LTQu9Cw0LPQsNC10YIg0L/QvtC80L7RidGMINGA0LXQv9C10YLQuNGC0L7RgNCwIiwi0L/RgNC+0LTQvtC70LbQsNC10YLRgdGPINC90LDQsdC+0YAiLCLQuNC00LXRgiDQvdCw0LHQvtGAIiwi0YDQtdC/0LXRgtC40YLQvtGA0YHQutC40Lkg0YbQtdC90YLRgCIsItC00LXRgtGB0LrQuNC5INGG0LXQvdGC0YAiLCLQvtGC0LrRgNGL0YIg0L3QsNCx0L7RgCIsItC/0L7QvNC+0LbQtdGCINCy0LDRiNC40Lwg0LTQtdGC0Y/QvCIsItGG0LXQvdGC0YAg0YDQsNC30LLQuNGC0LjRjyIsItC40YnQuNGC0LUg0YXQvtGA0L7RiNC10LPQviDRgNC10L/QtdGC0LjRgtC+0YDQsCJdLCJjcmVhdGVkQXQiOiIyMDIzLTEyLTA4VDA5OjQ4OjAzLjMyMFoiLCJ1cGRhdGVBdCI6IjIwMjMtMTItMDhUMDk6NDg6MDMuMzIwWiJ9XQ==","status":200,"url":"http://localhost:7777/categories/getAll"},"revalidate":86400},"lastModified":1702234816332}', '' ] } }

[better-salmon]

Hey @BredyOST! I understood the problem. You did this in your component, but you don't need to do this:

const cacheResult = await IncrementalCache.set('prices', prices)

When building your Next.js app, the IncrementalCache class becomes part of the Next.js server. The IncrementalCache class must only be used in the Cache-handler.js file and not in any components.

Let me explain how caching works.

const pricesRes = await fetch('http://localhost:7777/prices/getAll', { next: { revalidate: 86400 }})

Upon the initial return of this fetch call, the result will be automatically cached in your Redis server using the strategy from the Cache-handler.js file. The next time, instead of making a new fetch call, the Next.js server will retrieve the cached response data from Redis by calling the cache.set method which you define inside the IncrementalCache.onCreation.

It's worth considering that the cache setup example you're using is designed for this Redis package. Ensure that the client.hSet, client.set, and client.get are compatible with ioredis.

[BredyOST]

Okay, thanks.

[better-salmon]

Please mark my comment as an answer if it helped you to resolve the issue with your app. It will help others facing the same problem.

If your problem persists, let's continue breaking it down.

[BredyOST]

Can you help me again?

My cache-handler:

`const REVALIDATED_TAGS_KEY = 'sharedRevalidatedTags';

const pathToRedisCert = 'D:/WEB/search-client/.redis/root.crt';

const password = encodeURIComponent('*****************');

const config = {
url: rediss://:${password}@master.5a8ea7e5-5c92-4bc2-822f-94bf61acf9c9.c.dbaas.selcloud.ru:6380,
socket: {
tls: true,
rejectUnauthorized: true,
cert: [fs.readFileSync(pathToRedisCert).toString()],

}

};

const client = createClient(config);

client.on('connect', () => {
console.log('connection Redis'); // I see this in console
});
client.on('error', (err) => {
console.error('connection error Redis:', err);
});

IncrementalCache.onCreation(async () => {

const useTtl = false;
await client.connect();

const keys = await client.keys('*', (err, keys) => {
if (err) throw err;
keys.forEach((key) => {
console.log(key);
});
});
console.log(keys); I see here keys

return {
    useFileSystem: !useTtl,
    cache: {
        async get(key) {
            try {
                const result = (await client.get(key)) ?? null;

                if (!result) {
                    return null;
                }

                // use reviveFromBase64Representation to restore binary data from Base64
                return JSON.parse(result, reviveFromBase64Representation);
            } catch (error) {
                console.error('cache.get', error);

                return null;
            }
        },
        async set(key, value, ttl) {
            try {
                await client.set(
                    key,
                    // use replaceJsonWithBase64 to store binary data in Base64 and save space
                    JSON.stringify(value, replaceJsonWithBase64),
                    useTtl && typeof ttl === 'number' ? { EX: ttl } : undefined,
                );
            } catch (error) {
                console.error('cache.set', error);
            }
        },
        async getRevalidatedTags() {
            try {
                const sharedRevalidatedTags = await client.hGetAll(REVALIDATED_TAGS_KEY);

                const entries = Object.entries(sharedRevalidatedTags);

                const revalidatedTags = Object.fromEntries(
                    entries.map(([tag, revalidatedAt]) => [tag, Number(revalidatedAt)]),
                );

                return revalidatedTags;
            } catch (error) {
                console.error('cache.getRevalidatedTags', error);
            }
        },
        async revalidateTag(tag, revalidatedAt) {
            try {
                await client.hSet(REVALIDATED_TAGS_KEY, {
                    [tag]: revalidatedAt,
                });
            } catch (error) {
                console.error('cache.revalidateTag', error);
            }
        },
    },
};

});

module.exports = IncrementalCache;
`

In component, I want to save posts with Fetch:
`
async function getData() {

let tutors;

try {
    const tutors  = await fetch('http://localhost:7777/posts/getAll',{next:{revalidate:420}})
    tutors= await categoriesRes.json();

} catch (err) {
    console.error('Error fetching categories:', err);
    categories = [];
}

...
}
`
And I get error Failed to set fetch cache http://localhost:7777/posts/getAll Error: fetch for over 2MB of data can not be cached
at IncrementalCache.set (D:\WEB\search-client\node_modules\next\dist\server\lib\incremental-cache\index.js:371:23)
at D:\WEB\search-client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:1:662208
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[BredyOST]

I understood. My file was saved in file system cash and redis cash.

[better-salmon]

This error is not from the IncrementalCache class. It’s from the Next.js server and only occurs in dev mode. In production mode, a fetch cache bigger than 2MB will not be stored, and no error will be shown.

Please check out this docs.