● t3 stack (trpc) で Date型を扱う

t3 stack (trpc) で Date型をそのまま 扱いたい時は superjson を使用すれば そのまま使えますが、 クラスインスタンスを 直接返す時はDate型は文字列にされてしまうので注意しましょう。

具体的には、以下の3つの挙動の違いがあります

・挙動まとめ

・ プレーンオブジェクトの中に Date型のプロパティを含めて返す　→　✅ OK
・ クラスインスタンスの中に Date型のプロパティを含めて、クラスインスタンをそのまま返す。　→　❌NG
・ クラスインスタンスの中に Date型のプロパティを含めて class-transformer でプレーンオブジェクトに変換して返す。　→　✅ OK

・trpcサーバー側コード

npm i class-transformer reflect-metadata

export const postRouter = createTRPCRouter({
  wordPlain: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      return {
        id: "1",
        name: input.name,
        updatedAt: new Date(),
      };
    }),

  wordClass: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      const sampleClass = new SampleClass({
        id: "1",
        name: input.name,
      });
      return sampleClass;
    }),

  wordClassTransform: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      const sampleClassList = [
        new SampleClass({
          id: "1",
          name: `${input.name}_1`,
        }),
        new SampleClass({
          id: "2",
          name: `${input.name}_2`,
        }),
      ];

      return instanceToPlain(sampleClassList);
    }),

・クライアント側

  const { data: wordPlain } = apiReact.post.wordPlain.useQuery({
    name: "wordPlain",
  });

  const { data: wordClass } = apiReact.post.wordClass.useQuery({
    name: "wordClass",
  });

  const { data: wordClassTransform } =
    apiReact.post.wordClassTransform.useQuery({
      name: "wordClassTransform",
    });


  useEffect(() => {
    if (!wordPlain) return;
    if (!wordClass) return;

    console.log("● wordPlain");
    console.log(wordPlain);

    console.log("● wordClass");
    console.log(wordClass);

    console.log("● wordClassTransform");
    console.log(wordClassTransform);

  }, [wordPlain, wordClass, wordClassTransform]);

・結果