概要:
tRPC + Astro の例となります、 SSRの例です。
構成
- trpc/server : 10.13.2
- express : 4.18.2
- Astro: 2.0.10
参考
参考のコード
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;
....