Caching for graphql-request?

[chaepling]

What is the improvement or update you wish to see?

Hi I'm using graphql-request with my next 13 app directory project. As far as I know, the default caching behavior caches my requests but since I am not using fecth() it doesn't work.

I searched for references for the same stack as mine but couldn't find one.

Since in app directory, layout.js and page.js can't share props, I fetch for the same data in both of them and cache doesn't work so it fetches the data from the server. And this is a huge waste for resources and I would like to know if there's anyway to use next 13's caching behavior on my graphql requests.

Is there any context that might help us understand?

stack:

"dependencies": {
    "@apollo/client": "^3.7.3",
    "next": "^13.4.1",
    "graphql": "^16.6.0",
    "graphql-request": "^5.1.0",
  }, 

• request example

import request,{ gql } from "graphql-request";
import request from "graphql-request";

export const SHOW_DETAIL = gql`
  query ShowDetail($id: ID!) {
    show(id: $id) {
      seriesTotal
      synopType
      creatorId
    }
  }
`;

const data =
    await request(
      process.env.NEXT_PUBLIC_API_SERVER_URL! + "/graphql",
      SHOW_DETAIL,
    );

I use same request in Page and Layout and GenerateMetadata.

If I need to provide more information please let me know.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/data-fetching/caching#per-request-caching

[lindesvard]

Try use cache from react. You can read about it here https://nextjs.org/docs/app/building-your-application/data-fetching/caching#per-request-caching

import { cache } from 'react'
import request,{ gql } from "graphql-request";
import request from "graphql-request";

export const SHOW_DETAIL = gql`
  query ShowDetail($id: ID!) {
    show(id: $id) {
      seriesTotal
      synopType
      creatorId
    }
  }
`;


const getShowDetails = cache(() => 
  request(
    process.env.NEXT_PUBLIC_API_SERVER_URL! + "/graphql",
    SHOW_DETAIL,
  )
)

[DuCanhGH]

One alternative if you are reusing an endpoint is changing graphql-request's fetch so that it can make use of Next's patched fetch.

This is how you can do it:

export const graphQLClient = new GraphQLClient(endpoint, { fetch });

[chaepling]

Try use cache from react. You can read about it here https://nextjs.org/docs/app/building-your-application/data-fetching/caching#per-request-caching

import { cache } from 'react'
import request,{ gql } from "graphql-request";
import request from "graphql-request";

export const SHOW_DETAIL = gql`
  query ShowDetail($id: ID!) {
    show(id: $id) {
      seriesTotal
      synopType
      creatorId
    }
  }
`;


const getShowDetails = cache(() => 
  request(
    process.env.NEXT_PUBLIC_API_SERVER_URL! + "/graphql",
    SHOW_DETAIL,
  )
)

@lindesvard
I tried it but it keeps requesting for fresh data. I don't think it works

[t-zander]

when using cache function is there a way to revalidate it?

[mkue]

I seem to run into the same problem. I'm using firebase-admin to retrieve documents, but it doesn't seem to cache the results.

import { firestore } from '@/firebase/admin';
import { cache } from 'react';

const getSomeFirestoreData = cache(async () => {
	console.log('Retrieving some firestore data');
	return (await firestore.doc('some-collection/some-document').get()).data();
});

const getSomeData = async () => {
	return (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json();
};

export default async function Page() {
	const someData = await getSomeData();
	const someFirestoreData = await getSomeFirestoreData();

	return (
		<div>
			<h1>Test</h1>
			<div>{JSON.stringify(someData)}</div>
			<div>{JSON.stringify(someFirestoreData)}</div>
		</div>
	);
}

On page load/refresh, I get the following log output:

Retrieving some firestore data

-  ┌ GET /de/us/transparency/test 200 in 78ms
   │
   └──── GET https://jsonplaceholder.typicode.com/todos/1 200 in 0ms (cache: HIT)

It appears that fetch request is cached (cache: HIT), but the Firestore is query is executed with every request. Am I doing something wrong or is this a bug?

[dinpau]

I was wondering the same in a project of ours, didn't compare production and dev yet, but
the expanded cache docs in this PR might give an answer:

https://github.com/vercel/next.js/pull/52514/files#diff-585ebb31b73ea7c9032d904b01f36584c550978770f01fdc5679540140f2c872

Not sure if I get this correctly, but I read it as that cache() will only deduplicate several of the same e.g. axios calls within one request, but will not persist data over several distinct requests.

If that's the case, I wonder then how persistent caching with third party api call can be achieved over several requests? ( Assuming I also don't want to encapsulate the api call in its own page/route/layout and use https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config )

[JulianJorgensen]

I've been struggling with similar issues. Even though I wrap reacts cache() around my (Firebase) database call it doesn't cache at all. I've also tried to use the force-static and force-cache route segment option with no success.

Not sure if I should attempt using unstable_cache and what the difference between that and cache() is. The documentation seems unclear on that.

Otherwise I'm totally LOVING v13!! Fantastic job!!

[Jordaneisenburger]

I've been struggling with similar issues. Even though I wrap reacts cache() around my (Firebase) database call it doesn't cache at all. I've also tried to use the force-static and force-cache route segment option with no success.

Not sure if I should attempt using unstable_cache and what the difference between that and cache() is. The documentation seems unclear on that.

Otherwise I'm totally LOVING v13!! Fantastic job!!

React's cache functionality is only for the current render pass I believe ?

[lucaspbordignon]

I've been struggling with similar issues. Even though I wrap reacts cache() around my (Firebase) database call it doesn't cache at all. I've also tried to use the force-static and force-cache route segment option with no success.

I might be totally off here, but as far as the most recent React and Next docs define, React's cache() method and Vercel Data Cache serve different purposes

The first one is purely a React implementation to support request memoization, meaning that when a request is dispatched to our app and we execute the same requests in our app (same URL and options), it automatically de-duplicates them and executes it once (see more)

However, it doesn't manipulate Vercel Data Cache, which is the one that will cache our app's data for further requests. For that, we need to use the next option for the Fetch API (or the segment configs)

Also, looks like the unstable_cache() will be an implementation of cache() that interacts directly with Vercel's cache, but, as the name suggests, is still unstable

But again, might have got something wrong, so opening here for Next folks to correct me if anything!

[lucaspbordignon]

Circling back here, one possible workaround to make it work with graphql-request is to define a custom fetch function to use the newly implemented keys

Would be something along the lines of

import { GraphQLClient } from "graphql-request";
import { cache } from "react";

const client = new GraphQLClient("https://your.api.com", {
  fetch: cache(async (url, params) =>
    fetch(url, { ...params, next: { revalidate: 600 } })
  ),
});

Note that we're adding the cache() wrapper to make sure requests are memoized as described on Next docs

---

Hope it helps! Looking forward for even simpler solutions 🙂

[mdtausifiqbal]

I've been struggling with similar issues. Even though I wrap reacts cache() around my (Firebase) database call it doesn't cache at all. I've also tried to use the force-static and force-cache route segment option with no success.

Not sure if I should attempt using unstable_cache and what the difference between that and cache() is. The documentation seems unclear on that.

Otherwise I'm totally LOVING v13!! Fantastic job!!

The optimization of caching return values based on inputs is known as memoization. We refer to the function returned from cache as a memoized function.

https://react.dev/reference/react/cache#cache

[leerob]

Good discussion here, I think this is covered in https://nextjs.org/docs/app/building-your-application/caching 🙏