在嵌套对象中正确字符串化 JSON

Question

这是我传递的 JSON（console.log 结果）

boundary: Array(1)
0:
points: Array(98)
0: {x: 117.5, y: 99}
1: Point {x: 116.5, y: 100}
2: Point {x: 116.5, y: 103}
3: Point {x: 114.5, y: 109}
4: Point {x: 113.5, y: 116}
5: Point {x: 112.5, y: 124}
6: Point {x: 111.5, y: 134}
7: Point {x: 111.5, y: 142}
8: Point {x: 111.5, y: 151}
9: Point {x: 111.5, y: 160}
10: Point {x: 112.5, y: 170}
11: Point {x: 113.5, y: 179}
12: Point {x: 114.5, y: 187}
13: Point {x: 116.5, y: 195}
14: Point {x: 118.5, y: 202}
15: Point {x: 121.5, y: 209}
16: Point {x: 125.5, y: 215}
17: Point {x: 130.5, y: 221}

caption: ""
config:
addGif: false
addImage: false
addSticker: false
addText: true
editCaption: true
enableNft: false
__proto__: Object
imageUrl: "https://develop-darwinapp-me.s3.ap-southeast-1.amazonaws.com/1622629305136%20-%20alyans-29.11.jpg"
nft: ""
visibility: [""]

我正在对它进行字符串化，因为我正在使用 axios（不使用 apollo）将它传递给 graphql api。因此在 inout graphql 查询中将其作为字符串，但是

boundary : [BoumdaryInput]

被描述为（在graphql中）

boundary {
  type: 'sometype'
  points: [{x, y}]
}

但是 JSON stringify 转换为字符串我的 points 对象中的键

我是以下查询

  const data = await mutate(
    `addPost(input: {
       loginToken: "${token}",
       caption: "${input.caption}",
       imageUrl : "${input.imageUrl}",
       nft: "${input.nft}",
       config: {
        editCaption : ${input.config.editCaption},
        addText : ${input.config.addText},
        addImage : ${input.config.addImage}
       },
       boundary: {
         type : "${input.boundary[0].type}",
         points : [{
           x: ${input.boundary[0].points.map(p => p.x)},
           y: ${input.boundary[0].points.map(p => p.y)}
       }],
       visibility : ${JSON.stringify(input.visibility)}
     })`

输出：

config: {\n        editCaption : true,\n        addText : true,\n        addImage : false\n       },\n       boundary: {\n         type : \"0\",\n         points : {\n           x: 90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,90,91,91,92,93,94,95,97,99,100,101,103,104,107,108,112,114,118,121,125,128,130,133,137,138,141,145,147,149,151,153,156,158,162,164,168,171,176,178,180,181,183,186,187,191,193,195,198,199,201,202,204,207,208,211,213,214,217,218,224,230,235,238,241,242,246,248,251,253,254,255,256,257,258,259,262,265,266,268,269,271,272,273,275,276,278,279,280,281,282,283,286,287,289,292,294,295,296,297,298,299,301,302,304,306,307,308,309,311,312,313,314,315,317,318,319,318,317,315,313,311,310,308,307,307,306,306,305,304,303,302,301,301,301,301,301,301,301,301,301,301,301,301,300,299,298,296,294,291,289,286,280,278,277,276,275,273,270,268,267,265,264,263,262,261,260,260,260,261,263,264,266,268,269,271,273,274,275,277,278,279,279,278,277,276,275,273,272,271,269,268,267,266,265,264,263,262,261,260,259,258,257,255,253,250,249,246,242,238,235,232,229,226,225,224,223,221,220,219,217,216,212,209,208,207,207,206,206,206,206,206,206,206,206,206,206,206,206,206,206,206,206,207,208,208,208,208,208,208,208,208,208,208,208,208,208,208,208,208,208,208,209,209,209,210,210,210,210,210,210,210,210,210,210,210,210,210,208,206,206,206,206,205,204,203,203,202,201,200,198,198,198,198,198,198,198,199,197,193,190,186,181,166,158,154,152,148,147,142,140,136,135,133,131,129,127,125,120,119,118,117,117,116,115,114,112,111,110,109,108,107,106,105,104,103,102,100,99,97,96,95,94,92,91,90,89,\n           y: 341,340,336,331,325,320,314,309,304,299,293,288,283,278,273,268,263,259,256,253,251,248,246,245,244,242,240,239,237,236,235,234,233,232,231,229,227,225,223,221,219,218,216,215,213,212,211,210,209,208,207,206,205,204,203,203,202,202,201,200,199,198,198,198,197,197,197,196,195,194,194,194,193,193,192,192,191,190,189,189,188,188,188,187,187,186,185,185,184,184,184,184,183,182,182,181,180,180,179,179,178,177,176,175,174,174,173,173,172,171,170,169,169,169,169,169,168,167,167,166,165,164,163,163,162,161,159,159,159,158,158,158,157,157,157,156,155,155,155,155,155,155,155,155,155,155,155,155,155,156,156,157,158,159,160,161,162,163,165,166,167,168,170,171,173,174,176,177,179,181,183,185,187,188,190,192,193,194,195,196,197,198,199,200,202,203,205,205,205,205,205,205,205,204,204,204,204,203,202,201,200,199,198,196,195,195,196,197,198,201,203,205,207,209,210,211,213,214,215,216,217,218,219,220,221,221,221,222,222,222,223,224,225,226,227,228,230,231,233,234,235,236,238,239,240,241,241,241,241,241,241,241,241,241,241,241,242,243,245,246,247,247,250,254,255,257,258,260,262,263,264,265,267,268,269,270,272,273,274,275,277,279,280,283,285,287,288,290,292,294,298,301,303,306,309,312,315,318,321,323,326,328,331,332,334,336,337,339,341,343,346,348,350,352,353,360,362,364,370,378,379,380,382,384,385,386,387,389,390,391,392,393,394,395,396,397,398,399,399,398,397,395,394,388,385,384,384,383,383,381,380,378,378,377,376,375,374,373,366,365,364,363,362,360,358,357,356,354,353,351,350,348,347,347,346,345,345,344,344,343,343,343,343,342,341,340,339\n       },\n       visibility : [\"\"]\n     })}"}

这不是我所期待的

如何正确地将其序列化为字符串，以便points 保留为对象中的键而不是字符串？

Answer 1

您应该将您的点转换为 JSON 对象（而不是 Point 类）。

使用更新后的代码，它应该如下所示：

const points = input.boundary[0].points.map(point => ({ x: point.x, y: point.y})),

const data = await mutate(
  `addPost(input: {
    ...
    boundary: {
      type : "${input.boundary[0].type}",
      points : ${JSON.stringify(points)},
      visibility : ${JSON.stringify(input.visibility)}
  })`