Chapter 05

tRPC server + Astro 2, お試し

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

概要:

tRPC + Astro の例となります、 SSRの例です。


構成

  • trpc/server : 10.13.2
  • express : 4.18.2
  • Astro: 2.0.10

参考


参考のコード

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


Server

  • 前の、svelteKitと同様の為 省略します

Client

  • utils/trpc.ts
trpc.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../../../server/index';

// Notice the <AppRouter> generic here.
export const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:4000/trpc',
    }),
  ],
});

  • src/pages/trpc/index.astro

  • .queryで、取得系の処理

---
import Layout from '../../layouts/Layout.astro';
import { trpc } from '../../utils/trpc';

const PUBLIC_ANYBODY = import.meta.env.PUBLIC_ANYBODY;
console.log("PUBLIC_ANYBODY=", PUBLIC_ANYBODY);

const url = import.meta.env.PUBLIC_API_URL;
//console.log("url=", url);
//
const hello = await trpc.hello.query();
console.log(hello);	
const user = await trpc.userById.query('1');
console.log(user);
const userList = await trpc.getUserList.query();
console.log("#userList");
console.log(userList);
---

<Layout title="Welcome to Astro.">
	<main class="container">
		<a href={`/`}>[ Top ]</a>
		<hr />		
		<h1>tRPC</h1>
		<p class="instructions">hoge123
		</p>
		<hr />
		hello : {hello}
		<hr />
		<button id="btn_save" class="btn btn-primary">Add</button>
	</main>
</Layout>
<!-- -->
<style>
</style>
<!-- -->
<script src="./Test.ts"></script>


  • src/pages/trpc/Test.ts

  • ボタンイベント追加

  • .mutate , 更新系の処理

Test.ts
import LibTest from '../../lib/LibTest';
import { trpc } from '../../utils/trpc';

const Test = {
  /**
   * createUser
   * @param
   *
   * @return
   */ 
  createUser: async function() {
    try{
      const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
    } catch (e) {
        console.error(e);
    }
  },
  /**
  * startProc
  * @param
  *
  * @return
  */   
  startProc :async function (): Promise<void> 
  {
    try{
      console.log("#startProc");
      const valid = await LibTest.validLogin();
console.log("valid=", valid);
      if(valid === false) {
//        alert("NG, valid Login");
      }
      //btn
      const button: any = document.querySelector('#btn_save');
      button.addEventListener('click', () => {
        this.createUser();
      });       
    } catch (e) {
      console.error(e);
    }    
  } 
}
//
Test.startProc();

export default Test;



....