8장: 캐싱 전략

GET /api/posts/123
Cache-Control: public, max-age=3600

POST /graphql
Content-Type: application/json
 
{"query": "{ post(id: \"123\") { title content } }"}

// 빌드 타임에 쿼리 목록 생성
const persistedQueries: Record<string, string> = {
  'abc123': `query GetPost($id: ID!) {
    post(id: $id) { title content author { name } }
  }`,
  'def456': `query ListPosts($first: Int!) {
    posts(first: $first) { edges { node { title summary } } }
  }`,
};

# 기존 요청 (POST, 캐시 불가)
POST /graphql
{"query": "query GetPost($id: ID!) { post(id: $id) { ... } }", "variables": {"id": "123"}}
 
# Persisted Query 요청 (GET, 캐시 가능!)
GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc123"}}&variables={"id":"123"}

import { ApolloServer } from '@apollo/server';
import { ApolloServerPluginCacheControl } from '@apollo/server/plugin/cacheControl';
 
const server = new ApolloServer({
  typeDefs,
  resolvers,
  // APQ는 Apollo Server에서 기본 활성화
  // 프로덕션에서는 Redis를 APQ 저장소로 사용
  cache: new KeyvAdapter(new Keyv('redis://localhost:6379')),
});

type Query {
  post(id: ID!): Post
  me: User @cacheControl(maxAge: 0, scope: PRIVATE)
}
 
type Post @cacheControl(maxAge: 3600) {
  id: ID!
  title: String!
  content: String!
  viewCount: Int! @cacheControl(maxAge: 300)
  author: User!
  comments: [Comment!]! @cacheControl(maxAge: 60)
}
 
type User @cacheControl(maxAge: 1800) {
  id: ID!
  name: String!
  email: String! @cacheControl(scope: PRIVATE)
}

query {
  post(id: "1") {          # maxAge: 3600
    title                   # 상속: 3600
    viewCount               # maxAge: 300
    comments {              # maxAge: 60
      body
    }
  }
}
# 결과 헤더: Cache-Control: public, max-age=60

import { ApolloServer } from '@apollo/server';
import { ApolloServerPluginCacheControl } from '@apollo/server/plugin/cacheControl';
import responseCachePlugin from '@apollo/server-plugin-response-cache';
 
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    ApolloServerPluginCacheControl({
      defaultMaxAge: 0, // 기본값: 캐시 안 함
    }),
    responseCachePlugin({
      // 사용자별 캐시 분리
      sessionId: async (requestContext) => {
        return requestContext.contextValue.currentUser?.id ?? null;
      },
    }),
  ],
});

import Redis from 'ioredis';
 
const redis = new Redis(process.env.REDIS_URL!);
 
interface CacheOptions {
  ttl: number;    // 초 단위
  prefix: string;
}
 
async function cachedResolver<T>(
  key: string,
  options: CacheOptions,
  resolver: () => Promise<T>,
): Promise<T> {
  const cacheKey = `${options.prefix}:${key}`;
 
  // 1. 캐시 확인
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached) as T;
  }
 
  // 2. 캐시 미스 시 리졸버 실행
  const result = await resolver();
 
  // 3. 결과 캐싱
  await redis.setex(cacheKey, options.ttl, JSON.stringify(result));
 
  return result;
}
 
// 리졸버에서 활용
const resolvers = {
  Query: {
    post: async (_parent: unknown, args: { id: string }, context: Context) => {
      return cachedResolver(
        args.id,
        { ttl: 3600, prefix: 'post' },
        () => context.dataSources.posts.findById(args.id),
      );
    },
    popularPosts: async (_parent: unknown, _args: unknown, context: Context) => {
      return cachedResolver(
        'all',
        { ttl: 300, prefix: 'popular-posts' },
        () => context.dataSources.posts.findPopular(),
      );
    },
  },
};

class CachedPostDataSource extends PostDataSource {
  constructor(prisma: PrismaClient, private redis: Redis) {
    super(prisma);
  }
 
  async findById(id: string): Promise<Post | null> {
    const cacheKey = `post:${id}`;
    const cached = await this.redis.get(cacheKey);
 
    if (cached) {
      return JSON.parse(cached) as Post;
    }
 
    const post = await super.findById(id);
 
    if (post) {
      await this.redis.setex(cacheKey, 3600, JSON.stringify(post));
    }
 
    return post;
  }
 
  async update(id: string, input: UpdatePostInput): Promise<Post> {
    const post = await super.update(id, input);
    // 업데이트 시 캐시 무효화
    await this.redis.del(`post:${id}`);
    return post;
  }
}

// 인기글 목록: 5분마다 갱신
await redis.setex('popular-posts', 300, JSON.stringify(posts));
 
// 사용자 프로필: 30분마다 갱신
await redis.setex(`user:${id}`, 1800, JSON.stringify(user));

class PostService {
  async updatePost(id: string, input: UpdatePostInput): Promise<Post> {
    const post = await this.prisma.post.update({
      where: { id },
      data: input,
    });
 
    // 관련 캐시 무효화
    await Promise.all([
      this.redis.del(`post:${id}`),
      this.redis.del('popular-posts'),
      this.redis.del(`user-posts:${post.authorId}`),
      // 태그가 변경되었으면 태그 캐시도 무효화
      ...(input.tags
        ? input.tags.map((tag) => this.redis.del(`tag-posts:${tag}`))
        : []),
    ]);
 
    return post;
  }
}

class TaggedCache {
  constructor(private redis: Redis) {}
 
  async set(key: string, value: unknown, ttl: number, tags: string[]): Promise<void> {
    const pipeline = this.redis.pipeline();
    
    // 값 저장
    pipeline.setex(key, ttl, JSON.stringify(value));
    
    // 태그-키 매핑 저장
    for (const tag of tags) {
      pipeline.sadd(`tag:${tag}`, key);
      pipeline.expire(`tag:${tag}`, ttl);
    }
    
    await pipeline.exec();
  }
 
  async invalidateByTag(tag: string): Promise<void> {
    const keys = await this.redis.smembers(`tag:${tag}`);
    if (keys.length > 0) {
      await this.redis.del(...keys, `tag:${tag}`);
    }
  }
}
 
// 사용 예시
const cache = new TaggedCache(redis);
 
// 포스트 캐싱 시 태그 지정
await cache.set(
  `post:${post.id}`,
  post,
  3600,
  ['posts', `author:${post.authorId}`, `category:${post.categoryId}`],
);
 
// 작성자의 모든 관련 캐시 무효화
await cache.invalidateByTag(`author:${authorId}`);

// Cloudflare Workers 예시
export default {
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);
    
    // GET + Persisted Query인 경우에만 엣지 캐싱
    if (request.method === 'GET' && url.searchParams.has('extensions')) {
      const cache = caches.default;
      const cacheKey = new Request(url.toString(), { method: 'GET' });
      
      const cachedResponse = await cache.match(cacheKey);
      if (cachedResponse) {
        return cachedResponse;
      }
 
      const response = await fetch(request);
      const clonedResponse = new Response(response.body, response);
      
      // Cache-Control 헤더가 있으면 엣지에 캐싱
      if (response.headers.get('cache-control')?.includes('max-age')) {
        await cache.put(cacheKey, clonedResponse.clone());
      }
      
      return clonedResponse;
    }
 
    // POST 요청은 오리진으로 직접 전달
    return fetch(request);
  },
};