Next.js 및 tRPC를 사용한 전체 스택 유형 안전 애플리케이션 개발

import { createRouter } from "./context";
// `zod` is a schema declaration and validation library. We use it to define the shape of request arguments.
import { z } from "zod";

// `createRouter` exposes functions to create new API endpoints.
export const blogRouter = createRouter()
// A `mutation` defines an operation that modifies our data.
// It behaves like`POST`, `PUT`, `DELETE` operations.
// The input property accepts an optional `zod` schema to validate the request body.
  .mutation("create", {
    input: z.object({
      title: z.string(),
      content: z.string(),
    }),
// The API handler is a simple `resolve` function that contains all the business logic to handle the request.
    resolve({ input, ctx }) {
      return ctx.prisma.blog.create({
        data: {
          title: input.title,
          content: input.content,
        },
      });
    },
  })
// A `query` defines an operation that reads data from our backend.
// It behaves like a GET request.
  .query("all", {
    resolve({ ctx }) {
      return ctx.prisma.blog.findMany();
    },
  });

// src/server/router/index.ts
import { createRouter } from "./context";
import superjson from "superjson";

import { blogRouter } from "./blog";

export const appRouter = createRouter()
  .transformer(superjson)
// Registering the blogRouter
  .merge("blog.", blogRouter);

// export type definition of the API
export type AppRouter = typeof appRouter;

import type { NextPage } from "next";
import { useState } from "react";
import BlogPost from "../components/BlogPost";
import Layout from "../components/Layout";

// import trpc utils that wrap react-query
import { trpc } from "../utils/trpc";

const Home: NextPage = () => {
// Hovering on data shows the types defined in our backend
  const { isLoading, data } = trpc.useQuery(["blog.all"]);

  return (
    <Layout>
      <h1>My personal blog</h1>
      {isLoading ? (
        <div>Loading posts</div>
      ) : (
        data?.map((blog) => <BlogPost blog={blog} key={blog.id} />)
      )}
      <CreatePostSection />
    </Layout>
  );
};

export default Home;

const CreatePostSection = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const ctx = trpc.useContext();
  const createMutation = trpc.useMutation("blog.create");

  return (
    <div>
      {createMutation.isLoading}
      <h2>Create a new blog post</h2>
      <div>
        <input
          name="title"
          placeholder="Your title..."
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </div>
      <div>
        <textarea
          rows={10}
          cols={50}
          value={content}
          placeholder="Start typing..."
          onChange={(e) => setContent(e.target.value)}
        />
      </div>
      <div>
        <button
          onClick={() =>
// mutate exposes the types of arguments as defined in our router
            createMutation.mutate(
              { title, content },
              {
                onSuccess() {
                  ctx.invalidateQueries("blog.all");
                  setContent("");
                  setTitle("");
                },
              }
            )
          }
          disabled={createMutation.isLoading}
        >
          Create new post
        </button>
      </div>
    </div>
  );
};