Passing multi line string in a Graphql mutation

Question

Newbie to GraphQL.

I have to pass a multiline string (verbatim) inside a mutation. I have to read back the text in a seperate application and save it as a text file.

Here is what I am trying to do. I am trying this using GraphiQL client talking to a testing server in GraphCool.

mutation {
  createMessage(fullName: "John K", 
    message: "some very long text
message that appears on multiple lines 
with line breaks."    
}

And I get this error

{
"error": "Syntax error while parsing GraphQL query. Invalid input \"\"some very long text\\n\", expected StringValue, BooleanValue, NullValue, Variable, Comments, ObjectValue, EnumValue, NumberValue or ListValue (line 6, column 13):\n    message: \"some very long text\n            ^"
}

I can resolve the issue by replacing all line breaks with \n.

mutation {
  createMessage(fullName: "John K", 
    message: "some very long text\nmessage that appears on multiple\nlines\nwith line breaks."    
}

However, I am not sure though if it is the right approach because when I read back the message text and view it as a text file line breaks do not appear and all I get are \n.

Please help...

Answer 1

Have tried with nodejs "graphql": "0.13.2", it is possible to do it by wrapping your multiline string with """:

(the line break should be still send to the graphql endpoint as \n, just graphiql probably help you escaped the \)

example:

this will fail message: "some very long text message that appears on multiple lines with line breaks."

this should pass message: """some very long text message that appears on multiple lines with line breaks."""

Answer 2

You could pass the string as a variable:

GraphQL query:

mutation($message: String) {
  createMessage(fullName: "John K", message: $message)
}

JS:

const message = `some very long text
message that appears on multiple lines 
with line breaks.`;

Not sure what GraphQL client you're using but from here you should be able to pass the variables to the client. With Apollo (react-apollo) it would look like this:

const CREATE_MESSAGE = gql`
  mutation($message: String) {
    createMessage(fullName: "John K", message: $message)
  }
`;

const message = `some very long text
message that appears on multiple lines 
with line breaks.`;

const CreateMessage = () => {    
  return (
    <Mutation mutation={CREATE_MESSAGE}>
      {(createMessage, { data }) => (
        <button onClick={() => createMessage({ variables: { message } })}>
          Create Message
        </button>
      )}
    </Mutation>
  );
};