Add: caching example

index.html

@@ -190,18 +190,141 @@ <h2>GraphQL Subscriptions</h2>
 			</section>
 			<section>Beyond the Basics</section>
 			<section>
-				<h1>Beyond the Basics</h1>
-				<ul>
-					<li>Authorization</li>
-					<li>Caching</li>
-					<li>Database Storage integration with GraphQL (Prisma)</li>
-					<li>Error Handling - GraphQL returns 200 (OK Status Code) even if errors occured</li>
-					<li>Global Object Identification</li>
-					<li>Pagination</li>
-					<li>Performance</li>
-					<li>Sorting</li>
-				</ul>
+				<h1>Learning Curve</h1>
+				<p>GraphQL takes <strong>more time</strong> to learn.</p>
+			</section>
+			<section>
+				<h1>Caching</h1>
+				<p>Allegedly, GraphQL's caching <strong>is more complex</strong>.</p>
+			</section>
+			<section>
+				<h2>REST Caching (Express.js)</h2>
+				<pre><code>
+const express = require('express');
+const app = express();
+const port = 3000;
+
+app.get('/api/resource', (req, res) => {
+		const resource = {
+				id: 1,
+				name: "Resource",
+				value: "Some data",
+				lastModified: new Date().toISOString()
+		};
+
+		// Set Cache-Control header
+		res.setHeader('Cache-Control', 'public, max-age=3600');
+		// Set ETag header
+		const eTag = 'some-etag-value';
+		res.setHeader('ETag', eTag);
+
+		// Check if the client's ETag matches the server's ETag
+		if (req.headers['if-none-match'] === eTag) {
+				return res.status(304).send(); // Not Modified
+		}
+
+		res.json(resource);
+});
+
+app.listen(port, () => {
+		console.log(`Server is running on http://localhost:${port}`);
+});
+				</code></pre>
+			</section>
+			<section>
+				<h2>GraphQL Caching (Apollo Server)</h2>
+				<pre><code>
+const { ApolloServer, gql } = require('apollo-server');
+const { ApolloServerPluginCacheControl } = require('apollo-server-core');
+
+// Schema definition
+const typeDefs = gql`
+	type Query {
+		resource(id: ID!): Resource
+	}
+
+	type Resource {
+		id: ID!
+		name: String
+		value: String
+	}
+`;
+
+// Resolvers
+const resolvers = {
+	Query: {
+		resource: (parent, { id }, context, info) => {
+			// Set cache control hints
+			info.cacheControl.setCacheHint({ maxAge: 3600 });
+			return { id, name: "Resource", value: "Some data" };
+		}
+	}
+};
+
+// Apollo Server setup
+const server = new ApolloServer({
+	typeDefs,
+	resolvers,
+	plugins: [ApolloServerPluginCacheControl({ defaultMaxAge: 5 })],
+	cacheControl: {
+		defaultMaxAge: 3600,
+	}
+});
+
+server.listen().then(({ url }) => {
+	console.log(`Server ready at ${url}`);
+});
+
+				</code></pre>
+			</section>
+			<section>
+				<h2>GraphQL Caching (Apollo Client)</h2>
+				<pre><code>
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
+
+// Initialize Apollo Client
+const client = new ApolloClient({
+	uri: 'https://example.com/graphql',
+	cache: new InMemoryCache()
+});
+
+// Query
+const GET_RESOURCE = gql`
+	query GetResource($id: ID!) {
+		resource(id: $id) {
+			id
+			name
+			value
+		}
+	}
+`;
+
+// Fetch data
+client.query({
+	query: GET_RESOURCE,
+	variables: { id: 1 }
+}).then(result => {
+	console.log(result.data);
+	// Data is now cached in the client
+});
+
+// Subsequent queries will use the cached data
+client.query({
+	query: GET_RESOURCE,
+	variables: { id: 1 }
+}).then(result => {
+	console.log('From Cache:', result.data);
+});
+				</code></pre>
 			</section>
+			<!-- <ul>
+				<li>Database Storage integration with GraphQL (Prisma)</li>
+				<li>Error Handling - GraphQL returns 200 (OK Status Code) even if errors occured</li>
+				<li>Global Object Identification</li>
+				<li>Pagination</li>
+				<li>Performance</li>
+				<li>Sorting</li>
+			</ul> -->
 		</div>
 	</div>