获取 TRPCClientError：尝试使用 Trcp 调用后端 api 时出现意外的标记 '<'、“<!DOCTYPE ”...不是有效的 JSON

Question

我计划使用 SST 和 tRPC 构建一个应用程序。我从未使用过任何一个，所以我正在浏览文档并快速开始以更好地理解这些材料。我遇到了一个问题，即调用未在前端呈现。我不确定是路由器有问题还是后端有其他问题。每次我发出请求时，都会给出此错误 TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON。但我不确定它来自哪里。

堆栈

import { StackContext, Api, ViteStaticSite } from "@serverless-stack/resources";

export function MyStack({ stack }: StackContext) {
  const api = new Api(stack, "api", {
    routes: {
      "GET /todo": "functions/todo.handler"
    },
    cors : true,
  });

  const site = new ViteStaticSite(stack, "site", {
    path: "frontend",
    buildCommand: "npm run build",
    environment: {
      REACT_APP_API_URL: api.url,
    },
  });

  stack.addOutputs({
    SITE: site.url,
  });
}

路由器

import { initTRPC } from '@trpc/server';
import { z } from 'zod';


export const t = initTRPC.create();

const appRouter = t.router({
  greeting: t.procedure
  .input(
      z.object({
        name:  z.string(),
        })
    )
    .query(({input}) => {
    return { 
        text: `Hello ${input?.name ?? 'world'}`
    };
  }),
});

export type AppRouter = typeof appRouter;

import { awsLambdaRequestHandler } from '@trpc/server/adapters/aws-lambda';


export const handler = awsLambdaRequestHandler({
    router: appRouter  
})

前端

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { trpc } from './trpc';



const apiUrl = import.meta.env.REACT_APP_API_URL;


function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: `${apiUrl}/todo`
        }),
      ],
    }),
  );



  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Sample />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

function Sample(){
  const result = trpc.greeting.useQuery({name: 'will'})
    return (
      <div>
           <div>{result.isLoading ? "Loading..." : result.data?.text}</div>
      </div>
    )
  }

Answer 1

在这种情况下，您可能使用了错误的环境变量格式。Vite 希望您像这样添加变量

VITE_API_URL: api.url

由于您将其作为反应变量传递，我预计您的网络调用会到达错误的位置。因此，您的 TRPC api 永远不会被点击，相反，您只是点击localhost:3000/undefined/greeting或类似的 url。