<DataProvider />

Gestiona el estado y proporciona todo el contexto necesario para usar los hooks. Debe colocarse lo más arriba posible en el árbol de la aplicación, ya que los hooks solo pueden usarse en los componentes que están por debajo del provider en el árbol de React.

Web

index.tsx

import { DataProvider } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

Como alternativa, integra el estado con redux

React Native

index.tsx

import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

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

Como alternativa, integra el estado con redux

NextJS

Guía completa de NextJS

app/layout.tsx

import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

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

Anansi (beta) es un framework totalmente componible para el desarrollo con React, con renderizado del lado del servidor opcional.

bash

npx @anansi/cli hatch my-project

Anansi incluye Reactive Data Client automáticamente.

Props

interface ProviderProps {
  children: ReactNode;
  managers?: Manager[];
  initialState?: State<unknown>;
  Controller?: new (props: { gcPolicy: GCInterface }) => Controller;
  gcPolicy?: GCInterface;
  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 fetchedAt: number;
      readonly expiresAt: number;
      readonly prevExpiresAt?: number;
      readonly error?: ErrorTypes;
      readonly invalidated?: boolean;
      readonly errorPolicy?: 'hard' | 'soft' | undefined;
    };
  };
  readonly entitiesMeta: {
    readonly [entityKey: string]: {
      readonly [pk: string]: {
        readonly date: number;
        readonly expiresAt: number;
        readonly fetchedAt: number;
      };
    };
  };
  readonly optimistic: (SetResponseAction | OptimisticAction)[];
  readonly lastReset: number;
}

En lugar de empezar con una caché vacía, puedes proporcionar tu propio estado inicial. Esto puede ser útil para pruebas o para rehidratar el estado de la caché al usar renderizado del lado del servidor.

managers?: Manager[]

Lista de Managers que se usarán. Es el principal punto de extensibilidad del provider.

getDefaultManagers() puede usarse para ampliar los managers predeterminados.

Predeterminado en producción:

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

Predeterminado en desarrollo:

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

Controller?: clase Controller

Te permite extender Controller para ofrecer funcionalidad adicional. Puede ser útil si tienes acciones adicionales que quieres despachar a Managers personalizados

import { DataProvider, Controller } from '@data-client/react';
import App from './App';

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

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

gcPolicy?: GCInterface

Elimina datos del store cuando ningún componente los usa y se han vuelto obsoletos. El valor predeterminado es new GCPolicy().

import { DataProvider, GCPolicy } from '@data-client/react';
import App from './App';

const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 });

const RealApp = (
  <DataProvider gcPolicy={gcPolicy}>
    <App />
  </DataProvider>
);

GCPolicy options

new GCPolicy({
  // how often to sweep (default 5 minutes)
  intervalMS: 60 * 1000 * 5,
  // how many stale lifetimes before data is removed (default 2)
  expiryMultiplier: 2,
  // or choose when unused data is removed (replaces expiryMultiplier)
  // here: one minute after it goes stale
  expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000,
});

devButton

En desarrollo aparece un pequeño botón que da acceso fácil a las devtools del navegador, si están instaladas. Esta opción configura dónde se muestra o, si es null, lo desactiva por completo.

'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null = 'bottom-right'

Disable button

import { DataProvider } from '@data-client/react';
import App from './App';

<DataProvider devButton={null}>
  <App/>
</DataProvider>

Place in top right corner

import { DataProvider } from '@data-client/react';
import App from './App';

<DataProvider devButton="top-right">
  <App/>
</DataProvider>