Why is the query not saved in the cache?

[leaden iron]

Why is the query not saved in the cache?

export const revalidate = 120;

export const getTodoList = cache(async () => {
    console.log("TodoListFetchCalled")
    const req = {
        headers: {
            cookie: headers().get('cookie'),
        },
    };
    const SSR = withSSRContext({req})
    const {data} = await SSR.API.graphql({query: listTodos});
    return data;
})

export default async function Homepage() {
    const data = await getTodoList();

    return (
        <div className={"flex px-6 py-6 w-full"}>
            <TodoList data={data.listTodos.items}/>
        </div>
    )
}

[lone trellis]

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

---

Based on the provided code and the information from the extracts, there could be several reasons why the query is not being saved in the cache:

1. Usage of Headers or Cookies: According to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating), fetch requests are not cached if they come after the usage of headers or cookies. In your code, you're setting the cookie header before making the graphql request. This could be preventing the caching of the request.

2. Caching is not configured for third-party libraries: If you're using a third-party library that doesn't support or expose fetch (like a database, CMS, or ORM client), you need to configure the caching and revalidating behavior of those requests using the Route Segment Config Option and React's cache function. In your case, you're using SSR.API.graphql, which might not be automatically cached by Next.js. Next.js is working on an API, unstable_cache, for configuring the caching and revalidating behavior of individual third-party requests.

3. The Data Cache is not being used: Next.js has a built-in Data Cache that persists the result of data fetches across incoming server requests and deployments. However, this requires extending the native fetch API to allow each request on the server to set its own persistent caching semantics. If you're not using fetch or a compatible method, the Data Cache might not be used.

Please review your code and the Next.js documentation to ensure you're correctly implementing caching.

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