Messages

1

Help for ParamQuery Grid (free version) / Paramquery data not updating when using React

« on: December 30, 2021, 02:05:27 pm »

Hello,
I am using Paramquery 3.5.1 (the 'pqgridf' NPM package) in a new React app, created by 'create-react-app'. This is my Paramquery component, according to the docs, slightly modified to accomodate for data coming via props and not being local:

Code: [Select]

mport React, { Component } from 'react';
import pq from 'pqgridf';

class TableEditor extends Component {

  gridref = React.createRef();

  componentDidMount() {
    this.options = this.props.grid;
    this.grid = pq.grid(this.gridref.current, this.options);
  }

  componentDidUpdate(prevProps) {
    console.log("Updating grid: ", this.options);
    this.options = Object.assign({}, this.options, this.props.grid);  // completely replace this.options
    this.grid.refreshDataAndView();
  }

  render() {
    return <div id="grid" ref={this.gridref}></div>
  };
}

export default TableEditor;

The component is called by the parent component in this way:

Code: [Select]

<TableEditor grid={this.state.grid} />

When `this.state.grid` changes, the TableEditor component is re-rendered, and `this.props.grid` inside the TableEditor component has the correct values, but the PQ grid shows no data, it's empty, despite `this.grid.refreshDataAndView();` in the `componentDidUpdate()` call. I can see the console output with the updated data, but the grid doesn't update. This doesn't even work when calling `pq.grid(...)` again in the `componentdidUpdate()` method, the grid is always empty.

But when my editor autosaves a change *after* loading the grid, and the webpack webserver then refreshes the browser, *then* my data appears. So I'm guessing this is a timing issue or a race condition, but I can't find the root cause.

How does PQgrid detect changed data or options when using React, what am I missing?
Do I actually *need* React to re-render the PQ grid when data changes, or can PQ handle this on its own?

Thank you!