Question 73484 in Reactjs Question posted in
The new location for the React Documentation can be found here.

AG Grid with Redux Toolkit Query? – Reactjs

Im trying to integrate AG Grid server side model with Redux Toolkit Query but problem is I have external parameters that changes, but did not find how to handle this.

I have pagination/filters/sorting on, I think I cant just override the datasource or I might lose them?

Heres an example

function MyGrid({ param1, param2 }: props): ReactElement {
    // param1/param2 are updated here
    const [triggerPostData] = usePostDataMutation();

    const createDatasource: () => IServerSideDatasource = useCallback(() => {
        return {
            getRows: (parameters): void => {
                // param1/param2 arent updated here
                triggerPostData({ param1, param2, rowsRequestData: parameters.request })
                    .unwrap()
                    .then((data) => {
                        parameters.success({
                            rowData: data.results,
                            rowCount: data.resultCount
                        });
                        return parameters;
                    })
                    .catch(() => {
                        parameters.fail();
                    });
            }
        };
    }, [param1, param2, triggerPostData]);

    const onGridReady = useCallback(
        (parameters: GridReadyEvent): void => {
            parameters.api.setServerSideDatasource(createDatasource());
        },
        [createDatasource]
    );

    const agGridProperties: AgGridReactProps = {
        columnDefs,
        rowModelType: 'serverSide',
        cacheBlockSize: paginationPageSize,
        onGridReady
    };

    return <AgGridReact {...agGridProperties} />;
}
Tags:

2

Answers


  1. 0

    In your code, datasource is set only once (in the greadReady callback).
    Then when param1 and param2 are changed it makes new createDatasource function which is never used by grid.
    I would suggest setting datasource via AgGridReact property serverSideDatasource

    function MyGrid({ param1, param2 }: props): ReactElement {
  // param1/param2 are updated here
  const [triggerPostData] = usePostDataMutation();

  const serverSideDatasource: IServerSideDatasource = useMemo(() => {
    return {
      getRows: (parameters): void => {
        // param1/param2 arent updated here
        triggerPostData({ param1, param2, rowsRequestData: parameters.request })
        ...
      },
    };
  }, [param1, param2, triggerPostData]);

  const agGridProperties: AgGridReactProps = {
    columnDefs,
    rowModelType: 'serverSide',
    serverSideDatasource,
    cacheBlockSize: paginationPageSize,
  };

  return <AgGridReact {...agGridProperties} />;
}

    UPD: As @phry pointed out, the server-side row model is designed around an imperative approach through the getRows method, so it would not be practical to use RTK Query with Server-side model.

    Login or Signup to reply.
  2. 0

    RTK Query author here.
    Honestly, from personal experience with AG-Grid’s DataSources: If you have no need to use a third-party tool like RTK Query, just use normal fetch straight out of the box.
    AG-Grid has its own cache and wants a lot of control over which request is made when – and RTK Query kinda does the same job. Instead of having two tools fight over "who does what", just use one tool. You don’t need both in this instance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search