Sid
Explore posts from serversTTCTheo's Typesafe Cult
•Created by Sid on 9/12/2024 in #questions
Single react query doesn't seem to hit then endpoint in production (Vercel)
There doesn't seem to be any caching, and there isn't anything else that has this kind of behaviour
9 replies
TTCTheo's Typesafe Cult
•Created by Sid on 9/12/2024 in #questions
Single react query doesn't seem to hit then endpoint in production (Vercel)
9 replies
TTCTheo's Typesafe Cult
•Created by Sid on 9/12/2024 in #questions
Single react query doesn't seem to hit then endpoint in production (Vercel)
BE:
getRecentContent: organisationMemberProcedure
.input(
z.object({
cursor: z.string().nullish().optional(),
limit: z.number().default(5),
isMyself: z.boolean().default(true),
})
)
.query(async ({ ctx, input }) => {
console.log('GET RECENT CONTENT');
const userIdCondition = input.isMyself ? { userId: ctx.user.id } : {};
const generatedContent = await ctx.db.contentGeneration.findMany({
where: {
...userIdCondition,
organisationId: ctx.organisationMember.organisationId,
},
select: {
id: true,
createdAt: true,
growthProfile: {
select: {
name: true,
},
},
outboundContentGeneration: {
select: {
type: true,
id: true,
messages: true,
},
},
inboundContentGeneration: {
select: {
type: true,
id: true,
message: true,
messageId: true,
},
},
organisationMember: {
select: {
user: {
select: {
firstName: true,
},
},
},
},
},
orderBy: {
createdAt: 'desc',
},
take: input.limit + 1,
cursor: input.cursor ? { id: input.cursor } : undefined,
});
const nextCursor =
generatedContent.length > input.limit
? generatedContent.pop()?.id
: null;
return {
generatedContent,
nextCursor,
};
}),
getRecentContent: organisationMemberProcedure
.input(
z.object({
cursor: z.string().nullish().optional(),
limit: z.number().default(5),
isMyself: z.boolean().default(true),
})
)
.query(async ({ ctx, input }) => {
console.log('GET RECENT CONTENT');
const userIdCondition = input.isMyself ? { userId: ctx.user.id } : {};
const generatedContent = await ctx.db.contentGeneration.findMany({
where: {
...userIdCondition,
organisationId: ctx.organisationMember.organisationId,
},
select: {
id: true,
createdAt: true,
growthProfile: {
select: {
name: true,
},
},
outboundContentGeneration: {
select: {
type: true,
id: true,
messages: true,
},
},
inboundContentGeneration: {
select: {
type: true,
id: true,
message: true,
messageId: true,
},
},
organisationMember: {
select: {
user: {
select: {
firstName: true,
},
},
},
},
},
orderBy: {
createdAt: 'desc',
},
take: input.limit + 1,
cursor: input.cursor ? { id: input.cursor } : undefined,
});
const nextCursor =
generatedContent.length > input.limit
? generatedContent.pop()?.id
: null;
return {
generatedContent,
nextCursor,
};
}),
9 replies
TTCTheo's Typesafe Cult
•Created by Sid on 9/12/2024 in #questions
Single react query doesn't seem to hit then endpoint in production (Vercel)
Here are some code examples if interested:
FE:
export const RecentContentSection = () => {
const [selectedTab, setSelectedTab] = useState<'myself' | 'organisation'>(
'myself'
);
const {
data,
isLoading,
hasNextPage,
isFetchingNextPage,
fetchNextPage,
error,
} = clientApi.organisationMember.getRecentContent.useInfiniteQuery(
{
cursor: null,
limit: 5,
isMyself: selectedTab === 'myself',
} as { cursor: string | null; limit: number; isMyself: boolean },
{
getNextPageParam: (lastPage) => {
return lastPage.nextCursor;
},
}
);
console.log('RECENT CONTENT: ', { data, error, isLoading });
return (
<div className="mt-14 flex items-center">
<Tabs defaultValue="myself" className="w-full">
<div className="mb-7 flex items-center gap-16">
<H3>Recent</H3>
<TabsList>
<TabsTrigger
onClick={() => setSelectedTab('myself')}
value="myself"
>
Myself
</TabsTrigger>
<TabsTrigger
onClick={() => setSelectedTab('organisation')}
value="organisation"
>
Organisation
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="myself">
<RecentContentTab
isLoading={isLoading}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
data={data}
fetchNextPage={fetchNextPage}
/>
</TabsContent>
<TabsContent value="organisation">
<RecentContentTab
isLoading={isLoading}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
data={data}
fetchNextPage={fetchNextPage}
/>
</TabsContent>
</Tabs>
</div>
);
};
export const RecentContentSection = () => {
const [selectedTab, setSelectedTab] = useState<'myself' | 'organisation'>(
'myself'
);
const {
data,
isLoading,
hasNextPage,
isFetchingNextPage,
fetchNextPage,
error,
} = clientApi.organisationMember.getRecentContent.useInfiniteQuery(
{
cursor: null,
limit: 5,
isMyself: selectedTab === 'myself',
} as { cursor: string | null; limit: number; isMyself: boolean },
{
getNextPageParam: (lastPage) => {
return lastPage.nextCursor;
},
}
);
console.log('RECENT CONTENT: ', { data, error, isLoading });
return (
<div className="mt-14 flex items-center">
<Tabs defaultValue="myself" className="w-full">
<div className="mb-7 flex items-center gap-16">
<H3>Recent</H3>
<TabsList>
<TabsTrigger
onClick={() => setSelectedTab('myself')}
value="myself"
>
Myself
</TabsTrigger>
<TabsTrigger
onClick={() => setSelectedTab('organisation')}
value="organisation"
>
Organisation
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="myself">
<RecentContentTab
isLoading={isLoading}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
data={data}
fetchNextPage={fetchNextPage}
/>
</TabsContent>
<TabsContent value="organisation">
<RecentContentTab
isLoading={isLoading}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
data={data}
fetchNextPage={fetchNextPage}
/>
</TabsContent>
</Tabs>
</div>
);
};
9 replies