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));

Is it the content script? Do you have permissions for this URL in manifest.json? — wOxxOm, Feb 08 '22 at 10:23
yes it is in the content script and yes the URL has permission in the manifest.json that's why I am able to run the query but I am trying to run the mutation — Max, Feb 09 '22 at 05:57
See [this answer](https://stackoverflow.com/a/55292071/3959875). — wOxxOm, Feb 09 '22 at 10:56

score 0 · Accepted Answer · answered Feb 11 '22 at 23:24

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));

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Feb 12 '22 at 06:52

Apollo GraphQl Backend using Fetch API mutation

1 Answers1