reactjs - ag グリッド反応を処理し、チェックボックスのグリッドをレンダリングする

Question

私はag-grid、react-apolloをいじっていますが、すべてうまくいっているようです。ここでの目標は、チェック ボックスをクリックしてミューテーション / ネットワーク リクエストを発生させ、一部のデータを変更することです。私が抱えている問題は、行全体を再描画することです。これは非常に遅くなる可能性がありますが、セル自体を更新しようとしているだけなので、すばやくユーザーエクスペリエンスが向上します。私が持っていた考えの1つは、楽観的な更新を行い、キャッシュを更新する/キャッシュを利用することでした。皆さんはどのようなアプローチをとっていますか。

列と行の両方のデータは、アポロ クエリを介して取得されます。

いくつかのコードを次に示します。

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { data, colDef } = this.props;
    // const { externalData, entitySpec, fieldSpec } = this.props.api;
    // console.log(data);
    // console.log(colDef);
    if (checked) {
      this.props.api.assign(data.id, colDef.id);
      return;
    }
    this.props.api.unassign(data.id, colDef.id);
    return;
  }

  handleCheckboxChange(event) {
    const checked = !this.state.value;
    this.updateGridAssociation(checked);
    this.setState({ value: checked });
  }

  render() {
    return (
      <Checkbox
        checked={this.state.value}
        onChange={this.handleCheckboxChange}
      />
    );
  }
}

export default CheckboxItem;

グリッド自体:

import React, { Component } from "react";
import { graphql, compose } from "react-apollo";
import gql from "graphql-tag";
import Grid from "@material-ui/core/Grid";
import _ from "lodash";
import { AgGridReact } from "ag-grid-react";
import { CheckboxItem } from "../Grid";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-material.css";

class UserRole extends Component {
  constructor(props) {
    super(props);
    this.api = null;
  }

  generateColumns = roles => {
    const columns = [];
    const initialColumn = {
      headerName: "User Email",
      editable: false,
      field: "email"
    };
    columns.push(initialColumn);
    _.forEach(roles, role => {
      const roleColumn = {
        headerName: role.name,
        editable: false,
        cellRendererFramework: CheckboxItem,
        id: role.id,
        suppressMenu: true,
        suppressSorting: true
      };
      columns.push(roleColumn);
    });
    if (this.api.setColumnDefs && roles) {
      this.api.setColumnDefs(columns);
    }
    return columns;
  };

  onGridReady = params => {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.assign = (userId, roleId) => {
      this.props.assignRole({
        variables: { userId, roleId },
        refetchQueries: () => ["allUserRoles", "isAuthenticated"]
      });
    };

    this.api.unassign = (userId, roleId) => {
      this.props.unassignRole({
        variables: { userId, roleId },
        refetchQueries: () => ["allUserRoles", "isAuthenticated"]
      });
    };
    params.api.sizeColumnsToFit();
  };

  onGridSizeChanged = params => {
    const gridWidth = document.getElementById("grid-wrapper").offsetWidth;
    const columnsToShow = [];
    const columnsToHide = [];
    let totalColsWidth = 0;
    const allColumns = params.columnApi.getAllColumns();
    for (let i = 0; i < allColumns.length; i++) {
      const column = allColumns[i];
      totalColsWidth += column.getMinWidth();
      if (totalColsWidth > gridWidth) {
        columnsToHide.push(column.colId);
      } else {
        columnsToShow.push(column.colId);
      }
    }
    params.columnApi.setColumnsVisible(columnsToShow, true);
    params.columnApi.setColumnsVisible(columnsToHide, false);
    params.api.sizeColumnsToFit();
  };

  onCellValueChanged = params => {};

  render() {
    console.log(this.props);
    const { users, roles } = this.props.userRoles;
    if (this.api) {
      this.api.setColumnDefs(this.generateColumns(roles));
      this.api.sizeColumnsToFit();
      this.api.externalData = roles;
      this.api.setRowData(_.cloneDeep(users));
    }
    return (
      <Grid
        item
        xs={12}
        sm={12}
        className="ag-theme-material"
        style={{
          height: "80vh",
          width: "100vh"
        }}
      >
        <AgGridReact
          onGridReady={this.onGridReady}
          onGridSizeChanged={this.onGridSizeChanged}
          columnDefs={[]}
          enableSorting
          pagination
          paginationAutoPageSize
          enableFilter
          enableCellChangeFlash
          rowData={_.cloneDeep(users)}
          deltaRowDataMode={true}
          getRowNodeId={data => data.id}
          onCellValueChanged={this.onCellValueChanged}
        />
      </Grid>
    );
  }
}

const userRolesQuery = gql`
  query allUserRoles {
    users {
      id
      email
      roles {
        id
        name
      }
    }

    roles {
      id
      name
    }
  }
`;

const unassignRole = gql`
  mutation($userId: String!, $roleId: String!) {
    unassignUserRole(userId: $userId, roleId: $roleId) {
      id
      email
      roles {
        id
        name
      }
    }
  }
`;

const assignRole = gql`
  mutation($userId: String!, $roleId: String!) {
    assignUserRole(userId: $userId, roleId: $roleId) {
      id
      email
      roles {
        id
        name
      }
    }
  }
`;

export default compose(
  graphql(userRolesQuery, {
    name: "userRoles",
    options: { fetchPolicy: "cache-and-network" }
  }),
  graphql(unassignRole, {
    name: "unassignRole"
  }),
  graphql(assignRole, {
    name: "assignRole"
  })
)(UserRole);