getDefaultManagers()

getDefaultManagers returns an Array of Managers to be sent to DataClientPlugin.

This makes it simple to configure and add custom Managers, while remaining robust against any potential changes to the default managers.

Currently returns [DevToolsManager*, NetworkManager, SubscriptionManager].

*(DevToolsManager is excluded in production builds.)

Usage

main.ts

import { createApp } from 'vue';
import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
import App from './App.vue';

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');

When managers is omitted, DataClientPlugin uses getDefaultManagers() with no arguments. See installation for the other DataClientPlugin options.

Arguments

Each argument represents a configuration of the manager. It can be of three possible types:

• Any plain object is used as options to be sent to the manager's constructor.
• An instance of the manager to be used directly.
• null. When sent will exclude the manager.

getDefaultManagers({
  devToolsManager: { trace: true },
  networkManager: new NetworkManager({ errorExpiryLength: 1 }),
  subscriptionManager: null,
});

networkManager

note

null is not allowed here since NetworkManager is required

dataExpiryLength is used as a fallback when an Endpoint does not have dataExpiryLength defined.

errorExpiryLength is used as a fallback when an Endpoint does not have errorExpiryLength defined.

devToolsManager

Arguments to send to redux devtools.

subscriptionManager

A class that implements SubscriptionConstructable like PollingSubscription

Examples

Tracing actions

For example, we can enable the trace option to help track down where actions are dispatched from. This has a large performance impact, so it is normally disabled.

const managers = getDefaultManagers({
  devToolsManager: { trace: true },
});

Manager inheritance

Sending manager instances allows us to customize managers using inheritance.

import { NetworkManager, type FetchAction } from '@data-client/vue';

class LoggingNetworkManager extends NetworkManager {
  protected handleFetch(action: FetchAction) {
    console.log('fetching', action.key);
    return super.handleFetch(action);
  }
}

const managers = getDefaultManagers({
  networkManager: new LoggingNetworkManager(),
});

Disabling

Using null will remove managers completely. NetworkManager cannot be removed this way.

const managers = getDefaultManagers({
  devToolsManager: null,
  subscriptionManager: null,
});

Here we disable every manager except NetworkManager.