Dealing with images

import { v } from "convex/values";
import { query } from "./_generated/server";
import { paginationOptsValidator } from "convex/server";
import { R2 } from "@convex-dev/r2";
import { components } from "./_generated/api";

const r2 = new R2(components.r2);

export const listProductsWithImages = query({
  args: { paginationOpts: paginationOptsValidator },
  handler: async (ctx, args) => {
    // Paginate products
    const results = await ctx.db
      .query("products")
      .paginate(args.paginationOpts);

    // For each product in the page, fetch image URLs and sizes
    const page = await Promise.all(
      results.page.map(async (product) => {
        const imageUrls = await Promise.all(
          (product.imageKeys ?? []).map((key) => r2.getUrl(key))
        );
        const imageSizes = await Promise.all(
          (product.imageKeys ?? []).map(async (key) => {
            return await ctx.db
              .query("imageSizes")
              .withIndex("by_image_key", (q) => q.eq("imageKey", key))
              .first();
          })
        );
        return {
          ...product,
          imageUrls,
          imageSizes,
        };
      })
    );

    // Return the paginated result, replacing the page with the enriched data
    return {
      ...results,
      page,
    };
  },
});

import { v } from "convex/values";
import { query } from "./_generated/server";
import { paginationOptsValidator } from "convex/server";
import { R2 } from "@convex-dev/r2";
import { components } from "./_generated/api";

const r2 = new R2(components.r2);

export const listProductsWithImages = query({
  args: { paginationOpts: paginationOptsValidator },
  handler: async (ctx, args) => {
    // Paginate products
    const results = await ctx.db
      .query("products")
      .paginate(args.paginationOpts);

    // For each product in the page, fetch image URLs and sizes
    const page = await Promise.all(
      results.page.map(async (product) => {
        const imageUrls = await Promise.all(
          (product.imageKeys ?? []).map((key) => r2.getUrl(key))
        );
        const imageSizes = await Promise.all(
          (product.imageKeys ?? []).map(async (key) => {
            return await ctx.db
              .query("imageSizes")
              .withIndex("by_image_key", (q) => q.eq("imageKey", key))
              .first();
          })
        );
        return {
          ...product,
          imageUrls,
          imageSizes,
        };
      })
    );

    // Return the paginated result, replacing the page with the enriched data
    return {
      ...results,
      page,
    };
  },
});