---
product: "AG Grid"
title: "Load Retry"
description: "When a datasource load fails, call retryServerSideLoads() to reload the failed rows at a later time."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-api-reference/"
    - title: "Datasource"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-datasource/"
    - title: "Configuration"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-configuration/"
    - title: "Sorting"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-sorting/"
    - title: "Filtering"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-filtering/"
    - title: "Row Grouping"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-grouping/"
    - title: "Pivoting"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-pivoting/"
    - title: "Pagination"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-pagination/"
    - title: "Row Selection"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-selection/"
    - title: "Loading Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-loading-rows/"
    - title: "Changing Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-changing-columns/"
    - title: "Updating Data"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-updating/"
    - title: "Row Height"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-row-height/"
    - title: "Tree Data"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-tree-data/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/server-side-model-master-detail/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Load Retry

When a datasource load fails, call `retryServerSideLoads()` to reload the failed rows at a later time.

When loading fails, the datasource informs the grid of such using the `fail()` callback instead of using the `success()` callback. Calling `fail()` puts the loading rows into a Loading Failed state which hides the loading spinner. No data is shown in these rows as they are not loaded.

Failed loads can be retried by using the grid API `retryServerSideLoads()`. This will retry all loads that have previously failed.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `retryServerSideLoads` | `Function` |  |  |  |

### Examples

The following example demonstrates load retrying. Note the following:

- When the checkbox 'Make Loads Fail' is checked, all subsequent loads will fail, i.e. the Datasource will call `fail()` instead of `success()`. Try checking the checkbox and expand a few groups to observe failed loading.
- When the button 'Retry Failed Loads' is pressed, any loads which were marked as failed are retried.
- When the button 'Reset Entire Grid' is pressed, the grid will reset. This allows you to have 'Make Loads Fail' checked while starting from scratch, thus failing loading of the top level of rows.

#### Load Retry

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  ModuleRegistry,
  RowModelType,
  enableDevValidations,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelApiModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { FakeServer } from "./fakeServer";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowGroupingModule,
  ServerSideRowModelModule,
  ServerSideRowModelApiModule,
]);

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);
      const response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 1000);
    },
  };
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 5px">
        <label><input type="checkbox" id="failLoad"> Make Loads Fail</label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button v-on:click="onBtRetry()">Retry Failed Loads</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button v-on:click="onBtReset()">Reset Entire Grid</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :rowModelType="rowModelType"
        :maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests"
        :suppressAggFuncInHeader="true"
        :purgeClosedRowNodes="true"
        :cacheBlockSize="cacheBlockSize"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        // demonstrating the use of valueGetters
        colId: "country",
        valueGetter: "data.country",
        rowGroup: true,
        hide: true,
      },
      { field: "sport", rowGroup: true, hide: true },
      { field: "year", minWidth: 100 },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      flex: 1,
      minWidth: 280,
      field: "athlete",
    });
    const rowModelType = ref<RowModelType>("serverSide");
    const maxConcurrentDatasourceRequests = ref(1);
    const cacheBlockSize = ref(20);
    const rowData = ref<IOlympicData[]>(null);

    function onBtRetry() {
      gridApi.value!.retryServerSideLoads();
    }
    function onBtReset() {
      gridApi.value!.refreshServerSide({ purge: true });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        // setup the fake server with entire dataset
        const fakeServer = new FakeServer(data);
        // create datasource with a reference to the fake server
        const datasource = getServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api!.setGridOption("serverSideDatasource", datasource);
      };

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowModelType,
      maxConcurrentDatasourceRequests,
      cacheBlockSize,
      rowData,
      onGridReady,
      onBtRetry,
      onBtReset,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Load Retry](https://www.ag-grid.com/archive/36.2.0/examples/server-side-model-retry/retry-infinite/vue3/)