<CacheProvider />

Manages state, providing all context needed to use the hooks. Should be placed as high as possible in application tree as any usage of the hooks is only possible for components below the provider in the React tree.

React Web 16+

index.tsx

import { CacheProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <CacheProvider>
    <App />
  </CacheProvider>,
  document.body,
);

Alternatively integrate state with redux

React Web 18+

index.tsx

import { CacheProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.body).render(
  <CacheProvider>
    <App />
  </CacheProvider>,
);

React Native

index.tsx

import { CacheProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';

const Root = () => (
  <CacheProvider>
    <App />
  </CacheProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

Alternatively integrate state with redux

NextJS

npm install --save @data-client/ssr @data-client/redux redux

Full NextJS Guide

pages/_document.tsx

import { DataClientDocument } from '@data-client/ssr/nextjs';

export default DataClientDocument;

pages/_app.tsx

import { AppCacheProvider } from '@data-client/ssr/nextjs';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppCacheProvider>
      <Component {...pageProps} />
    </AppCacheProvider>
  );
}

Anansi

Anansi (beta) is a fully composable framework for React development with optional SSR.

npm install -g @anansi/cli

Anansi includes Reactive Data Client automatically. Just start a new project with the CLI:

bash

anansi hatch my-project

Props

interface ProviderProps {
  children: ReactNode;
  managers?: Manager[];
  initialState?: State<unknown>;
  Controller?: typeof Controller;
}

initialState: State<unknown>

type State<T> = Readonly<{
  entities: Readonly<{ [fetchKey: string]: { [pk: string]: T } | undefined }>;
  results: Readonly<{ [url: string]: unknown | PK[] | PK | undefined }>;
  meta: Readonly<{
    [url: string]: { date: number; error?: Error; expiresAt: number };
  }>;
}>;

Instead of starting with an empty cache, you can provide your own initial state. This can be useful for testing, or rehydrating the cache state when using server side rendering.

managers: Manager[]

Default Production:

[new NetworkManager(), new SubscriptionManager(PollingSubscription)];

Default Development:

[
  new DevToolsManager(),
  new NetworkManager(),
  new SubscriptionManager(PollingSubscription),
];

List of Managers use. This is the main extensibility point of the provider.

Controller: typeof Controller

This allows you to extend Controller to provide additional functionality. This might be useful if you have additional actions you want to dispatch to custom Managers

class MyController extends Controller {
  doSomething = () => {
    console.log('hi');
  };
}

const RealApp = (
  <CacheProvider Controller={MyController}>
    <App />
  </CacheProvider>
);

defaultProps

Production

import {
  defaultState,
  Controller,
  NetworkManager,
  SubscriptionManager,
  PollingSubscription,
} from '@data-client/core';

CacheProvider.defaultProps = {
  managers: [
    new NetworkManager(),
    new SubscriptionManager(PollingSubscription),
  ] as Manager[],
  initialState: defaultState as State<unknown>,
  Controller,
};

Development

import {
  defaultState,
  Controller,
  NetworkManager,
  SubscriptionManager,
  PollingSubscription,
} from '@data-client/core';

CacheProvider.defaultProps = {
  managers: [
    new DevToolsManager(),
    new NetworkManager(),
    new SubscriptionManager(PollingSubscription),
  ] as Manager[],
  initialState: defaultState as State<unknown>,
  Controller,
};