Apollo 서버에서 메일 보내기(메일 보내기)

요약:

프로비저닝

참조 코드

차리다

SMTP_HOST : "host123.example.com",
SMTP_PORT : 465,
SMTP_SECURE : true,
SMTP_AUTH_USER : "user123",
SMTP_AUTH_PASS : "123",
SEND_MAIL_ADDRESS : "[email protected]"

MONGODB_URL: 'mongodb+srv://user123:<pass123>@cluster999.sample123.net/test',
MONGODB_DB_NAME: 'test',  

GraphQL

  type Query {
    getToken : String
  }

type Mutation {
  sendMail(token: String, to_mail: String, title: String, body:  String ): String
}

Graph QL 테스트

query {
  getToken
}

mutation {
  sendMail(token: "W1bOAIoP-friD9ub41UBHCFADr0rsaGnXpAA" ,
  to_mail: "[email protected]"
  , title: "title-test", body: "body-123")
}

const LibMail = {
  sendMail :async function(args: IArgs){
    try {
console.log(args);
      const valid = await LibCsrf.validToken(args);
      const receiverEmailAddress = args.to_mail;
      console.log(Config.SMTP_HOST);
      console.log(Config.SMTP_PORT);
      console.log(Config.SMTP_AUTH_USER);
      console.log(Config.SMTP_AUTH_PASS);
      console.log(Config.SEND_MAIL_ADDRESS);
      let transporter = mailer.createTransport({
        host: Config.SMTP_HOST,
        port: Config.SMTP_PORT,
        secure: Config.SMTP_SECURE,
        auth: {
          user: Config.SMTP_AUTH_USER,
          pass: Config.SMTP_AUTH_PASS,
        },
      });
      let body = args.body;
      body = body.replace(/<br \/>/gi, '\r\n');
      let info = await transporter.sendMail({
        from: Config.SEND_MAIL_ADDRESS,
        to: receiverEmailAddress,
        subject: args.title,
        text: body,
      });
      console.log("Message sent: %s", info.messageId);
      console.log("Preview URL: %s", mailer.getTestMessageUrl(info));     
      return "OK";
    } catch (err) {
      console.error(err);
      throw new Error('Error , sendMail');
    }          
  },

}
export default LibMail;

프런트 참조/리믹스

메시지 화면

export default function Page() {
  console.log(Config);
  const keyUid = Config.COOKIE_KEY_USER_ID;
  // state
  const [message, setMessage] = useState("");
  const [messageError, setMessageError] = useState("");
  const [token, setToken] = useState("");
  
  useEffect(() => {
    (async() => {
      const data = await client.query({
        query: gql`
        query {
          getToken
        }      
        `,
        fetchPolicy: "network-only"
      });
  console.log(data.data.getToken);  
    setToken(data.data.getToken);  
    })()    
  },[])
  let onClick = async function(){
console.log("#onClick");
console.log(token);
    const mail = document.querySelector<HTMLInputElement>('#mail');
    const title = document.querySelector<HTMLInputElement>('#title');
    const body = document.querySelector<HTMLInputElement>('#body');
    let bodyText = body.value;
    bodyText = bodyText.replace(/\r?\n/g, '<br />');
console.log(bodyText);
    const result = await client.mutate({
      mutation:gql`
      mutation {
        sendMail(token: "${token}" ,
        to_mail: "${mail.value}"
        , title: "${title.value}", body: "${bodyText}")
      }                                  
    `
    });   
    console.log(result.data);
    if(result.data.sendMail !== 'OK'){
      setMessageError("Error, Send mail");
    }else{
      setMessage("Success, Send mail");
    }
  }  
  return (
    <div className="remix__page">
      { message ? 
      <div className="alert alert-success" role="alert">{message}</div> 
      : <div /> 
      }      
      { messageError ? 
      <div className="alert alert-danger" role="alert">{messageError}</div> 
      : <div /> }       
      <main>
        <h2>Mail Send</h2>
        <hr className="my-1" />
        <div className="col-sm-6">
          <label>
            <div>mail:</div>
            <input type="text" className="form-control" name="mail" id="mail" />
          </label>
        </div>
        <div className="col-sm-6">
          <label>
            <div>Title:</div>
            <input className="form-control" type="text" name="title" id="title" />
          </label>
        </div>
        <hr className="my-1" />
        <div className="col-sm-8">
          <label>
            <div>Body-Text:</div>
            <textarea className="form-control" rows={8} name="body" id="body"></textarea>
          </label>
        </div>        
        <hr className="my-1" />
        <button onClick={() => onClick()} className="btn btn-primary">Mail-Send
        </button>
        <hr />
        {/*
        */}
      </main>
    </div>
  );
}