GraphQL mutation using template literal types ${}

Question

I am currently having issues with Graphql mutation. Hard coding updating elements works but option 2 where I pass in argument does not. On Google Dev Tools Network, I see I am passing [object Object] as request for elements.

I tried changing to code below which resulted in type any error and duplicate identifier args error.

`{args.elements}`

Any tips appreciated. Also, I am not using variables as the api does not seem to accept them??

api.ts OPTION 1: WORKS

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 OPTION 2: DOES NOT WORK

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 data type

{
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

Your GQL query is a string and when you try elements:${args.elements} it will try to convert the object to a string which will most likely liik like [object Object], but what you need to do is convert it to a JSON string which will give you the output you are looking for.

Try:

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