<DataProvider />

Gerencia o estado, fornecendo todo o contexto necessário para usar os hooks. Deve ser colocado o mais alto possível na árvore da aplicação, pois qualquer uso dos hooks só é possível em componentes abaixo do provider na árvore do 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, integre o estado com 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, integre o estado com redux

NextJS

Guia completo do 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) é um framework totalmente componível para desenvolvimento com React, com Server Side Rendering opcional.

bash

npx @anansi/cli hatch my-project

O Anansi inclui o Reactive Data Client automaticamente.

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;
}

Em vez de começar com um cache vazio, você pode fornecer seu próprio estado inicial. Isso pode ser útil para testes ou para reidratar o estado do cache ao usar renderização no servidor (server side rendering).

managers?: Manager[]

Lista de Managers a serem usados. Este é o principal ponto de extensibilidade do provider.

getDefaultManagers() pode ser usado para estender os managers padrão.

Padrão em produção:

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

Padrão em desenvolvimento:

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

Controller?: classe Controller

Isso permite estender o Controller para fornecer funcionalidades adicionais. Isso pode ser útil se você tiver actions adicionais que deseja despachar para 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

Remove dados do store quando nenhum componente os usa e eles já estão desatualizados. O padrão é 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

Em desenvolvimento, um pequeno botão aparecerá dando acesso fácil às devtools do navegador, se estiverem instaladas. Esta opção configura onde ele aparece ou, se for null, o desativa 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>