SolidJSS
SolidJS•3y ago•
2 replies
Kira

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: () => ({}),
        })
    );


//...
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,
    };
}
Was this page helpful?