Apollo GraphQl 后端使用 Fetch API 突变

Question

我正在运行 apollo graphql 后端，并在前端运行 vanilla javascript fetch API，它在 chrome 扩展中运行 查询工作正常，但突变不起作用并返回 400 错误 我正在 Chrome 扩展程序中运行它，并且其中的查询有效

    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

我终于解决了这个问题，我必须将突变保存在查询中，然后将其用引号引起来，它就像一个魅力 下面是代码

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