ossicor-san•2y ago

Using Filter does not work with ids as string?

I am trying to find a chatroom using its id which I will be getting as a string. (As I am trying to get it it from the params of the browser)

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<ChatroomPage />}>
        </Route>
      </Routes>
    </Router>
  );
}

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<ChatroomPage />}>
        </Route>
      </Routes>
    </Router>
  );
}

export default function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    useQuery(api.messages.list, { chatroomId: chatroom.chatroomId }) || [];

  return (
    <main>
      <h1>{chatroom.creator}</h1>
      <Badge />
      <h2>
        <SignOutButton />
      </h2>
      <div className="messageBox">
        {messages.map((message) => (
          <Message
            key={message._id.toString()}
            id={message._id}
            sender={message.sender}
            content={message.content}
            sentAt={new Date(message._creationTime)}
            likes={message.likes}
          />
        ))}
      </div>
      <SendMessage chatroomId={chatroom.chatroomId} />
    </main>
  );
}

export default function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    useQuery(api.messages.list, { chatroomId: chatroom.chatroomId }) || [];

  return (
    <main>
      <h1>{chatroom.creator}</h1>
      <Badge />
      <h2>
        <SignOutButton />
      </h2>
      <div className="messageBox">
        {messages.map((message) => (
          <Message
            key={message._id.toString()}
            id={message._id}
            sender={message.sender}
            content={message.content}
            sentAt={new Date(message._creationTime)}
            likes={message.likes}
          />
        ))}
      </div>
      <SendMessage chatroomId={chatroom.chatroomId} />
    </main>
  );
}

5 Replies

ian•2y ago

The first time useQuery returns, it will be undefined - until it retrieves the results from the server. You can treat undefined as “loading”

ossicor-sanOP•2y ago

oh, I should await it?

ossicor-sanOP•2y ago

showing this error now

export default async function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = await useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    (await useQuery(api.messages.list, { chatroomId: chatroom.chatroomId })) ||
    [];

export default async function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = await useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    (await useQuery(api.messages.list, { chatroomId: chatroom.chatroomId })) ||
    [];

I did this @ian actually didnt resolve

import { useParams } from "react-router-dom";
import { api } from "../../convex/_generated/api";
import { useQuery } from "convex/react";
import ChatroomPage from "./ChatroomPage";

export default function LoadingChatroom() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    return <div>Loading...</div>;
  }

  return (
    <ChatroomPage
      chatroomId={chatroom.chatroomId}
      creator={chatroom.creator}
      name={chatroom.name}
    />
  );
}

import { useParams } from "react-router-dom";
import { api } from "../../convex/_generated/api";
import { useQuery } from "convex/react";
import ChatroomPage from "./ChatroomPage";

export default function LoadingChatroom() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    return <div>Loading...</div>;
  }

  return (
    <ChatroomPage
      chatroomId={chatroom.chatroomId}
      creator={chatroom.creator}
      name={chatroom.name}
    />
  );
}

I tried doing this as the docs suggested but for some reason it just cannot find the chatroom

export const getChatroom = query({
  args: { chatroomId: v.string() },
  handler: async (ctx, args) => {
    const chatroom = await ctx.db
      .query("chatrooms")
      .filter((q) => q.eq(q.field("_id"), args.chatroomId))
      .unique();

    if (!chatroom) {
      throw new Error("Chatroom not found");
    }

    const creator = await ctx.db.get(chatroom.creatorId);
    console.log(chatroom);

    return {
      creator: creator!.name,
      chatroomId: chatroom._id,
      name: chatroom.name,
    };
  },
});

export const getChatroom = query({
  args: { chatroomId: v.string() },
  handler: async (ctx, args) => {
    const chatroom = await ctx.db
      .query("chatrooms")
      .filter((q) => q.eq(q.field("_id"), args.chatroomId))
      .unique();

    if (!chatroom) {
      throw new Error("Chatroom not found");
    }

    const creator = await ctx.db.get(chatroom.creatorId);
    console.log(chatroom);

    return {
      creator: creator!.name,
      chatroomId: chatroom._id,
      name: chatroom.name,
    };
  },
});

is there something wrong with this and/or

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<LoadingChatroom />}>
        </Route>
      </Routes>
    </Router>
  );
}

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<LoadingChatroom />}>
        </Route>
      </Routes>
    </Router>
  );
}

nvm I'm dumb I fixed thanks a lot

ian•2y ago

You might want to do ctx.db.get(args.chatroomId) btw Glad you figured it out!

Using Filter does not work with ids as string?

Did you find this page helpful?