sending value of my textarea with graphql-CodePudding

I hope you all have a great day. I am coding my own personal website and I have a section called to contact me. The problem I have with this section is that I am trying to send my client email to my email and when I am trying to send their message to my server through Graphql I get this error

[
    {
        "message": "Syntax Error: Unterminated string.",
        "locations": [
            {
                "line": 3,
                "column": 123
            }
        ]
    }
]

the request I sent to my server is

'\n        mutation{\n            sendEmail(EmailInput: {name: "Test name", email: "[email protected]", 
subject: "this is test subject", message: "\n         
   this is the first line \nthis is the second line\nwhen I have multiple lines I have these problem\n
            "}) {\n                success\n                message\n              }\n          }\n        '

I don't know how to fix it I don't know why I get this error. I used fetch to send my code backend :

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

const result = await fetch("http://localhost:2882/graphql", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: emailMutationQuery,
      }),
    });
    const convertedResult = await result.json();

CodePudding user response：

GraphQL supports variables, which can be used to supply input data separately from the query. The variables are just a separate JSON-encoded object. This avoids syntactic difficulties (and potential security risks!) from trying to embed the inputs directly in the query.

For this you'd write a fixed query, that declares and uses the variable, but doesn't depend on the per-request inputs

const emailMutationQuery = `
mutation SendEmail($emailInput: SendEmailInput!) {
  sendEmail(EmailInput: $emailInput) {
    success
    message
  }
}
`;

You'd then create a second object containing the variable(s). The top-level keys match what you declare in the GraphQL operation line, and their content matches the corresponding GraphQL input types.

const variables = {
  emailInput: {
    name: senderName.value,
    email: senderEmail.value,
    subject: senderSubject.value,
    message: senderMessage.value
  }
};

Note that this is an ordinary Javascript object, and we haven't quoted or escaped anything here.

Now when we make the request, we send the query and variables together

const result = await fetch("http://localhost:2882/graphql", {
  ...,
  body: JSON.stringify({
    query: emailMutationQuery,
    variables: variables
  })
});

Things like newlines in the message content will be escaped in the variables block, and get passed through correctly to the underlying GraphQL engine.

CodePudding user response：

I actually find a solution for it but feel free to share your answers here. The solution I found for this problem was that you have to use JSON.stringify() for the textarea. you have to pass your textarea value to this function and js will take care of the rest. my code now looks like this

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

I hope this help you guys.