realS3BI
TTCTheo's Typesafe Cult
•Created by Juraj98 on 7/31/2024 in #questions
'Invalid response or stream interrupted' when using T3+TRPC with Clerk
Here is also the billRouter:
export const billRouter = createTRPCRouter({
getBills: protectedProcedure
.input(
z.object({
teamIds: z.array(z.string()).optional(),
createdAt: z
.object({
from: z.string().optional(),
to: z.string().optional(),
})
.optional(),
offset: z.number().optional(),
limit: z.number().optional(),
}),
)
.query(async ({ ctx, input }) => {
const { teamIds, createdAt, offset, limit } = input;
await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate Longer waiting time for Suspense
const result = await ctx.db.query.bills.findMany({
where: (bills, { inArray, and, gte, lte }) =>
and(
teamIds ? inArray(bills.teamId, teamIds) : undefined,
createdAt?.from
? gte(bills.createdAt, new Date(createdAt.from))
: undefined,
createdAt?.to
? lte(bills.createdAt, new Date(createdAt.to))
: undefined,
),
offset,
limit,
});
return result ?? null;
}),
});
export const billRouter = createTRPCRouter({
getBills: protectedProcedure
.input(
z.object({
teamIds: z.array(z.string()).optional(),
createdAt: z
.object({
from: z.string().optional(),
to: z.string().optional(),
})
.optional(),
offset: z.number().optional(),
limit: z.number().optional(),
}),
)
.query(async ({ ctx, input }) => {
const { teamIds, createdAt, offset, limit } = input;
await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate Longer waiting time for Suspense
const result = await ctx.db.query.bills.findMany({
where: (bills, { inArray, and, gte, lte }) =>
and(
teamIds ? inArray(bills.teamId, teamIds) : undefined,
createdAt?.from
? gte(bills.createdAt, new Date(createdAt.from))
: undefined,
createdAt?.to
? lte(bills.createdAt, new Date(createdAt.to))
: undefined,
),
offset,
limit,
});
return result ?? null;
}),
});
3 replies
TTCTheo's Typesafe Cult
•Created by Juraj98 on 7/31/2024 in #questions
'Invalid response or stream interrupted' when using T3+TRPC with Clerk
Hi. I don't know if it is too late... (and for everybody that is facing the same issue in the future)...
But I had the same problem, and it was solved by enter the same input in the prefetch and in the suspense query...
See here my "limit" input...
Here is my code:
// bills.jsx
"use client";
import { api } from "~/trpc/react";
export function BillsList() {
const [bills] = api.bill.getBills.useSuspenseQuery({ limit: 10 });
if (!bills || bills.length === 0) {
return <div>No Bills Found</div>;
}
return (
<ul>
{bills.map((bill) => (
<li key={bill.id}>{bill.sum}</li>
))}
</ul>
);
}
// page.jsx
import React from "react";
import { BillsList } from "./bills";
import { auth } from "~/server/auth";
import { api, HydrateClient } from "~/trpc/server";
export default async function Test2Page() {
const session = await auth();
if (session?.user) {
void api.bill.getBills.prefetch({ limit: 10 });
}
return (
<HydrateClient>
<div>
<p>Show all Bills here.</p>
<hr />
{session?.user && (
<React.Suspense fallback={<div>Loading...</div>}>
<BillsList />
</React.Suspense>
)}
<hr />
</div>
</HydrateClient>
);
}
// bills.jsx
"use client";
import { api } from "~/trpc/react";
export function BillsList() {
const [bills] = api.bill.getBills.useSuspenseQuery({ limit: 10 });
if (!bills || bills.length === 0) {
return <div>No Bills Found</div>;
}
return (
<ul>
{bills.map((bill) => (
<li key={bill.id}>{bill.sum}</li>
))}
</ul>
);
}
// page.jsx
import React from "react";
import { BillsList } from "./bills";
import { auth } from "~/server/auth";
import { api, HydrateClient } from "~/trpc/server";
export default async function Test2Page() {
const session = await auth();
if (session?.user) {
void api.bill.getBills.prefetch({ limit: 10 });
}
return (
<HydrateClient>
<div>
<p>Show all Bills here.</p>
<hr />
{session?.user && (
<React.Suspense fallback={<div>Loading...</div>}>
<BillsList />
</React.Suspense>
)}
<hr />
</div>
</HydrateClient>
);
}
3 replies