Apollo GraphQl Backend using Fetch API mutation

Question

I am running an apollo graphql backend and vanilla javascript fetch API in front-end it is running in chrome extension the Query works fine but the Mutation doesn't work and is returning a 400 error I am running this in Chrome extension and the query in there works

    fetch('https://dev.api.sharpstudy.io/graphql', {
        method: 'POST',
        headers: {
            authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
            Accept: "application/json, text/plain"

        },
        body: JSON.stringify({
            query: `
            mutation createBrowserTab {
                    createBrowserTab (userId: ${userId}, tabName: ${title}, tabDescription: ${title}, tabUrl:${url}, subjectId: ${subId}){
                      SavedBrowserTab {
                        tabId
                        tabUrl
                        tabName
                        tabDescription
                        subjectId
                        userId
                      }
                      message
                    } 
                  }
      `,
            // variables: {
            //     userId: userId,
            //     title: title,
            //     url: url,
            //     subId: subId


            // },
        }),
    })
        .then((res) => res.json())
        .then((result) => console.log(result));

Answer 1

I have finally solved it I had to save the mutation in a query and then wrap it in quotes and it works like a charm below is the code

var crateTabMutation = `
    mutation createBrowserTab {
            createBrowserTab (userId: ${userId}, tabName: "${tab.title}", tabDescription:  "${tab.title}", tabUrl:"${tab.url}", subjectId: "${subId}"){
              SavedBrowserTab {
                tabId
                tabUrl
                tabName
                tabDescription
                subjectId
                userId
              }
              message
            } 
          }
`


  fetch('https://dev.api.sharpstudy.io/graphql', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: crateTabMutation,

    }),
  })
    .then((res) => res.json())
    .then((result) => console.log(result));