graphql - 如何解决 "Payload is not serializable: Converting circular structure to JSON"错误？

Question

如何解决“有效负载不可序列化:将循环结构转换为 JSON”错误？

我目前正在探索 Apollo、GraphQL 和 Material-UI。我从来没有遇到过这个错误，并且一直在通过 Stack Overflow 和博客文章寻找解决方案。

我一直在阅读有关循环结构的资料，但无法在我当前的代码库中找到任何内容。

我是否需要对进入 createLink 的变量进行字符串化？

完整错误信息:

Network request failed. Payload is not serializable: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLInputElement'
    |     property '__reactFiber$b12dhgch1cn' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle

LinkList.js:

export default function LinkList() {
  const classes = useStyles();
  const { loading, error, data } = useQuery(LINK_QUERY);

  if (loading) {
    return (
      <Typography component={"span"}>
        <span className={classes.grid}>Fetching</span>
      </Typography>
    );
  }

  if (error) {
    return (
      <Typography component={"span"}>
        <span className={classes.grid}>Error! ${error.message}</span>;
      </Typography>
    );
  }

  const linksToRender = data.allLinks;

  return (
    <Typography component={"span"}>
      <div className={classes.root}>
        <Box className={classes.box}>
          {linksToRender.map((link, index) => (
            <Link
              className={classes.link}
              key={link.id}
              link={link}
              index={index}
            />
          ))}
        </Box>
      </div>
    </Typography>
  );
}

CreateLink.js:

export default function CreateLink() {
  const [state, setState] = useState({
    slug: "",
    description: "",
    link: ""
  });

  const classes = useStyles();

  function handleChange(e) {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value
    });
  }

  const [createLink] = useMutation(CREATE_LINK);
  function handleSubmit(e) {
    e.preventDefault();
    console.log(state.slug);
    createLink({
      variables: {
        slug: state.slug,
        description: state.description,
        link: state.link
      }
    });
    setState({
      slug: "",
      description: "",
      link: ""
    });
  }

  return (
    <Grid container className={classes.root}>
      <form onSubmit={handleSubmit}>
        <Grid item>
          <TextField
            className={classes.textfield}
            inputProps={{ maxLength: 12 }}
            id="slug"
            name="slug"
            label="Link Alias"
            variant="outlined"
            type="text"
            value={state.slug}
            onChange={handleChange}
          />
        </Grid>
        <Grid item>
          <TextField
            required
            className={classes.textfield}
            id="description"
            name="description"
            label="Description"
            variant="outlined"
            type="text"
            value={state.description}
            onChange={handleChange}
          />
        </Grid>
        <Grid item>
          <TextField
            required
            className={classes.textfield}
            id="link"
            name="link"
            label="URL"
            variant="outlined"
            type="text"
            value={state.link}
            onChange={handleChange}
          />
        </Grid>
        <Grid item>
          <Button variant="outlined" type="submit" className={classes.button}>
            Shorten URL
          </Button>
        </Grid>
      </form>
    </Grid>
  );
}

感谢您查看问题。

Answer 1

该错误可能是由于 variables 对象中的 undefined 属性值传递给 createLink() 引起的。

createLink({
    variables: {
      slug: state.slug,
      description: state.description,
      link: state.link
    }
})