GraphQL发送多行文本报错：Unterminated string 问题求助

错误原因 #

• 你的message字段值包含未转义的换行符，GraphQL标准双引号包裹的字符串不允许直接存在换行，解析器会判定字符串未闭合，抛出Unterminated string错误。
• 直接用模板字符串拼接用户输入到GraphQL查询中，不仅容易触发语法问题，还存在GraphQL注入的安全风险。

修复方法 #

方法1：转义换行符 #

在将用户输入插入查询前，把换行符转义为\n：

// 处理用户输入中的换行
const escapedMessage = senderMessage.value.replace(/\n/g, '\\n');

// 拼接查询
const emailMutationQuery = `
mutation{
    sendEmail(EmailInput: {name: "${senderName.value}", email: "${senderEmail.value}", subject: "${senderSubject.value}", message: "${escapedMessage}"}) {
        success
        message
      }
  }
`;

方法2：使用GraphQL多行字符串语法 #

GraphQL支持用三个双引号"""包裹多行字符串，可直接保留换行无需转义：

const emailMutationQuery = `
mutation{
    sendEmail(EmailInput: {name: "${senderName.value}", email: "${senderEmail.value}", subject: "${senderSubject.value}", message: """${senderMessage.value}"""}) {
        success
        message
      }
  }
`;

方法3：推荐使用GraphQL变量（最安全） #

通过变量传递用户输入，彻底避免字符串拼接带来的语法错误和安全问题：

// 定义带变量的查询模板
const emailMutationQuery = `
mutation SendEmail($input: EmailInput!) {
  sendEmail(EmailInput: $input) {
    success
    message
  }
}
`;

// 组装变量数据
const variables = {
  input: {
    name: senderName.value,
    email: senderEmail.value,
    subject: senderSubject.value,
    message: senderMessage.value
  }
};

// 发送请求
const result = await fetch("http://localhost:2882/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    query: emailMutationQuery,
    variables // 传入变量
  }),
});
const convertedResult = await result.json();

内容的提问来源于stack exchange，提问作者Farbod Shabani