在 Astro 及其 (React) 岛屿中使用 TRPC

业界资讯 2023-06-24 21:49:18 阅读次数: 0

我开始在工作中的一些 Next.js 项目中使用TRPC，并且非常喜欢端到端的类型安全性，这为开发人员提供了使用 API 的能力。
所以我决定也在我自己的网站上实施 TRPC，它使用的是Astro。
开始在 Astro 中使用 TRPC 需要采取几个步骤。

安装所需的包

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm install @tanstack/react-query @trpc/client @trpc/server @trpc/react-query
</code></span></span>

设置 TRPC 上下文

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /src/server/context.ts</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">getUser</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@astro-auth/core</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">inferAsyncReturnType</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/server</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">FetchCreateContextFnOptions</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/server/adapters/fetch</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">createContext</span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">resHeaders</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">FetchCreateContextFnOptions</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">user</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">getUser</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">server</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">req</span> <span style="color:var(--syntax-text-color)">});</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">resHeaders</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">user</span> <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">Context</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">inferAsyncReturnType</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-declaration-color)">typeof</span> <span style="color:var(--syntax-name-color)">createContext</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

因为我想在调用 TRPC 路由时检查当前登录的用户，所以我添加了getUser()来自@astro-auth. 通过将其添加到上下文中，我稍后可以在我的中间件中使用该用户（见下文）。

设置 TRPC 服务器

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// src/server/router.ts</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">initTRPC</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">TRPCError</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/server</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">z</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">zod</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">prisma</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../lib/prisma</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Comment</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@prisma/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Context</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./context</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">t</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">initTRPC</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">context</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">Context</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">().</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">();</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">middleware</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">t</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">middleware</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">publicProcedure</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">t</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">procedure</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isAdmin</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">middleware</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">ctx</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">next</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">ctx</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">throw</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">TRPCError</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">code</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">UNAUTHORIZED</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">});</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">next</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">ctx</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">ctx</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">adminProcedure</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">publicProcedure</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">use</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">isAdmin</span><span style="color:var(--syntax-text-color)">);</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">appRouter</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">t</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">router</span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-name-color)">getCommentsForBlog</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">publicProcedure</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">())</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">query</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">input</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">src/content</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">.mdx</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">);</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">commentsForBlogUrl</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">findFirst</span><span style="color:var(--syntax-text-color)">({</span>
        <span style="color:var(--syntax-name-color)">where</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-declaration-color)">undefined</span> <span style="color:var(--syntax-text-color)">},</span>
        <span style="color:var(--syntax-name-color)">include</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Comment</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">orderBy</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createdAt</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">desc</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-text-color)">});</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">allCommentsInDbForPost</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">commentsForBlogUrl</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">Comment</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">allCommentsInDbForPost</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">}),</span>
  <span style="color:var(--syntax-name-color)">createCommentForBlog</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">publicProcedure</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">object</span><span style="color:var(--syntax-text-color)">({</span>
        <span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">(),</span>
        <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">(),</span>
        <span style="color:var(--syntax-name-color)">blogUrl</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">(),</span>
      <span style="color:var(--syntax-text-color)">})</span>
    <span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">mutation</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">input</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">blogUrl</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">commentInDb</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">Comment</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">blog</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">findFirst</span><span style="color:var(--syntax-text-color)">({</span>
        <span style="color:var(--syntax-name-color)">where</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-text-color)">});</span>
      <span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">commentInDb</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span>
          <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
              <span style="color:var(--syntax-name-color)">connectOrCreate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
                <span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
                  <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blogUrl</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
                <span style="color:var(--syntax-text-color)">},</span>
                <span style="color:var(--syntax-name-color)">where</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
                  <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">blog</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">id</span> <span style="color:var(--syntax-error-color)">??</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span>
                <span style="color:var(--syntax-text-color)">},</span>
              <span style="color:var(--syntax-text-color)">},</span>
            <span style="color:var(--syntax-text-color)">},</span>
          <span style="color:var(--syntax-text-color)">},</span>
        <span style="color:var(--syntax-text-color)">});</span>
      <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error saving comment</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">err</span><span style="color:var(--syntax-text-color)">);</span>
        <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error saving comment</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
      <span style="color:var(--syntax-text-color)">}</span>
      <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">commentInDb</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error saving comment</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
      <span style="color:var(--syntax-text-color)">}</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">success</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}),</span>
  <span style="color:var(--syntax-name-color)">deleteCommentForBlog</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">adminProcedure</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">object</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">}))</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">mutation</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">input</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">deleteComment</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">deleteComment</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">prisma</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">delete</span><span style="color:var(--syntax-text-color)">({</span>
          <span style="color:var(--syntax-name-color)">where</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-text-color)">},</span>
        <span style="color:var(--syntax-text-color)">});</span>
      <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error deleting comment</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
      <span style="color:var(--syntax-text-color)">}</span>
      <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">deleteComment</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error deleting comment</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
      <span style="color:var(--syntax-text-color)">}</span>

      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">success</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}),</span>
  <span style="color:var(--syntax-name-color)">sendContactForm</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">publicProcedure</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">object</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">().</span><span style="color:var(--syntax-name-color)">nullable</span><span style="color:var(--syntax-text-color)">(),</span> <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">z</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">().</span><span style="color:var(--syntax-name-color)">nullable</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">})</span>
    <span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">mutation</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">input</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">email</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">env</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">FORMSPREE_URL</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
          <span style="color:var(--syntax-name-color)">method</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">post</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-name-color)">headers</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">Accept</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">application/json</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-text-color)">},</span>
          <span style="color:var(--syntax-name-color)">body</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">JSON</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">stringify</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-text-color)">),</span>
        <span style="color:var(--syntax-text-color)">}).</span><span style="color:var(--syntax-declaration-color)">catch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
          <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">);</span>
          <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
        <span style="color:var(--syntax-text-color)">});</span>
        <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">success</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
      <span style="color:var(--syntax-text-color)">}</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">missingdata</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}),</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">AppRouter</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">typeof</span> <span style="color:var(--syntax-name-color)">appRouter</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

