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

[acomito]

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:

#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]

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

[ShockiTV]

yes, it seems they have it the wrong direction in https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L207
First creating this.shadowProps which could be sacrificed to be mutated by Chart, but than passing the original read-only data from props.
I think if they pass shadowProps on that line and than use original data to compare props differences in https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L100 it would be the correct way.

[ShockiTV]

how it was resolved ?

[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

[ShockiTV]

So the library is still bugged as it is not React friendly, but issue closed as workaround was found...
It does not feel right

[mathiasjakobsen]

I too have this issue. Any way to avoid the hack?

[acomito]

@mathiasjakobsen I haven't checked to see if this package has been updated to handle it.

For what it's worth, the hack hasn't caused me any trouble to date. I popped it in back then and haven't had to think about it since.

[pringelmann]

Closing for now. Please supply a sandbox or code example with the latest versions of both libraries. If the problem persists, feel free to open a new issue.

[pieeee]

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
I was using the annotation plugin. When I write the annotations property statically it works. But when I fetch the from API it throws an error. You just saved me.

Can you tell me why that happened?