Redis を使った PV カウントに切り替える

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

import { Redis } from '@upstash/redis';

export const redis = Redis.fromEnv();

1
import type { TRPCRouterRecord } from '@trpc/server';
2
import { TRPCError } from '@trpc/server';
3
import { z } from 'zod';
4

5
import { env } from '../../env';
6
import { publicProcedure } from '../trpc';
7
import { getIpHash, redis } from '../utils';
8

9
export const pageViewRouter = {
10
  incrementViews: publicProcedure.input(z.object({ slug: z.string() })).mutation(async ({ ctx, input: { slug } }) => {
11
    if (!ctx.ip) {
12
      throw new TRPCError({ code: 'BAD_REQUEST' });
13
    }
14

15
    const ip = ctx.ip;
16
    const ipHash = await getIpHash(ip);
17

18
    const isNew = await redis.set(['deduplicate', ipHash, slug].join(':'), true, {
19
      nx: true,
20
      ex: 24 * 60 * 60,
21
    });
22

23
    if (!isNew) {
24
      return 'Deduplicated';
25
    }
26

27
    await redis.incr(['pageviews', env.NODE_ENV, slug].join(':'));
28

29
    return 'Incremented';
30
  }),
31
} satisfies TRPCRouterRecord;

1
import type { TRPCRouterRecord } from '@trpc/server';
2
import { z } from 'zod';
3

4
import { env } from '../../env';
5
import { publicProcedure } from '../trpc';
6
import { redis } from '../utils';
7

8
export const pageViewRouter = {
9
  bySlug: publicProcedure
10
    .input(z.object({ slug: z.string() }))
11
    .query(async ({ input: { slug } }) => (await redis.get<number>(['pageviews', env.NODE_ENV, slug].join(':'))) ?? 0),
12
} satisfies TRPCRouterRecord;

1
'use client';
2

3
import * as React from 'react';
4

5
import { Skeleton } from '@kkhys/ui';
6

7
import { api } from '#/lib/trpc/react';
8

9
export const ViewCounter = ({ slug }: { slug: string }) => {
10
  const utils = api.useUtils();
11

12
  const { mutate } = api.pageView.incrementViews.useMutation({
13
    onSuccess: async (status) => {
14
      if (status === 'Incremented') {
15
        await utils.pageView.bySlug.invalidate({ slug });
16
      }
17
    },
18
  });
19

20
  const { data } = api.pageView.bySlug.useQuery({ slug }, { staleTime: 60 * 1000 });
21

22
  React.useEffect(() => mutate({ slug }), [mutate, slug]);
23

24
  if (!data) return <ViewCounterSkeleton />;
25

26
  return <p className='font-sans text-sm text-muted-foreground'>{data.toLocaleString()} views</p>;
27
};
28

29
export const ViewCounterSkeleton = () => <Skeleton className='h-4 w-14' />;

1
import type { TRPCRouterRecord } from '@trpc/server';
2

3
import { publicProcedure } from '../trpc';
4
import { redis } from '../utils';
5

6
export const pageViewRouter = {
7
  import: publicProcedure.mutation(async ({ ctx }) => {
8
    const posts = await ctx.db.query.posts.findMany();
9
    posts.forEach((post) => void redis.setnx(['pageviews', 'production', post.slug].join(':'), post.views));
10
  }),
11
} satisfies TRPCRouterRecord;