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,
    }
  },
})

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])
  }

// 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!

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

Similar Threads

Similar Threads

Similar Threads