Strapi graphql mutation Syntax Error: Unterminated string

Question

I always get Syntax Error: Unterminated string when I try to update my database using javascript strapi sdk. this.chapter.content is a html string generated by ckeditor. How can I escape this string to update my database using graphql?

async updateChapter() {
      const q = `
            mutation {
              updateChapter(input: {
                where: {
                  id: "${this.$route.params.chapterId}"
                },
                data: {
                  content: "${this.chapter.content.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/(?:\r\n|\r|\n)/g, '\n')}"
                  title: "${this.chapter.title}"
                }
              }) {
                chapter{
                  title
                  id
                  content
                }
              }
            }
      `;
      const res = await strapi.request("post", "/graphql", {
        data: {
          query: q
        }
      });
      this.chapter = res.data.chapter;
    }

Answer 1

Technically you could use block string notation to get around this issue. However, you really should supply dynamic input values using variables instead of string interpolation. This way you can easily provide any of sort of values (strings, numbers, objects, etc.) and GraphQL will parse them accordingly -- including strings with line breaks.

const query = `
  mutation MyMutation ($chapterId: ID!, $content: String!, $title: String!) {
    updateChapter(input: {
      where: {
        id: $chapterId
      },
      data: {
        content: $content
        title: $title
      }
    }) {
      chapter{
        title
        id
        content
      }
    }
  }
`
const variables = {
  chapterId: '...',
  content: '...',
  title: '...',
}
const res = await strapi.request("post", "/graphql", {
  data: {
    query,
    variables,
  },
})

Note that $chapterId may need to be of the type String! instead if that's what's called for in the schema. Since variables can also be input object types, instead of providing 3 different variables, you could also provide a single variable to be passed to the input argument instead:

const query = `
  mutation MyMutation ($input: SomeInputObjectTypeHere!) {
    updateChapter(input: $input) {
      chapter{
        title
        id
        content
      }
    }
  }
`
const variables = {
  input: {
    where: {
      id: '...',
    },
    data: {
      content: '...',
      title: '...',
    },
  },
}

Again, just replace SomeInputObjectTypeHere with the appropriate type in your schema.