Apollo + react-chartjs-2 gives me Uncaught TypeError: Cannot add property _meta, object is not extensible

I’m not sure if this is an apollo issue, or a react issue. I keep getting Uncaught TypeError: Cannot add property _meta, object is not extensible

If I use another way to get the data (aside from apollo), such as a meteor method (http REST call, basically), I can pass the response in to my chart. If I grab the data via apollo, which gets added to the props, I can not pass that object into my chart.

I don’t think it has to do with this:

https://github.com/jerairrest/react-chartjs-2/issues/18

if I pass in an empty object, I don’t get any error. It’s only when I pass in the data via apollo/props

[acomito]

This line creates a copy of the props that can be passed in:

let chartData = JSON.parse(JSON.stringify(data.costData))

Works for now and it updates whenever my apollo query reruns

[acomito]

Clone the props seems to be the short-term workaround.

class MyChart extends React.Component {
	renderChart = () => {
		const { data } = this.props;
		if (data.loading) { return null }
		let chartData = JSON.parse(JSON.stringify(data.costData))
		return <Doughnut data={chartData} />
	}
	render(){
		return (
			<Card>
				<div className='content'>
					{this.renderChart()}
				</div>
			</Card>
		);
	}
}

further reading:

https://stackoverflow.com/questions/41582357/local-copy-of-react-prop-is-read-only