LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Server Data Loading

Server Row Data

LyteNyte Grid's server data source loads row data in slices and retrieves it on demand.

Server Data Source Hook

To use the server data source, import the useServerDataSource hook from @1771technologies/lytenyte-pro.

import { useServerDataSource } from "@1771technologies/lytenyte-pro";

Since this function is a React hook, it must follow the Rules of Hooks.

Provide the useServerDataSource hook with a queryFn callback. The callback retrieves data from the server. LyteNyte Grid passes it parameters describing the current data request and expects a promise that resolves to the data response.

The full interfaces and request/response cycle are described in the Data Interface guide.

export default function ServerDataDemo() {
  const ds = useServerDataSource<MovieData>({
    queryFn: (params) => {
      // See code example for sample implementation
      return Server(params.requests);
    },
    queryKey: [],
  });
}

A complete example of basic server loading is shown below:

Server Row Data

Fork code on stack blitzFork code on code sandbox

When the grid loads data from the server, cell renderers and grid configuration remain client-side. In this example, the server returns only row data.

Server Column Setting

If the server defines the column configurations, include the column definitions in the response. The example below extends the queryFn to handle this scenario.

Server Defined Columns

Fork code on stack blitzFork code on code sandbox

The client does not define columns up front. LyteNyte Grid requests the initial data, and the server returns both row data and column definitions. The queryFn then sets the grid columns:

const [columns, setColumns] = useState<Grid.Column<GridSpec>[]>([]);


const queryFn: UseServerDataSourceParams<GridSpec["data"], []>["queryFn"] = useCallback(async (params) => {
  const res = await Server(params.requests);


  if (res.columns) {
    setColumns(
      res.columns.map((x) => {
        return {
          ...x,
          cellRenderer: cellRenderers[x.id as keyof typeof cellRenderers],
        } satisfies Grid.Column<GridSpec>;
      }),
    );
  }


  return res.data;
}, []);

Initial Data Loading State

Use the server data source’s isLoading state to show loading indicators or skeleton placeholders during the initial data fetch.

export default function ServerDataDemo() {
  const ds = useServerDataSource<MovieData>({
    queryFn: (params) => Server(params.requests),
  });


  const isLoading = ds.isLoading.useValue();
}

The example below shows the loading state. The demo response never resolves, so data never appears:

Initial Loading State

Fork code on stack blitzFork code on code sandbox

Initial Data Loading Error

Network requests can fail. Failures may occur during:

  • The initial data request.
  • A subsequent data request (for example, when scrolling through rows).

This section introduces error handling using a simple failure case. See the Handling Load Failures guide for best practices and more details.

Initial Load Error

Fork code on stack blitzFork code on code sandbox

When the initial request fails, the server data source sets the reactive loadError property:

const ds = useServerDataSource<MovieData>({
  // ...
});


// Set when the initial data request fails
const error = ds.loadingError.useValue();

Note

LyteNyte Grid can only detect a failed request if the promise returned by the queryFn rejects. If your implementation catches and handles the rejection internally, the grid will not detect the error. This is acceptable when the error is handled intentionally, but it’s a common source of confusion.

For example, this queryFn never reports a failure:

const neverFailFetcher = async (params) => {
  try {
    const req = await Server(params);
  } catch {
    // Because the error is caught, the promise never rejects
    return [];
  }
};

Next Steps