英文:
React TS is returning undefined then returns the data
问题
以下是您提供的代码的翻译部分：
我正在使用无服务器框架和 tRPC 来处理路由。当我调用后端时，初始状态会是未定义，然后返回适当的数据。我不确定是前端调用有问题还是从后端检索数据有问题。我尝试过添加等待，但没有效果。
路由调用
const t = initTRPC.create();
const appRouter = t.router({
Todos: t.procedure
.query(() => {
// console.log(Todo.list())
return Todo.list()
})
})
数据库查询
export function list() {
return PG.DB.selectFrom("todo")
.selectAll()
.orderBy("todoID")
.execute()
}
前端
function IndexPage() {
const todoList = trpc.Todos.useQuery()?.data;
console.log("--------", todoList)
if (!todoList) return <div>Loading...</div>;
return (
<div>
<table className="table table-bordered">
<thead>
<tr>
<th className="th-sm">任务</th>
</tr>
</thead>
<tbody>
{todoList.map((todo) => {
return (
<>
<tr key={todo?.todoID}>
<td>{todo.task}</td>
</tr>
</>
);
})}
</tbody>
</table>
</div>
);
}
希望这有助于您理解代码。如果您需要进一步的帮助，请随时提出。
英文:
I am using a serverless frame work and tRPC for routes. When I make a call to the backend it will initially be undefined and then return the appropriate data. I am not sure if my call is wrong on the frontend or if there is an issue with retrieving data from the backend. I have tried adding awaits, but nothing worked.
route call
const t = initTRPC.create();
const appRouter = t.router({
Todos: t.procedure
.query(() => {
// console.log(Todo.list())
return Todo.list()
})
})
db query
export function list() {
return PG.DB.selectFrom("todo")
.selectAll()
.orderBy("todoID")
.execute()
}
frontend
function IndexPage() {
const todoList = trpc.Todos.useQuery()?.data;
console.log("--------", todoList)
if (!todoList) return <div>Loading...</div>;
return (
<div>
<table className="table table-bordered">
<thead>
<tr>
<th className="th-sm">task</th>
</tr>
</thead>
<tbody>
{todoList.map((todo) => {
return (
<>
<tr key={todo?.todoID}>
<td>{todo.task}</td>
</tr>
</>
);
})}
</tbody>
</table>
</div>
);
}
答案1
得分: 2
代码部分不翻译。以下是翻译好的内容：
"It's normal for the data to initially be undefined. The query doesn't exist before the component first renders, so the component can't have the data yet (unless it's already in cache for some reason such as also being queried in another component).
If you want to create a component that has the data from a tRPC query as soon as it mounts the first time, you have several options, for example:
- using server side rendering if your app allows this
- creating a separate component that displays the data, and only rendering it if data exists
tRPC's useQuery uses Tanstack Query. You can see all of the things you can destructure from the query here: https://tanstack.com/query/v4/docs/react/reference/useQuery"
英文:
It's normal for the data to initially be undefined. The query doesn't exist before the component first renders, so the component can't have the data yet (unless it's already in cache for some reason such as also being queried in another component).
If you want to create a component that has the data from a tRPC query as soon as it mounts the first time, you have several options, for example:
- using server side rendering if your app allows this
- creating a separate component that displays the data, and only rendering it if data exists
tRPC's useQuery uses Tanstack Query. You can see all of the things you can destructure from the query here: https://tanstack.com/query/v4/docs/react/reference/useQuery
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论