ideceddy Posts - Answer Overflow

ideceddy

•Created by ideceddy on 5/4/2024 in #questions

Code seems to stop execution

Im trying to send an email using resend. Locally, the email sends just fine, but when I host it on Vercel, it looks like the function stops execution. One moment the code is running spitting out logs and then it goes silent. It stops right when i get to the call to send the email. I don't see any timeouts so im confused as to why it fails. It is kind of strange the way I call the function and that is the only thing i can think. Its a server action that calls a server side trpc query. That query fires off a chain of functions that should result in an email.

'use server'
import { ClientVerification, AgentMeetingApproval, ClientConfirmation } from "../_components/emailTemplates";
import { verifyClientToken, verifyAgentToken, createAgentToken } from "../_actions/tokens";
import { Resend } from "resend";
import type { emailPayload, email } from "../_types/types";

export async function sendClientVerification(payload: emailPayload) {
  console.log("Building client verification email"); 
  const email = {
    from: payload.from,
    to: payload.to,
    subject: payload.subject,
    react: ClientVerification({
      fullName: payload.props.fullName,
      phoneNumber: payload.props.phoneNumber,
      dateString: payload.props.dateString,
      jwtTokenEncoded: payload.props.token,
    }),
    text: payload.text,
  } as email;
  console.log(email);
  try {
    const data = await sendEmail(email);
    console.log("email data", data);
    return true;
  } catch (error) {
    console.log(error);
  }
}

async function sendEmail(email: email): Promise<Response> {
  console.log("Sending Email Started");
  const NEXT_RESEND_API_KEY = getResendAPIKey();
  const resend = createResend(NEXT_RESEND_API_KEY);
  const response = await send(resend, email)
  console.log(response);
  return response
}

function createResend(NEXT_RESEND_API_KEY: string): Resend {
  try {
    const resend = new Resend(NEXT_RESEND_API_KEY);
    console.log(`Created resend object`);
    return resend;
  } catch (error) {
    console.log(error);
    throw new Error("Failed to create Resend object");
  }
}

function getResendAPIKey(): string {
  const { NEXT_RESEND_API_KEY } = process.env;
  console.log(`Getting resend key ${NEXT_RESEND_API_KEY}`);
  if (!NEXT_RESEND_API_KEY) {
    console.log("No API Token");
    throw new ReferenceError("Resend API key is not set");
  }
  return NEXT_RESEND_API_KEY;
}

async function send(resend: Resend, email: email): Promise<Response>  {
  try {
    console.log("trying to send the email");
    const data = await resend.emails.send(email);
    return Response.json({data});
  } catch (error) {
    console.log(error);
    throw new Error("Could not send email");
  }
}

'use server'
import { ClientVerification, AgentMeetingApproval, ClientConfirmation } from "../_components/emailTemplates";
import { verifyClientToken, verifyAgentToken, createAgentToken } from "../_actions/tokens";
import { Resend } from "resend";
import type { emailPayload, email } from "../_types/types";

export async function sendClientVerification(payload: emailPayload) {
  console.log("Building client verification email"); 
  const email = {
    from: payload.from,
    to: payload.to,
    subject: payload.subject,
    react: ClientVerification({
      fullName: payload.props.fullName,
      phoneNumber: payload.props.phoneNumber,
      dateString: payload.props.dateString,
      jwtTokenEncoded: payload.props.token,
    }),
    text: payload.text,
  } as email;
  console.log(email);
  try {
    const data = await sendEmail(email);
    console.log("email data", data);
    return true;
  } catch (error) {
    console.log(error);
  }
}

async function sendEmail(email: email): Promise<Response> {
  console.log("Sending Email Started");
  const NEXT_RESEND_API_KEY = getResendAPIKey();
  const resend = createResend(NEXT_RESEND_API_KEY);
  const response = await send(resend, email)
  console.log(response);
  return response
}

function createResend(NEXT_RESEND_API_KEY: string): Resend {
  try {
    const resend = new Resend(NEXT_RESEND_API_KEY);
    console.log(`Created resend object`);
    return resend;
  } catch (error) {
    console.log(error);
    throw new Error("Failed to create Resend object");
  }
}

function getResendAPIKey(): string {
  const { NEXT_RESEND_API_KEY } = process.env;
  console.log(`Getting resend key ${NEXT_RESEND_API_KEY}`);
  if (!NEXT_RESEND_API_KEY) {
    console.log("No API Token");
    throw new ReferenceError("Resend API key is not set");
  }
  return NEXT_RESEND_API_KEY;
}

async function send(resend: Resend, email: email): Promise<Response>  {
  try {
    console.log("trying to send the email");
    const data = await resend.emails.send(email);
    return Response.json({data});
  } catch (error) {
    console.log(error);
    throw new Error("Could not send email");
  }
}

