cache function

[hushed slate]

import { Layout } from "@/components/biolink/layout";
import { constructMetadata } from "@/lib/utils/construct-metadata";
import { getBiolinkByUsername } from "@/lib/utils/get-biolink";
import { ViewTracker } from "@/components/view-tracker";

export async function generateMetadata({
params,
}: {
params: {
username: string;
};
}) {
try {
const biolink = await getBiolinkByUsername(params.username);

if (!biolink) return null;

return await constructMetadata({
  title: biolink.user.title
    ? `${biolink.user.title} (@${biolink.user.username})`
    : `${biolink.user.username}`,
  image: biolink.user.image ?? "",
  description: biolink.user.bio || "Connect with me on social media.",
});

} catch (e) {
return null;
}
}

export default async function Page({
params,
}: {
params: {
username: string;
};
}) {
const biolink = await getBiolinkByUsername(params.username);

if (!biolink) return "not found";

return (
<>
<ViewTracker userId={biolink.user.id} />
<Layout biolink={biolink} />
</>
);
}

can i cache these getbiolinkbyusername since its same call twice?

[mossy inlet]

Hi @hushed slate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, you can use the cache function from React to memoize the getBiolinkByUsername function. This will ensure that if the function is called multiple times with the same arguments within a single request, it will only execute once and return the cached result for subsequent calls.

Here's an example of how you can use the cache function:

import { cache } from 'react'

export const getBiolinkByUsername = cache(async (username: string) => {
  const biolink = await db.biolink.findUnique({ username })
  return biolink
})

In this example, the getBiolinkByUsername function is memoized using the cache function from React. This means that if the function is called twice with the same username, only one query will be made to the database.

Please note that this memoization only lasts for the duration of a single request. If you need to cache data across multiple requests, you might want to consider using a different caching strategy.

Also, be aware that if an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data (source (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#error-handling-and-revalidation)).

Please note that the cache function is part of React's experimental features and its API might change in future versions of React.

Sources:

• Next.js Documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example)
• Next.js Error Handling and Revalidation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#error-handling-and-revalidation)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed slate kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed slate]

@mossy inlet how i do with functio nsyntax and not arrow

[mossy inlet]

Let me check the knowledge base for you. One moment! :books:

---

Sure, you can use a regular function syntax instead of an arrow function. Here's how you can do it:

import { cache } from 'react'

export async function getBiolinkByUsername(username: string) {
  const biolink = await db.biolink.findUnique({ username })
  return biolink
}

export const memoizedGetBiolinkByUsername = cache(getBiolinkByUsername)

In this example, getBiolinkByUsername is a regular function and memoizedGetBiolinkByUsername is the memoized version of the function. You can use memoizedGetBiolinkByUsername in your code to take advantage of caching.

Please note that the cache function is part of React's experimental features and its API might change in future versions of React.

Sources:

• Next.js Documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example)
• Next.js Error Handling and Revalidation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#error-handling-and-revalidation)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: