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

Question

我目前遇到 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",link:"https://",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,
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    data: {
      query: query,
    },
  });
};

args 数据类型

{
id: "1" name: "1" iconFile: "icon.png"
   elements: [
      [
       {id:"2",name:"element2",link:"https://",elements:[{id:"1",name:"element1",link:"https://",elements:[]}]}
      ],
      [
        {id:"3",name:"element3",link:"https://",elements:[{id:"4", name: "wr", link: "http:", elements: []}]}
      ],
      []
   ]
}

Answer 1

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

尝试：

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