7 replies

Advanced paginated query use case... is an custom paginate() a possibility?

So i'm trying to build a better feed for our app. Currently wanting to use the .paginate() to paginate my query.

So essentially what i want is to always receive X amount of results, but importantly i want a order of 2 horizontal video results, followed by 2 verticals results, since this is a feed consisting of vertical and horizontal videos that eventually gets build into a feed layout.

This is what i got now

export const feedList = query({
  args: {
    aspectRatio: v.union(v.literal('16:9'), v.literal('9:16')),
    paginationOpts: paginationOptsValidator,
  },
  handler: async (ctx, args) => {
    // Get all videos
    const results = await ctx.db
      .query('videos')
      .filter((q) => q.eq(q.field('muxData.aspectRatio'), args.aspectRatio))
      .order('desc')
      .paginate(args.paginationOpts)

    // Enrich videos with user and thumbnail
    const page = await Promise.all(results.page.map(async (video) => enrichVideo(ctx, video)))

    return {
      ...results,
      page,
    }
  },
})

export const feedList = query({
  args: {
    aspectRatio: v.union(v.literal('16:9'), v.literal('9:16')),
    paginationOpts: paginationOptsValidator,
  },
  handler: async (ctx, args) => {
    // Get all videos
    const results = await ctx.db
      .query('videos')
      .filter((q) => q.eq(q.field('muxData.aspectRatio'), args.aspectRatio))
      .order('desc')
      .paginate(args.paginationOpts)

    // Enrich videos with user and thumbnail
    const page = await Promise.all(results.page.map(async (video) => enrichVideo(ctx, video)))

    return {
      ...results,
      page,
    }
  },
})

And in the frontend i have 2 separate paginatedQueries, and a function that loads 2 results from each of those, order the results and builds the feed etc.

// How i use them
const loadMoreVideos = () => {
    // these are from the usePaginatedQuery()
    loadHorizontalVideos(LOAD_AMOUNT) 
    loadVerticalVideos(LOAD_AMOUNT)

    if (horizontalStatus === 'Exhausted' || verticalStatus === 'Exhausted') return

    const newHorizontalVideos = getNewResults(horizontalVideoResults)
    const newVerticalVideos = getNewResults(verticalVideoResults)

    const newOrder = generateElements(newHorizontalVideos, newVerticalVideos, 2)

    setVideoBlocks([...videoBlocks, ...newOrder])
  }

// How i use them
const loadMoreVideos = () => {
    // these are from the usePaginatedQuery()
    loadHorizontalVideos(LOAD_AMOUNT) 
    loadVerticalVideos(LOAD_AMOUNT)

    if (horizontalStatus === 'Exhausted' || verticalStatus === 'Exhausted') return

    const newHorizontalVideos = getNewResults(horizontalVideoResults)
    const newVerticalVideos = getNewResults(verticalVideoResults)

    const newOrder = generateElements(newHorizontalVideos, newVerticalVideos, 2)

    setVideoBlocks([...videoBlocks, ...newOrder])
  }

And what i'm searching for is a better approach, it seems like not really the best way to go about it right now. But has worked fine for just testing it out

So would greatly appreciate, thoughts on this and any ideas!

Convex Community•3y ago•

7 replies

oscklm

Advanced paginated query use case... is an custom paginate() a possibility?

export const feedList = query({
  args: {
    aspectRatio: v.union(v.literal('16:9'), v.literal('9:16')),
    paginationOpts: paginationOptsValidator,
  },
  handler: async (ctx, args) => {
    // Get all videos
    const results = await ctx.db
      .query('videos')
      .filter((q) => q.eq(q.field('muxData.aspectRatio'), args.aspectRatio))
      .order('desc')
      .paginate(args.paginationOpts)

    // Enrich videos with user and thumbnail
    const page = await Promise.all(results.page.map(async (video) => enrichVideo(ctx, video)))

    return {
      ...results,
      page,
    }
  },
})

export const feedList = query({
  args: {
    aspectRatio: v.union(v.literal('16:9'), v.literal('9:16')),
    paginationOpts: paginationOptsValidator,
  },
  handler: async (ctx, args) => {
    // Get all videos
    const results = await ctx.db
      .query('videos')
      .filter((q) => q.eq(q.field('muxData.aspectRatio'), args.aspectRatio))
      .order('desc')
      .paginate(args.paginationOpts)

    // Enrich videos with user and thumbnail
    const page = await Promise.all(results.page.map(async (video) => enrichVideo(ctx, video)))

    return {
      ...results,
      page,
    }
  },
})

And in the frontend i have 2 separate paginatedQueries, and a function that loads 2 results from each of those, order the results and builds the feed etc.

// How i use them
const loadMoreVideos = () => {
    // these are from the usePaginatedQuery()
    loadHorizontalVideos(LOAD_AMOUNT) 
    loadVerticalVideos(LOAD_AMOUNT)

    if (horizontalStatus === 'Exhausted' || verticalStatus === 'Exhausted') return

    const newHorizontalVideos = getNewResults(horizontalVideoResults)
    const newVerticalVideos = getNewResults(verticalVideoResults)

    const newOrder = generateElements(newHorizontalVideos, newVerticalVideos, 2)

    setVideoBlocks([...videoBlocks, ...newOrder])
  }

// How i use them
const loadMoreVideos = () => {
    // these are from the usePaginatedQuery()
    loadHorizontalVideos(LOAD_AMOUNT) 
    loadVerticalVideos(LOAD_AMOUNT)

    if (horizontalStatus === 'Exhausted' || verticalStatus === 'Exhausted') return

    const newHorizontalVideos = getNewResults(horizontalVideoResults)
    const newVerticalVideos = getNewResults(verticalVideoResults)

    const newOrder = generateElements(newHorizontalVideos, newVerticalVideos, 2)

    setVideoBlocks([...videoBlocks, ...newOrder])
  }

And what i'm searching for is a better approach, it seems like not really the best way to go about it right now. But has worked fine for just testing it out

So would greatly appreciate, thoughts on this and any ideas!

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Convex Community

Join the Convex Discord! Explore Convex, the backend platform that keeps your app in sync.

15,960 Members

Join

Advanced paginated query use case... is an custom paginate() a possibility?

Advanced paginated query use case... is an custom paginate() a possibility?

Continue the conversation

Convex Community

Continue the conversation

Convex Community

Similar Threads