使用模板文字类型 ${} 的 GraphQL 突变

如何解决使用模板文字类型 ${} 的 GraphQL 突变

我目前遇到 Graphql 突变问题。硬编码更新元素有效，但我传入参数的选项 2 无效。 在 Google Dev Tools Network 上，我看到我正在传递 [object Object] 作为元素请求。

我尝试更改为下面的代码，这导致键入任何错误和重复标识符 args 错误。

`{args.elements}`

任何提示表示赞赏。 另外，我没有使用变量，因为 api 似乎不接受它们？？

api.ts 选项 1：有效

export const mutateReq = (args: TW): AxiosPromise<TW[]> => {
  const query = `
mutation {
  update ( id:"${args.id}",name:"${args.name}",iconFile:"${args.iconFile}",elements:[
    [
     {id:"2",name:"element2",link:"https:",elements:[{id:"1",name:"element1",link:"https://",elements:[]}]}
    ],[
      {id:"3",name:"element3",elements:[{id:"4",name: "wr",link: "http://",elements: []}]}
    ],[]
 ]){
    id
    name
    iconFile
    elements {
      id name link
      elements {
        id name link
      }
    }
  }
}`;
  return axios({
    url: url,method: 'post',headers: {
      'Content-Type': 'application/json',},data: {
      query: query,});
};

api.ts 选项 2：不起作用

export const mutateReq = (args: TWorkSpace): AxiosPromise<TWorkSpace[]> => {
  const query = `
mutation {
  update ( id:"${args.id}" name:"${args.name}" iconFile:"${args.iconFile}" elements:${args.elements}){
    id
    name
    iconFile
    elements {
      id name link
      elements {
        id name link
      }
    }
  }
}`;
  return axios({
    url: url,});
};

参数数据类型

{
id: "1" name: "1" iconFile: "icon.png"
   elements: [
      [
       {id:"2",elements:[]}]}
      ],[
        {id:"3",link: "http:",elements: []}]}
      ],[]
   ]
}

解决方法

您的 GQL 查询是一个字符串，当您尝试 elements:${args.elements} 时，它会尝试将对象转换为很可能类似于 [object Object] 的字符串，但您需要做的是将其转换为一个 JSON 字符串，它将为您提供您正在寻找的输出。

试试：

elements:${JSON.stringify(args.elements)}