我创建了一个单独的过程adminProcedure，在其上应用了中间件。这将确保只有在有登录用户的情况下才能调用此过程中的任何路由。
创建程序后，我声明了不同的路由。查看deleteCommentForBlogroute 后面的路由adminProcedure。

在 Astro 中设置 API 路由

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /src/pages/api/trpc/[trpc].ts</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">fetchRequestHandler</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/server/adapters/fetch</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">astro</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../../server/context</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">appRouter</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../../server/router</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">all</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">APIRoute</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">request</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">fetchRequestHandler</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">endpoint</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">/api/trpc</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">request</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">router</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">appRouter</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">createContext</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

我将使用获取适配器来处理从客户端到 TRPC 路由器的请求。
这是可能的，因为 Astro 使用内置的 Web 平台 API Response& Request。
我们链接路由器和上下文，我们准备好设置 TRPC 客户端。

设置 TRPC 客户端

因为我想在 Astro 页面和岛屿上的客户端脚本中使用 TRPC 。
我的岛屿是使用 React 创建的，我也将设置 TRPC React 客户端。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /src/client/index.ts</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createTRPCReact</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/react-query</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">createTRPCProxyClient</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">httpBatchLink</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">AppRouter</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../server/router</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">trpcReact</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">createTRPCReact</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">AppRouter</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">trpcAstro</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">createTRPCProxyClient</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">AppRouter</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-name-color)">links</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
    <span style="color:var(--syntax-name-color)">httpBatchLink</span><span style="color:var(--syntax-text-color)">({</span>
      <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">http://localhost:3000/api/trpc</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">}),</span>
  <span style="color:var(--syntax-text-color)">],</span>
<span style="color:var(--syntax-text-color)">});</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">trpcReact</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">trpcAstro</span> <span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

在 .astro 文件中使用 TRPC 客户端

我将使用 Astro TRPC 客户端从<script>客户端上的标签与 TRPC 路由进行通信。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>// /src/pages/context/index.astro export const prerender = true; import Layout
from '../../layouts/Layout.astro';

<form id="contactForm">
  <label class="flex flex-col gap-2 mb-4" for="email">
    Your e-mail
    <input
      class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
      id="email"
      type="email"
      name="email"
      placeholder="[email protected]"
      required
    />
  </label>
  <label class="flex flex-col gap-2" for="message">
    Your message
    <textarea
      class="py-2 px-4 bg-white border-secondary border-2 rounded-lg"
      rows={3}
      id="message"
      name="message"
      placeholder="Hey, I would like to get in touch with you"
      required></textarea>
  </label>

  <button
    class="px-8 mt-4 py-4 bg-secondary text-white rounded-lg lg:hover:scale-[1.04] transition-transform disabled:opacity-50"
    type="submit"
    id="submitBtn"
  >
    Submit
  </button>
  <div id="missingData" class="text-red-500 font-bold hidden">
    Something went from while processing the contact form. Try again later.
  </div>
  <div id="error" class="text-red-500 font-bold hidden">
    Something went from while processing the contact form. Try again later.
  </div>
</form>
<script>
  import { trpcAstro } from '../../client';
  const form = document.getElementById('contactForm') as HTMLFormElement | null;
  form?.addEventListener('submit', async e => {
    e.preventDefault();
    const formData = new FormData(form);
    const result = await trpcAstro.sendContactForm.mutate({
      message: formData.get('message') as string | null,
      email: formData.get('email') as string | null,
    });
    if (result.status === 'success') {
      window.location.href = '/contact/thanks';
    }
  });
</script>
</code></span></span>

因为我使用的是 TRPC 客户端，所以我在代码上获得了自动完成功能，而且我确切地知道什么是预期的路线输入以及什么将被返回！

在 React islands 中使用 TRPC 客户端

