使用 Fetch API 突变的 Apollo GraphQl 后端

Apollo GraphQl Backend using Fetch API mutation

我是 运行 apollo graphql 后端和 vanilla javascript fetch API 在前端它是 运行 在 chrome extension 查询工作正常但突变不工作并返回 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));


我终于解决了它我不得不在查询中保存突变然后用引号引起来它就像一个魅力 下面是代码

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