Conexiones

Esta sección cubre el sistema de conexiones y comunicación del frontend OnSpot con los servicios backend y APIs externas.

Contenido

Fundamentos

• Introducción - Conceptos básicos del sistema de conexiones
• Requerimientos - Configuración y requisitos técnicos

Sistema de Conexiones

@twlgroup/onspot-connections-ui-beta

Librería principal que proporciona:

• Hooks de conexión para GraphQL y REST APIs
• Gestión de estado centralizada
• Autenticación y manejo de sesiones
• Manejo de errores global
• Cache y optimizaciones

Características Principales

🔗 Conectividad

• GraphQL Client configurado con Apollo
• REST API support con Axios
• WebSocket connections para tiempo real
• Offline support y sincronización

🔐 Autenticación

• JWT tokens management
• Refresh tokens automático
• Role-based access control
• Session management seguro

📊 Estado Global

• User state management
• Application state centralizado
• Cache management inteligente
• Error handling consistente

Hooks Principales

useUser

const { user, onLogOut, isLoading } = useUser({
  urlRedirectInLogut: "/ingresar",
});

useGraphQLClient

const client = useGraphQLClient(initialState);

useActionError

useActionError({
  onActionExecute: (error) => {
    // Manejo global de errores
  },
});

Configuración

Variables de Entorno

NEXT_PUBLIC_API_URL=https://api.onspot.com
NEXT_PUBLIC_AWS_S3_FILES_BASE_URL=https://s3.amazonaws.com/bucket
NEXT_PUBLIC_API_KEY=your_api_key

Configuración de Apollo

import { ApolloProvider } from "@apollo/client";
import { useGraphQLClient } from "@twlgroup/onspot-connections-ui-beta";

const client = useGraphQLClient(pageProps.initialGraphQLState);

<ApolloProvider client={client}>
  <App />
</ApolloProvider>

Patrones de Uso

Consultas GraphQL

import { useQuery } from "@apollo/client";
import { GET_USERS } from "./queries";

const { data, loading, error } = useQuery(GET_USERS);

Mutaciones

import { useMutation } from "@apollo/client";
import { CREATE_USER } from "./mutations";

const [createUser, { loading }] = useMutation(CREATE_USER);

Manejo de Estado

const { user } = useUser();

if (!user) {
  // Usuario no autenticado
  return <LoginForm />;
}

Mejores Prácticas

1. Usa hooks de conexión en lugar de fetch directo
2. Maneja errores de forma consistente
3. Optimiza queries con cache y variables
4. Implementa loading states apropiados
5. Valida permisos antes de operaciones

Arquitectura

Frontend App
├── Apollo Client (GraphQL)
├── Axios (REST APIs)
├── Auth Management
├── Error Handling
├── Cache Layer
└── State Management

Próximos Pasos

1. Lee la Introducción para conceptos básicos
2. Revisa Requerimientos para configuración
3. Implementa conexiones en tu componente
4. Optimiza performance con cache y queries

---

Versión: 3.0.94 | Actualizado: hace 2 meses