Omar Posts - Convex Community

Omar

•Created by Omar on 12/21/2024 in #support-community

Fetching another document's data via id in query

schema.ts

import { authTables } from "@convex-dev/auth/server";
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  ...authTables,
  announcements: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
  events: defineTable({
    title: v.string(),
    description: v.string(),
    date: v.string(),
    imageId: v.string(),
    userId: v.string(),
  }),
  messages: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
});

import { authTables } from "@convex-dev/auth/server";
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  ...authTables,
  announcements: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
  events: defineTable({
    title: v.string(),
    description: v.string(),
    date: v.string(),
    imageId: v.string(),
    userId: v.string(),
  }),
  messages: defineTable({
    text: v.string(),
    userId: v.string(),
  }),
});

chat.ts

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

export const sendMessage = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      throw new Error("Unauthenticated call to sendMessage");
    }
    const { text } = args;
    await ctx.db.insert("messages", {
      text,
      userId: identity.subject,
    });
  },
});

export const listMessages = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("messages").order("desc").take(50);
  },
});

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";

export const sendMessage = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      throw new Error("Unauthenticated call to sendMessage");
    }
    const { text } = args;
    await ctx.db.insert("messages", {
      text,
      userId: identity.subject,
    });
  },
});

export const listMessages = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("messages").order("desc").take(50);
  },
});

How do I read a user's name when querying the messages via the userId property? For context, I'm using ConvexAuth.

10 replies

CCConvex Community

•Created by Omar on 12/21/2024 in #support-community

How to get the URL of an image in the storage by its id?

I have tried the http method but obviously I'm doing something wrong. convex/http.ts

import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;

import { httpRouter } from "convex/server";
import { Id } from "./_generated/dataModel";
import { httpAction } from "./_generated/server";
import { auth } from "./auth";

const http = httpRouter();

auth.addHttpRoutes(http);

http.route({
  path: "/getImage",
  method: "GET",
  handler: httpAction(async (ctx, request) => {
    const { searchParams } = new URL(request.url);
    const storageId = searchParams.get("storageId")! as Id<"_storage">;
    const blob = await ctx.storage.get(storageId);
    if (blob === null) {
      return new Response("Image not found", {
        status: 404,
      });
    }
    return new Response(blob);
  }),
});

export default http;

event-list.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/convex/_generated/api";
import { useQuery } from "convex/react";
import Image from "next/image";

export default function EventList() {
  const events = useQuery(api.events.listEvents) || [];

  function getImageUrl({ storageId }: { storageId: string }) {
    const imageUrl = new URL(`${process.env.NEXT_PUBLIC_CONVEX_SITE_URL}/getImage`);
    imageUrl.searchParams.set("storageId", storageId);
    console.log(imageUrl.href);

    return imageUrl.href;
  }

  return (
          {events.map((event: any) => (
            <Card key={event._id}>
              <CardContent className="p-4">
                <Image
                  src={getImageUrl(event.imageId)}
                  alt={event.title}
                  width={300}
                  height={200}
                  className="mb-4 h-48 w-full rounded object-cover"
                />
              </CardContent>
            </Card>
          ))}
  );
}

15 replies