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

Created on 12 Jul 2017 · 8Comments · Source: reactchartjs/react-chartjs-2

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

Source

acomito

Most helpful comment

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

All 8 comments

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

acomito on 12 Jul 2017

👍2

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 on 12 Jul 2017

how it was resolved ?

ShockiTV on 17 Jul 2017

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 on 17 Jul 2017

👍1

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

ShockiTV on 17 Jul 2017

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

mathiasjakobsen on 26 Sep 2017

@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.

acomito on 26 Sep 2017

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.