React Cache Function

Hey, according to Next.js docs, you can cache db queries and similar with the cache function from React, however I do get an error when deploying to Vercel.
https://nextjs.org/docs/app/building-your-application/data-fetching/caching#per-request-caching

What can be the issue?

I can confirm I am using the latest version of next, react and react-dom.

The cache function is indeed imported and used from react like described in the docs;

import { db } from '@/drizzle';
import { rolle } from '@/drizzle/schema';
import { eq, placeholder } from 'drizzle-orm';
import { cache } from 'react';

const rolleQuery = db
    .select()
    .from(rolle)
    .where(eq(rolle.individualId, placeholder('individualId')))
    .prepare();

export const getRoles = cache(async (individualId: string) => {
    const roles = await rolleQuery.execute({ individualId });
    if (roles.length === 0) {
        return null;
    }
    return roles;
});

import { db } from '@/drizzle';
import { rolle } from '@/drizzle/schema';
import { eq, placeholder } from 'drizzle-orm';
import { cache } from 'react';

const rolleQuery = db
    .select()
    .from(rolle)
    .where(eq(rolle.individualId, placeholder('individualId')))
    .prepare();

export const getRoles = cache(async (individualId: string) => {
    const roles = await rolleQuery.execute({ individualId });
    if (roles.length === 0) {
        return null;
    }
    return roles;
});

import { db } from '@/drizzle';
import { rolle } from '@/drizzle/schema';
import { eq, placeholder } from 'drizzle-orm';
import { cache } from 'react';

const rolleQuery = db
    .select()
    .from(rolle)
    .where(eq(rolle.individualId, placeholder('individualId')))
    .prepare();

export const getRoles = cache(async (individualId: string) => {
    const roles = await rolleQuery.execute({ individualId });
    if (roles.length === 0) {
        return null;
    }
    return roles;
});

import { db } from '@/drizzle';
import { rolle } from '@/drizzle/schema';
import { eq, placeholder } from 'drizzle-orm';
import { cache } from 'react';

const rolleQuery = db
    .select()
    .from(rolle)
    .where(eq(rolle.individualId, placeholder('individualId')))
    .prepare();

export const getRoles = cache(async (individualId: string) => {
    const roles = await rolleQuery.execute({ individualId });
    if (roles.length === 0) {
        return null;
    }
    return roles;
});

myrsethOP•7/15/23, 7:08 PM

Sorry: I was using next 13.4.9, upgrading to 13.4.10 solved the issue

React Cache Function

Similar Threads

Similar Threads

Similar Threads