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: []}]}
      ],
      []
   ]
}

avoid using string manipulations/literals, use variables instead https://graphql.org/learn/queries/#variables — xadm, Mar 31 '21 at 08:02

score 0 · Accepted Answer · answered Mar 31 '21 at 03:59

0

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

answered Mar 31 '21 at 03:59

Jack Campbell

154
6

This works for the question asked. However as I was storing key with quotations, it returned error (eg: {"elements": {"id":"1"}). Wondering why graphql returns data with "key" but does not accept "" when mutating... – javascriptnoob Mar 31 '21 at 04:44
@javascriptnoob can you clarify what you mean by storing key with quotations? Can you provide the code snippet and the full error? – Jack Campbell Mar 31 '21 at 04:49
I am storing data from graphql query in redux state. The data that I receive is stored like { "id": "1" ....}. In the mutation above I wanted to use my state as args. However since it is stored with "" on keys ("id" for example), I cannot just use the data as mutation update accepts id="1" but not "id":"1". – javascriptnoob Mar 31 '21 at 04:54
1

My bad, you should actually use this: JSON.stringify(obj).replace(/"([^"]+)":/g, '$1:') – Jack Campbell Mar 31 '21 at 05:10
1

^ this will strip the quotes from all of the keys, although it will also strip quotes from edge cases like '{ "id": "th\\":ing" }' so be aware – Jack Campbell Mar 31 '21 at 05:10

GraphQL mutation using template literal types ${}

1 Answers1