Issue with react cache
Answered
Gouty oak gall posted this in #help-forum
Gouty oak gallOP
I am trying to use the react cache to avoid calling the database twice in a single request for the same data.
In my file I have
Later I have
When the page loads I see two log outputs for getCocktailInfoForIngredients - I was expecting to only see that once.
In my file I have
const getCocktailInfoForIngredients = cache(async (ingredients: string[]):Promise<{ingLabel:string,canUrl:string,cocktails:CocktailSer[]}> => {
console.log("called getCocktailInfoForIngredients");Later I have
export default async function Page({ params }: { params: { ingredients: string[] } }) {
const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
...
}
export async function generateMetadata(
{ params }: { params: { ingredients: string[] } },
parent: ResolvingMetadata
): Promise<Metadata> {
const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
...When the page loads I see two log outputs for getCocktailInfoForIngredients - I was expecting to only see that once.
Answered by Gouty oak gall
Figured it out.
The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.
The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.
11 Replies
Gouty oak gallOP
I've tried this 10 different ways, the NextJS cache(unstable) seems to be working but this is confusing me
@Gouty oak gall I've tried this 10 different ways, the NextJS cache(unstable) seems to be working but this is confusing me
react
cache and unstable_cache are totally different. the result of cache from react only life in current request while the result of unstable_cache life until you revalidate it@Gouty oak gall I am trying to use the react cache to avoid calling the database twice in a single request for the same data.
In my file I have
const getCocktailInfoForIngredients = cache(async (ingredients: string[]):Promise<{ingLabel:string,canUrl:string,cocktails:CocktailSer[]}> => {
console.log("called getCocktailInfoForIngredients");
Later I have
export default async function Page({ params }: { params: { ingredients: string[] } }) {
const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
...
}
export async function generateMetadata(
{ params }: { params: { ingredients: string[] } },
parent: ResolvingMetadata
): Promise<Metadata> {
const {ingLabel,canUrl,cocktails} = await getCocktailInfoForIngredients(params.ingredients);
...
When the page loads I see two log outputs for getCocktailInfoForIngredients - I was expecting to only see that once.
from the code here, I don't see any issue. You may want to check this
https://react.dev/reference/react/cache#memoized-function-still-runs
https://react.dev/reference/react/cache#memoized-function-still-runs
@Ray from the code here, I don't see any issue. You may want to check this
https://react.dev/reference/react/cache#memoized-function-still-runs
Gouty oak gallOP
Yea, I get the difference, but in this case react cache should be working.
Gouty oak gallOP
Figured it out.
The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.
The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.
Answer
If your arguments are not primitives (ex. objects, functions, arrays), ensure you’re passing the same object reference.
@Gouty oak gall Figured it out.
The cache function cant accept an array, if I pass individual strings it works. In my use case this works since its a fixed list, but this seems like a pretty crazy limitation.
const getData = cache(async (...args: string[]) => {});
getData(...[]);does this work?
yeah this works too
@Ray ts
const getData = cache(async (...args: string[]) => {});
getData(...[]);
does this work?
Gouty oak gallOP
Basically everything but what I originally tried works :). Thanks for the help.