<DataProvider />
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.
- Web
- React Native
- NextJS
- Expo
- Anansi
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom';
ReactDOM.createRoot(document.body).render(
<DataProvider>
<App />
</DataProvider>,
);
Alternatively integrate state with redux
import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
const Root = () => (
<DataProvider>
<App />
</DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
Alternatively integrate state with redux
import { DataProvider } from '@data-client/react/nextjs';
export default function RootLayout({ children }) {
return (
<html>
<body>
<DataProvider>
{children}
</DataProvider>
</body>
</html>
);
}
import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';
export default function RootLayout() {
return (
<DataProvider>
<Stack>
<Stack.Screen name="index" />
</Stack>
</DataProvider>
);
}
Anansi (beta) is a fully composable framework for React development with optional Server Side Rendering.
npx @anansi/cli hatch my-project
Anansi includes Reactive Data Client automatically.
Props
interface ProviderProps {
children: ReactNode;
managers?: Manager[];
initialState?: State<unknown>;
Controller?: typeof Controller;
devButton?:
| 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left'
| null;
}
initialState: State<unknown>
export interface State<T> {
readonly entities: {
readonly [entityKey: string]: { readonly [pk: string]: T } | undefined;
};
readonly endpoints: {
readonly [key: string]: unknown | PK[] | PK | undefined;
};
readonly indexes: NormalizedIndex;
readonly meta: {
readonly [key: string]: {
readonly date: number;
readonly error?: ErrorTypes;
readonly expiresAt: number;
readonly prevExpiresAt?: number;
readonly invalidated?: boolean;
readonly errorPolicy?: 'hard' | 'soft' | undefined;
};
};
readonly entityMeta: {
readonly [entityKey: string]: {
readonly [pk: string]: {
readonly date: number;
readonly expiresAt: number;
readonly fetchedAt: number;
};
};
};
readonly optimistic: (SetResponseAction | OptimisticAction)[];
readonly lastReset: 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[]
List of Managers use. This is the main extensibility point of the provider.
getDefaultManagers() can be used to extend the default managers.
Default Production:
[new NetworkManager(), new SubscriptionManager(PollingSubscription)];
Default Development:
[
new DevToolsManager(),
new NetworkManager(),
new SubscriptionManager(PollingSubscription),
];
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 = (
<DataProvider Controller={MyController}>
<App />
</DataProvider>
);
devButton
In development, a small button will appear that gives easy access to browser devtools if installed. This option configures where it shows up, or if null will disable it altogether.
'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null
= 'bottom-right'
<DataProvider devButton={null}>
<App/>
</DataProvider>
<DataProvider devButton="top-right">
<App/>
</DataProvider>