In trpc land

  sendClientVerification: publicProcedure
    .input(jwtPayloadSchema)
    .query(async ({ input }) => {
      console.log("TRPC CALL");
      const token = await createClientToken(input);
      const email = {
        from: "Website Assistant <webassistant@orlandohomesrealty.org>",
        to: ["edwingmundo2@gmail.com"],
        subject: "Orlando Homes Verify Email",
        props: {
          fullName: input.fullName,
          email: input.email,
          phoneNumber: input.phoneNumber,
          token: token,
          dateString: input.dateString,
        },
        text: "Please help verify your email",
      } as emailPayload;

      const data = await sendClientVerification(email).catch((error) => {
        console.log(error);
      });
      console.log(data);
      return true
    }),

  sendClientVerification: publicProcedure
    .input(jwtPayloadSchema)
    .query(async ({ input }) => {
      console.log("TRPC CALL");
      const token = await createClientToken(input);
      const email = {
        from: "Website Assistant <webassistant@orlandohomesrealty.org>",
        to: ["edwingmundo2@gmail.com"],
        subject: "Orlando Homes Verify Email",
        props: {
          fullName: input.fullName,
          email: input.email,
          phoneNumber: input.phoneNumber,
          token: token,
          dateString: input.dateString,
        },
        text: "Please help verify your email",
      } as emailPayload;

      const data = await sendClientVerification(email).catch((error) => {
        console.log(error);
      });
      console.log(data);
      return true
    }),

And i start the chain with

export async function sendClientVerificationApi(tokenPayload: jwtPayload) {
  api.emails.sendClientVerification(tokenPayload).catch((error) => {
    console.log(error);
  });
  console.log("sending");

export async function sendClientVerificationApi(tokenPayload: jwtPayload) {
  api.emails.sendClientVerification(tokenPayload).catch((error) => {
    console.log(error);
  });
  console.log("sending");

2 replies

TTCTheo's Typesafe Cult

•Created by ideceddy on 2/23/2024 in #questions

Sharing data across client & server components?

4 replies

TTCTheo's Typesafe Cult

•Created by ideceddy on 6/12/2023 in #questions

How can I run a query only one time when the page loads?

I am trying to create a record of a session when the page loads so I can gather user metrics. Initially I thought that I could create a state variable (true | false) Then in a if statement I check if the state is false run my query then set the state to ture.

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

When I try this I get an error: Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. When I run the query outside of the if block anytime the component remounts a new session record is created in my database. My goal is to create a session when the page loads, get the id of the new session added to my database and use that ID to update the session periodically as the user interacts with my application. Can I please get some guidance on how to do this? As some extra context when I try to use my query in a useEffect block It errors out saying that I cant run a hook inside a hook.

53 replies

TTCTheo's Typesafe Cult

•Created by ideceddy on 6/12/2023 in #questions

no-floating-promises error when using TRPC query.

I have this query using TRPC but am getting the following error. I feel like I should be resolving the prommis and don't get why this is happening. At a quick glance can anyone give some guidance?

Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.  @typescript-eslint/no-floating-promises

Error: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.  @typescript-eslint/no-floating-promises

add_session: publicProcedure
    .query( async ({ctx}) => {
      try {
        const existing_ip_address = await ctx.prisma.ip_address.findFirst({
          where: {
            ipAddress: ctx.userData['Ip'] as string,
          },
        });
        if (existing_ip_address) {
          console.log('IP address already exists', existing_ip_address);
        } else {
          const new_ip_address = await ctx.prisma.ip_address.create({
            data: {
              ipAddress: ctx.userData['Ip'] as string,
            }
          });
          console.log('New IP address added to DB:', new_ip_address);
        }
        const db_ip = await ctx.prisma.ip_address.findMany({
          where: { ipAddress: ctx.userData['Ip'] as string },
        });
        if (db_ip) {
          console.log(db_ip);
          const create_session = await ctx.prisma.web_session.create({
            data: {
              ipAddress: {
                connect: { id: db_ip[0]['id'] },
              },
              userAgent: ctx.userData['user_agent'] as string, 
            },
          });
          return create_session;
        }
      } catch (error) {
        console.log("error could not add session to db");
        throw error;
      } finally {
        ctx.prisma.$disconnect();
      }
    }),

add_session: publicProcedure
    .query( async ({ctx}) => {
      try {
        const existing_ip_address = await ctx.prisma.ip_address.findFirst({
          where: {
            ipAddress: ctx.userData['Ip'] as string,
          },
        });
        if (existing_ip_address) {
          console.log('IP address already exists', existing_ip_address);
        } else {
          const new_ip_address = await ctx.prisma.ip_address.create({
            data: {
              ipAddress: ctx.userData['Ip'] as string,
            }
          });
          console.log('New IP address added to DB:', new_ip_address);
        }
        const db_ip = await ctx.prisma.ip_address.findMany({
          where: { ipAddress: ctx.userData['Ip'] as string },
        });
        if (db_ip) {
          console.log(db_ip);
          const create_session = await ctx.prisma.web_session.create({
            data: {
              ipAddress: {
                connect: { id: db_ip[0]['id'] },
              },
              userAgent: ctx.userData['user_agent'] as string, 
            },
          });
          return create_session;
        }
      } catch (error) {
        console.log("error could not add session to db");
        throw error;
      } finally {
        ctx.prisma.$disconnect();
      }
    }),

2 replies

Gaming

Programming