我决定与 合作@tanstack/react-query，以便在我的 React 代码中更轻松地获取/改变。
因此，我需要实例化 TRPC 客户端和for QueryClient。 这是我在一个包装器组件中完成的，它包装了将调用 TRPC 路由的实际组件。react-query
 

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /src/components/CommentOverviewWrapper.tsx</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">QueryClient</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">QueryClientProvider</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@tanstack/react-query</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">CommentOverview</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./CommentOverview</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">trpcReact</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">httpBatchLink</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@trpc/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">CommentsOverviewWrapper</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">queryClient</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">QueryClient</span><span style="color:var(--syntax-text-color)">());</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">trpcClient</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span>
    <span style="color:var(--syntax-name-color)">trpcReact</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">createClient</span><span style="color:var(--syntax-text-color)">({</span>
      <span style="color:var(--syntax-name-color)">links</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
        <span style="color:var(--syntax-name-color)">httpBatchLink</span><span style="color:var(--syntax-text-color)">({</span>
          <span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">http://localhost:3000/api/trpc</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-text-color)">}),</span>
      <span style="color:var(--syntax-text-color)">],</span>
    <span style="color:var(--syntax-text-color)">})</span>
  <span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">trpcReact</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">client</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">trpcClient</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">queryClient</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">queryClient</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">QueryClientProvider</span> <span style="color:var(--syntax-name-color)">client</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">queryClient</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">CommentOverview</span> <span style="color:var(--syntax-text-color)">/></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">QueryClientProvider</span><span style="color:var(--syntax-text-color)">></span>
    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">trpcReact</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">CommentsOverviewWrapper</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

实际组件最终看起来像这样：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// /src/components/CommentOverview.tsx</span>

<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Comment</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@prisma/client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">trpcReact</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../client</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">CommentOverview</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">trpcReact</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">getAllComments</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">useQuery</span><span style="color:var(--syntax-text-color)">();</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">mutate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">deleteComment</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">trpcReact</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">deleteCommentForBlog</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">useMutation</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">onError</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">error</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Error deleting comment</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-name-color)">onSuccess</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">res</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">status</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">error</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Succesfully deleted comment</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
      <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-name-color)">onSettled</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">refetch</span><span style="color:var(--syntax-text-color)">();</span>
    <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-text-color)">});</span>

  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">commentsReduced</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">reduce</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">]:</span> <span style="color:var(--syntax-declaration-color)">typeof</span> <span style="color:var(--syntax-name-color)">upToDateCommentsQuery</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">acc</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">cur</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">({</span>
      <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">acc</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">cur</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">]:</span> <span style="color:var(--syntax-text-color)">[...(</span><span style="color:var(--syntax-name-color)">acc</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">cur</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-text-color)">[]),</span> <span style="color:var(--syntax-name-color)">cur</span><span style="color:var(--syntax-text-color)">],</span>
    <span style="color:var(--syntax-text-color)">}),</span>
    <span style="color:var(--syntax-text-color)">{}</span>
  <span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"grid lg:grid-cols-2 gap-6"</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">commentsReduced</span>
        <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-text-color)">Object</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">entries</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">commentsReduced</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(([</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">val</span><span style="color:var(--syntax-text-color)">])</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"font-bold mb-4 text-xl"</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">ul</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex flex-col gap-y-2"</span><span style="color:var(--syntax-text-color)">></span>
                  <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">val</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">comment</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex gap-x-2"</span> <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span>
                        <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"button"</span>
                        <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
                          <span style="color:var(--syntax-name-color)">deleteComment</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">id</span> <span style="color:var(--syntax-text-color)">});</span>
                        <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
                      <span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">svg</span>
                          <span style="color:var(--syntax-name-color)">xmlns</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"http://www.w3.org/2000/svg"</span>
                          <span style="color:var(--syntax-name-color)">fill</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"none"</span>
                          <span style="color:var(--syntax-name-color)">viewBox</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"0 0 24 24"</span>
                          <span style="color:var(--syntax-name-color)">strokeWidth</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-string-color)">}</span>
                          <span style="color:var(--syntax-name-color)">stroke</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"currentColor"</span>
                          <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"min-w-[1.5rem] h-6 text-red-600"</span>
                        <span style="color:var(--syntax-text-color)">></span>
                          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">path</span>
                            <span style="color:var(--syntax-name-color)">strokeLinecap</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"round"</span>
                            <span style="color:var(--syntax-name-color)">strokeLinejoin</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"round"</span>
                            <span style="color:var(--syntax-name-color)">d</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"</span>
                          <span style="color:var(--syntax-text-color)">/></span>
                        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">svg</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">span</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"font-bold"</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">span</span><span style="color:var(--syntax-text-color)">></span> :<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">'</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">comment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-string-color)">}</span>
                      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">li</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                  <span style="color:var(--syntax-text-color)">))</span><span style="color:var(--syntax-string-color)">}</span>
                <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">ul</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)">);</span>
          <span style="color:var(--syntax-text-color)">})</span>
        <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-string-color)">}</span>
    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">CommentOverview</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

所以获取所有评论就像添加一样简单const upToDateCommentQuery = trpcReact.getAllComments.useQuery()。
删除评论是通过添加const { mutate: deleteComment } = trpcReact.deleteCommentForBlog.useMutation然后在我的<button>点击处理程序调用中完成的deleteComment({ id: comment.id });。

希望这对您有所帮助！代码可以在我的 GitHub
上找到。

猜你喜欢

转载自blog.csdn.net/jascl/article/details/131304369
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022