SDK React

Cliente React completamente tipado construido sobre openapi-react-query y openapi-fetch. Integración nativa con TanStack React Query para cache, refetch automático y manejo de estado del servidor.

npm: @ssddo/ecf-reactGitHub

Instalación

bash

npm install @ssddo/ecf-react @tanstack/react-query

Configuración

Envuelva su aplicación con QueryClientProvider y cree su cliente:

typescript

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createEcfReactClient } from "@ssddo/ecf-react";

const queryClient = new QueryClient();

// Cliente completo (backend) — queries + mutations
const { $api, fetchClient } = createEcfReactClient({
baseUrl: "https://api.test.ecfx.ssd.com.do",
apiKey: "tu-api-key"
});

function App() {
return (
  <QueryClientProvider client={queryClient}>
    <MiComponente />
  </QueryClientProvider>
);
}

Consultas (useQuery)

typescript

function EcfStatus({ trackId }: { trackId: string }) {
const { data, isLoading, error } = $api.useQuery(
  "get", "/ecf/{trackId}",
  { params: { path: { trackId } } }
);

if (isLoading) return <p>Cargando...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
  <div>
    <p>Estado: {data.Estatus}</p>
    <p>Código: {data.CodSec}</p>
  </div>
);
}

Mutaciones (useMutation)

typescript

function EnviarEcf() {
const mutation = $api.useMutation("post", "/ecf/send");

const handleSubmit = () => {
  mutation.mutate({
    body: ecfPayload
  });
};

return (
  <button onClick={handleSubmit} disabled={mutation.isPending}>
    {mutation.isPending ? "Enviando..." : "Enviar ECF"}
  </button>
);
}

Cliente Frontend (Solo lectura)

Para aplicaciones frontend donde no desea exponer el token completo, use createEcfFrontendReactClient. Solo expone endpoints GET (sin useMutation), maneja cache y refresh automático del token, y usa localStorage por defecto.

typescript

import { createEcfFrontendReactClient } from "@ssddo/ecf-react";

const { $api: frontendApi } = createEcfFrontendReactClient({
baseUrl: "https://api.prod.ecfx.ssd.com.do",
getToken: async () => {
  const res = await fetch("/api/ecf-token");
  return (await res.json()).token;
},
// Opcional: personalizar cache
cacheToken: (token) => localStorage.setItem("ecf-token", token),
getCachedToken: () => localStorage.getItem("ecf-token")
});

Nota: Para uso server-side o fuera de React, utilice el SDK de TypeScript @ssddo/ecf-sdk directamente.