# Fetch & Reload

## Content

The [`fetch`](/spreadjs/api/classes/GC.Data.Table#fetch) method initializes or refreshes table data based on the table’s configured data source.

```typescript
fetch(reload?: boolean): Promise<any>;
```

* `fetch()` initializes the table if it has not been loaded.
* `fetch(true)` forces the table to reload data from its configured data source.

This section describes the behavior and usage of the reload mode.

## When to Use Fetch

Regardless of whether a table is configured with:

* Local data (`data`), or
* Remote data (`remote`)

You should always call `table.fetch()` before performing further operations such as:

* Creating a View
* Binding to a TableSheet
* Accessing table data
* Creating relationships

Calling `fetch()` ensures the table is fully initialized and ready for subsequent operations.

## Basic Usage

```javascript
table.fetch().then(function(data) {
  // Data is available here
});
```

For example:

```javascript
const table = dataManager.addTable("products", {
  data: [
    { id: 1, name: "Pen" },
    { id: 2, name: "Notebook" }
  ]
});

const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

// Always call fetch before using the table
table.fetch().then(function () {

  const view = table.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

});
```

## Reloading Data

### When to Use Reload

Reload is typically used with remote tables, where the underlying data may change outside the current application session.
Common scenarios include:

* A manual Refresh button.
* Periodic synchronization with a backend service.
* Data updated by other users.
* Re-querying the same endpoint to obtain the latest results.

To refresh table data from its configured data source, call:

```javascript
table.fetch(true);
```

>type=note
> **Notes:**
>
> * Guarantees that the table re-executes its configured data source.
> * Whether the actual data changes depends on the data source itself.
> * The internal update behavior during reload depends on the data source and usage scenario.

### Functional Impact

When `fetch(true)` is called:

* The table data is reloaded.
* Existing views are re-evaluated.
* Sorting and filtering rules remain unchanged.
* Bound components update automatically if the data changes.

Reload doess not:

* Recreate the table
* Recreate views
* Require `view.fetch()`
* Require `setDataView()` again

If the reloaded data is identical to the previous result, no visible change occurs.

### Sorting and Filtering Behavior

If a view has active sorting or filtering:

* The rules are preserved.
* After reload, they are applied to the newly loaded data.
* The result set may change depending on the new data.

No additional operation is required.

### Example

```javascript
const dataManager = spread.dataManager();
const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

const products = dataManager.addTable("products", {
  remote: {
    read: {
      url: "https://demodata.mescius.io/northwind/api/v1/products",
    }
  }
});

// Initial load
products.fetch().then(() => {

  const view = products.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

  // Later: force reload
  document.getElementById("refreshBtn").addEventListener("click", () => {
    products.fetch(true).then(() => {
      tableSheet.setDataView(view);
      console.log("Table data reloaded.");
    });
  });

});
```

After `fetch(true)`:

* The table re-requests data from the remote endpoint.
* Existing view rules remain.
* The TableSheet reflects updated data automatically.

### Switching the Data Source

In addition to refreshing the same endpoint, `fetch(true)` can also be used when the table’s data source needs to change at runtime.
A common scenario occurs in template-based workflows.
Designers often build spreadsheet templates using test or demo endpoints during development.
When the template is deployed to production, the application must replace the test endpoint with a production data source.
In this case:

* The table definition remains.
* The remote endpoint is updated.
* `fetch(true)` is used to load data from the new source.

### Example

```javascript
var options = myTable.options;

// Replace the remote endpoint (development → production)
options.remote.read.url = "https://developer.mescius.com/spreadjs/demos/server/api/Order";

myTable.options = options;

// Reload from the new endpoint
myTable.fetch(true).then(function () {

  // Recreate view for the new dataset
  var view = myTable.addView("myView2");

  view.fetch().then(function () {
     sheet.setDataView(view);
  });

});
```

When switching to a different endpoint:

* The returned dataset may differ in structure or content.
* Existing view state may not align with the new data.
* Recreating the view ensures correct binding and recalculation.

This pattern is commonly used when promoting templates from development to production environments.