Saltar al contenido principal

Endpoints estándar de TypeScript

Los Endpoints describen una API asíncrona. Esto incluye tanto el comportamiento en tiempo de ejecución como (opcionalmente) el tipado.

npm install --save @data-client/endpoint
interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}
interface Params {
  id: number;
}

const fetchTodoDetail = ({ id }: Params): Promise<Todo> =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then(res =>
    res.json(),
  );

const todoDetail = new Endpoint(fetchTodoDetail);
Ejemplo de uso
console.log(await todoDetail({ id: '1' }));
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Probablemente querremos usar este endpoint en muchos lugares con necesidades distintas. Al definir una función reutilizable con solo la definición de red, habilitamos su uso en cualquier contexto.

Esto es especialmente útil cuando empezamos a agregar más información relacionada con el endpoint. Por ejemplo, las definiciones de TypeScript nos ayudan a evitar errores comunes y erratas, y aceleran el desarrollo con el autocompletado.

Al acoplar estrechamente la definición de la interfaz, y acoplar de forma laxa su uso, reducimos el código repetitivo, la complejidad y los errores comunes, a la vez que aumentamos el rendimiento y habilitamos la consistencia e integridad global de la aplicación incluso ante datos asíncronos poco fiables.

Más que una simple función​

Además de una función asíncrona y tipos (opcionales), los Endpoint son objetos, lo que les permite proporcionar cualquier información relevante adicional sobre el propio endpoint.

Por ejemplo, para permitir la integración con una caché y saber cuándo recalcular y/o volver a obtener los datos cuando cambian los parámetros, los Endpoints tienen un miembro key() que serializa el endpoint y los parámetros en un string único.

console.log(todoDetail.key({ id: '1' }));
// fetchTodoDetail {"id":"1"}

Miembros​

El segundo argumento opcional es un objeto con el que inicializar el endpoint. Al evitar las funciones flecha, podemos usar this para acceder a otros miembros que hayamos definido.

const todoDetailWithCustomizedKey = new Endpoint(fetchTodoDetail, {
  key({ id }) {
    return `${this.endpointIdentifier}/${id}`;
  },
  endpointIdentifier: 'todoDetail',
});
console.log(todoDetailWithCustomizedKey.key({ id: '1' }));
// todoDetail/1

Endpoint.extend()​

Por comodidad, extend() permite extensiones de un endpoint mediante herencia prototípica con tipado correcto.

Esto reduce enormemente el código repetitivo cuando se establecen patrones sólidos para una API, como la autenticación.

Aquí mostramos los beneficios de personalizar el miembro method.

const fetchTodoDetail = function ({ id }) {
  return fetch(`${this.urlBase}/todos/${id}`, { method: this.method }).then(
    res => res.json(),
  );
};

const todoDetail = new Endpoint(fetchTodoDetail, {
  method: 'GET',
  urlBase: 'https://jsonplaceholder.typicode.com',
});
const todoCreate = todoDetail.extend({ method: 'POST' });
const todoUpdate = todoDetail.extend({ method: 'PUT' });