> ## Documentation Index
> Fetch the complete documentation index at: https://statsig-4b2ff144-serverless-cloudflare.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Using SpecsDataAdapter

> Learn how to use and customize the StatsigSpecsDataAdapter for on-device evaluation clients.

The `StatsigSpecsDataAdapter` is the default `SpecsDataAdapter` used by a `StatsigOnDeviceEvalClient` instance.

It handles fetching and caching values from Statsig's servers. If required, you can create your own custom `SpecsDataAdapter`
and provide it to the Statsig client via [StatsigOptions.dataAdapter](/client/js-on-device-eval-client#statsig-options).

## Overview

### Synchronous Behavior (Cache)

When calling `StatsigOnDeviceEvalClient.initializeSync`, the `StatsigSpecsDataAdapter` will load values
from Cache and provide them to the client. The client will also call refresh in the background via
`StatsigSpecsDataAdapter.getDataAsync`, leading to values lagging until the next time `initializeSync`.

In practice, this means that for the very first session, there will be no values, and not until the next session will the cache have values.

### Asynchronous Behavior (Network)

When calling `StatsigOnDeviceEvalClient.initializeAsync`, the `StatsigSpecsDataAdapter` will load values
from Cache and provide them to the client. The client will then block on a call to `StatsigSpecsDataAdapter.getDataAsync`,
allowing the ability to await the latest values from Statsig.

If you want the latest values, but do not want to await the asynchronous call, you may call `initializeAsync` and simply `.catch` the promise. Note that
this could lead to values changing mid-session as newer values arrive from the network.

## Advanced Usage

### Getting the Data Adapter

You can access the data adapter from your Statsig on-device client instance:

```typescript theme={null}
const client = new StatsigOnDeviceEvalClient('client-key');
await client.initializeAsync();

const dataAdapter = client.dataAdapter;
```

[View full example on GitHub](https://github.com/statsig-io/js-client-monorepo/blob/main/samples/react/src/samples/on-device-eval-client/sample-on-device-get-data-adapter.tsx)

### Bootstrapping

Bootstrapping allows you to provide the required data without a network call. This can be useful if you do not wish to make network calls during startup.

If you are building a mobile app and want to bundle values with your application. Then you can load the values from a local file at startup and provide them to the data adapter.

```typescript theme={null}
import { StatsigOnDeviceEvalClient } from '@statsig/js-on-device-eval-client';

const client = new StatsigOnDeviceEvalClient('client-key');

// Bootstrap with specs data from local file or bundle
const specsData = /* data from local file */;
await client.dataAdapter.setData(specsData);

await client.initializeAsync();
```

[View full example on GitHub](https://github.com/statsig-io/js-client-monorepo/blob/main/samples/react/src/samples/on-device-eval-client/sample-on-device-bootstrap.tsx)

<Note>
  You can get a copy of your current specs data by visiting: `https://api.statsigcdn.com/v1/download_config_specs/client-{YOUR_SDK_KEY}.json`
</Note>

### Custom Implementation

If you would like to customize when and how data is fetched, as well as where it is stored, you can create your own class the conforms to the `SpecsDataAdapter` type.

The `SpecsDataAdapter` type outlines the following functions:

* `attach` - Called when the `SpecsDataAdapter` is passed into a `StatsigOnDeviceEvalClient` via `StatsigOptions`. This allows the `SpecsDataAdapter` to use
  the same SDK Key and `StatsigOptions` as the `StatsigOnDeviceEvalClient` instance.

  * ```typescript theme={null}
    attach: (sdkKey: string, options: StatsigOptionsCommon | null) => void
    ```

* `getDataSync` - Synchronously get evaluation data for the given user. Called during initializeSync. It is also called during
  async update operations before StatsigDataAdapter.getDataAsync is called.

  * ```typescript theme={null}
    getDataSync: () => DataAdapterResult | null;
    ```

* `getDataAsync` - Asynchronously get evaluation data for the given user. Called during initializeAsync.

  * ```typescript theme={null}
    getDataAsync: (current: DataAdapterResult | null) => Promise<DataAdapterResult | null>;
    ```

* `prefetchData` - Manually trigger a fetch for new specs data.

  * ```typescript theme={null}
    prefetchData: () => Promise<void>;
    ```

* `setData` - Manually set specs data.

  * ```typescript theme={null}
    setData: (data: string) => Promise<void>;
    ```