solid-trpc and infiniteQuery
I am trying to create an infinite scroll, list using
solid-infinite-scroll and solid-trpc (solid-start), there is little to no documentation on solid-trpcitself, as it uses different methods from the original, but using the original as the base
The following code is what im doing, this returns undefined and keeps loading the same data:
const query = trpc.eep.infiniteFeed.useInfiniteQuery(
() => ({}),
() => ({
getNextPageParam: (lastPage) => {
return () => ({
cursor: lastPage.nextCursor,
});
},
initialPageParam: () => ({}),
})
);
const query = trpc.eep.infiniteFeed.useInfiniteQuery(
() => ({}),
() => ({
getNextPageParam: (lastPage) => {
return () => ({
cursor: lastPage.nextCursor,
});
},
initialPageParam: () => ({}),
})
);
//...
infiniteFeed: procedure
.input(
z.object({
onlyFollowing: z.boolean().optional(),
limit: z.number().optional(),
cursor: z
.object({
id: z.string(),
createdAt: z.date(),
})
.optional(),
})
)
.query(
async ({
input: { limit = 10, onlyFollowing = false, cursor },
ctx,
}) => {
const currentUserId = ctx.session?.user?.id;
console.log('HERE', cursor);
let whereClause = undefined;
if (onlyFollowing) {
whereClause = {
user: {
followers: {
some: { id: currentUserId },
},
},
};
}
const eeps = await getInfiniteEeps({
whereClause,
limit,
cursor,
currentUserId,
ctx,
});
return eeps;
}
),
//...
//...
infiniteFeed: procedure
.input(
z.object({
onlyFollowing: z.boolean().optional(),
limit: z.number().optional(),
cursor: z
.object({
id: z.string(),
createdAt: z.date(),
})
.optional(),
})
)
.query(
async ({
input: { limit = 10, onlyFollowing = false, cursor },
ctx,
}) => {
const currentUserId = ctx.session?.user?.id;
console.log('HERE', cursor);
let whereClause = undefined;
if (onlyFollowing) {
whereClause = {
user: {
followers: {
some: { id: currentUserId },
},
},
};
}
const eeps = await getInfiniteEeps({
whereClause,
limit,
cursor,
currentUserId,
ctx,
});
return eeps;
}
),
//...
async function getInfiniteEeps({
whereClause,
limit,
cursor,
currentUserId,
ctx,
}: {
whereClause?: Prisma.EepWhereInput;
limit: number;
cursor: { id: string; createdAt: Date } | undefined;
currentUserId: string | undefined;
ctx: IContext;
}) {
const data = await ctx.prisma.eep.findMany({
take: limit + 1,
cursor: cursor ? { createdAt_id: cursor } : undefined,
orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
where: whereClause,
select: {
id: true,
content: true,
createdAt: true,
_count: {
select: {
likes: true,
reeeps: true,
},
},
likes:
currentUserId == null
? false
: { where: { userId: currentUserId } },
reeeps:
currentUserId == null
? false
: { where: { userId: currentUserId } },
user: {
select: {
name: true,
id: true,
image: true,
},
},
},
});
let nextCursor: typeof cursor | undefined;
if (data.length > limit) {
const nextItem = data.pop();
if (nextItem != null)
nextCursor = {
id: nextItem.id,
createdAt: nextItem.createdAt,
};
}
const eeps = data.map((eep) => {
return {
id: eep.id,
content: eep.content,
createdAt: eep.createdAt,
likeCount: eep._count.likes,
likedByMe: eep.likes?.length > 0,
reEepCount: eep._count.reeeps,
reEepByMe: eep.reeeps?.length > 0,
user: eep.user,
};
});
return {
eeps,
nextCursor,
};
}
async function getInfiniteEeps({
whereClause,
limit,
cursor,
currentUserId,
ctx,
}: {
whereClause?: Prisma.EepWhereInput;
limit: number;
cursor: { id: string; createdAt: Date } | undefined;
currentUserId: string | undefined;
ctx: IContext;
}) {
const data = await ctx.prisma.eep.findMany({
take: limit + 1,
cursor: cursor ? { createdAt_id: cursor } : undefined,
orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
where: whereClause,
select: {
id: true,
content: true,
createdAt: true,
_count: {
select: {
likes: true,
reeeps: true,
},
},
likes:
currentUserId == null
? false
: { where: { userId: currentUserId } },
reeeps:
currentUserId == null
? false
: { where: { userId: currentUserId } },
user: {
select: {
name: true,
id: true,
image: true,
},
},
},
});
let nextCursor: typeof cursor | undefined;
if (data.length > limit) {
const nextItem = data.pop();
if (nextItem != null)
nextCursor = {
id: nextItem.id,
createdAt: nextItem.createdAt,
};
}
const eeps = data.map((eep) => {
return {
id: eep.id,
content: eep.content,
createdAt: eep.createdAt,
likeCount: eep._count.likes,
likedByMe: eep.likes?.length > 0,
reEepCount: eep._count.reeeps,
reEepByMe: eep.reeeps?.length > 0,
user: eep.user,
};
});
return {
eeps,
nextCursor,
};
}
2 Replies
it looks to me solid-query changed
useInfiniteQuery's response structure, try doing a effect log of query.data
pinging @orjdev (let me know if i should not do this)I should've been more clear, I do get the data, the nextCursor isn't passing into the fetch (so I'm only get the first "page" of data), and I don't know why, I tried for hours trying to fix it