How do I solve a "Payload is not serializable: Converting circular structure to JSON" error?

Question

How do I solve a "Payload is not serializable: Converting circular structure to JSON" error?

I'm currently exploring Apollo, GraphQL, and Material-UI. I've never come across this error and have been looking through Stack Overflow and blog posts for solutions.

I've been reading about circular structures but haven't been able to identify any in my current codebase.

Do I need to stringify the variables going into createLink?

Full error message:

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

Thank you for checking out the question.

Answer 1

The error is probably caused by undefined properties value in the variables object passed into createLink().

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