How to know that I'm using GraphQL cache properly?

Question

I just applied the GraphQL cache in my PWA Studio custom queries.

I'm not sure if the cache is working, should the x-cache-hits be enough to validate?

How does it work behind the scenes?

Answer 1

Yes, the x-cache-hits is a very accurate method to check it, with the pragma, x-cache, and x-magento-cache-id.

As you can see below, if you have the cache HIT and not 0 or MISS, you're good.

Another way to validate it is by checking the answer time. Usually, the queries cached are ~10 times faster than the non-cached requests. This query below has 19.30ms spent waiting for server response, my requests without full page cache, spend ~200ms.

How does it work?

Varnish will take care of the cache if don't use Fastly or another CDN. The VCL file you adjusted will allow it, and Magento will add the ideal headers to make it possible via the code below.

https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/GraphQlCache/Controller/Plugin/GraphQl.php

Using the development mode you will be able to see the x-magento-tags, which will be managed by your full page cache system.