Chapter 06

tRPC + Supabase (postgres)

knaka Tech-Blog
knaka Tech-Blog
2023.03.05に更新
このチャプターの目次

概要:

tRPC + Supabase の例となります。

  • ORMは、今回使用しない例となります
  • テストは、JSフロントから実行しました。

構成

  • trpc/server : 10.13.2
  • express : 4.18.2
  • pg

参考のコード

  • /server の部分になります。
  • /server/.env に、DB接続条件を追加しました。

https://github.com/kuc-arc-f/kit1_13trpc


  • src/index.ts : 追加部分

  • リスト取得、追加、を追加しました。

index.ts
const appRouter = router({

  /**
   * getTaskList
   * @param
   *
   * @return
   */  
  getTaskList: publicProcedure.query(async () => {
    const items = await LibTask.getItems();
    return items;
  }),
  /**
   * taskCreate
   * @param
   *
   * @return
   */  
  taskCreate: publicProcedure
  .input(z.object({ title: z.string() }))
  .mutation(async (req) => {
//console.log(req.input.title);
    const item = {
      title: req.input.title,
      content: ""
    }
//console.log(item);
    const result = await LibTask.addTask(item);
console.log(result);
    return result;
  }),
  /**
   * getTask
   * @param
   *
   * @return
   */   
  getTask: publicProcedure
  .input((val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  })
  .query(async (req) => {
//console.log(req.input);
    const result = await LibTask.getItem(Number(req.input));
//console.log(result);
    return result;
  }),   
  /**
   * getTask
   * @param
   *
   * @return
   */   
  deleteTask: publicProcedure
  .input((val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  })
  .mutation(async (req) => {
console.log("input=", req.input);
    const result = await LibTask.deleteTask(Number(req.input));
//console.log(result);
    return result;
  }),      
});


  • package.json, pg等を追加しました
  "dependencies": {
    "@trpc/server": "^10.13.2",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "pg": "^8.9.0",
    "zod": "^3.20.6"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^18.14.4",
    "nodemon": "^2.0.20",
    "rimraf": "^4.3.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5"
  }

....