Docs: Comparison table for different use cases of @cacheControl (#6395)

Author: ardatan

packages/web/docs/src/pages/docs/gateway/other-features/performance/http-caching.mdx

@@ -11,6 +11,11 @@ can enable HTTP caching in your Hive Gateway by using the HTTP caching plugin. T
 cache the responses when possible, and reduce the server load. It uses
 [`http-cache-semantics`](https://www.npmjs.com/package/http-cache-semantics) under the hood.
 
+It is useful when you use it with
+[Yoga's Response Caching](https://the-guild.dev/graphql/yoga-server/docs/features/response-caching#http-caching-via-etag-and-if-none-match-headers)
+or
+[Apollo Server's Response Caching](https://www.apollographql.com/docs/apollo-server/performance/caching/).
+
 <Callout>
   You need to set your cache storage in your gateway configuration to enable response caching. See
   [Cache Storage](/docs/gateway/other-features/performance#providing-cache-storage) for more

packages/web/docs/src/pages/docs/gateway/other-features/performance/response-caching.mdx

@@ -261,6 +261,18 @@ flowchart TD
 	A ---|"Send GraphQL Request via HTTP "| n6
 ```
 
+#### Overall comparison
+
+| Usage of `@cacheControl`                                                                                                                                                                                                                                                                             | No HTTP Calls for cached results                                                                                                                                                                                                                      | Invalidation via mutations                                                                                                                 |     |     |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --- | --- |
+| Subgraph on [Apollo Server with Response Cache Plugin](https://www.apollographql.com/docs/apollo-server/performance/caching/)<br/><br/>Uses HTTP `Cache-Control` header & [Gateway HTTP Cache Plugin](/docs/gateway/other-features/performance/http-caching)                                         | 🟢 - Fully done<br/>Until TTL expires given in `Cache-Control` HTTP header, no HTTP calls are made in the following GraphQL requests.<br/>So the number of HTTP requests reduce.                                                                      | 🔴 - Not available<br/>Until TTL expires or cache is reset manually on the gateway,<br/>it is not possible to invalidate it automatically. |     |     |
+| Subgraph on [Yoga Server with Response Cache Plugin](https://the-guild.dev/graphql/yoga-server/docs/features/response-caching#http-caching-via-etag-and-if-none-match-headers)<br/><br/>Uses HTTP `ETag` header & [Gateway HTTP Cache Plugin](/docs/gateway/other-features/performance/http-caching) | 🟠 - Partially done<br/>Until TTL expires, it validates via an HTTP request with held `ETag` value on each GraphQL request, <br/>and returns 304 without body.<br/>So the number of HTTP requests do not reduce, but the load in the traffic reduces. | 🟢 - Fully done<br/><br/>In case of fetched new value, ETag value changes so that the gateway can invalidate the cached response           |     |     |
+| `@cacheControl` with `@composeDirective`<br/><br/>Uses Gateway Response Caching Plugin                                                                                                                                                                                                               | 🟢 - Fully done<br/>Until TTL expires given in `@cacheControl` directive, no HTTP calls are made in the following GraphQL requests.<br/>So the number of HTTP requests reduce.                                                                        | 🟢 - Fully done<br/>In case of the fetched new value, the cache is directly invalidated by the gateway                                     |     |     |
+
+In order to avoid extra HTTP calls, and invalidate the responses automatically via mutations, it'd
+recommended to use the `@cacheControl` directive with the `@composeDirective` in the subgraphs
+together with this plugin.
+
 ## Session based caching
 
 If your GraphQL API returns specific data depending on the viewer's session, you can use the session