Optimization: useInfiniteQuery

[amirfakhrullah]

I'm interested in using useInfiniteQuery to render pagination of posts in homepage.

But the filtering architecture has to be changed. As of now, the filtering is done on the frontend. What I did was I filtered the posts array cached from useQuery and used useMemo to memoized the new filtered posts (will update when there's activity in tags checkboxes or search bar). This is fine because we have the whole posts array in one page, so we can filter the whole posts array in one go.

When implementing useInfiniteQuery, we can only filter the data cached for that one page. To fix this, we have to make the filtering feature to not be dependable on the data from from that page. Instead, we have to add separate tRPC endpoints for filtering by tags and filtering by search bar and use Prisma to filter the posts.

But I think the performance might be slower as the api calls from Vercel's serverless functions took quite some time (free version). Users that using the search bar to find certain posts might feel the slowness

Maybe we can start consider using useInfiniteQuery when posts array gets too large?