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

Question

我目前遇到 Graphql 突变问题。硬编码更新元素有效，但我传入参数的选项 2 无效。在 Google 开发工具网络上，我看到我正在传递 [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]，但您需要做的是转换它到一个 JSON 字符串，它会给你你正在寻找的输出。

尝试：

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

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

GraphQL mutation using template literal types ${}

javascript

typescript

axios

graphql

template-literals