Construyendo una Aplicación de Chat con TanStack Query

Introducción a TanStack Query

TanStack Query es una potente biblioteca para gestionar el estado del servidor en aplicaciones React. Simplifica la obtención de datos, la caché, la sincronización y la actualización del estado del servidor, lo que facilita la creación de aplicaciones rápidas y fáciles de usar. En este tutorial, construiremos una aplicación de chat simple utilizando TanStack Query para gestionar nuestra obtención de datos y caché. Utilizaremos React como nuestro marco de trabajo del lado del cliente y una API simulada para los mensajes de chat. Introducción a TanStack Query

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js
• Conocimientos básicos de React
• Familiaridad con hooks Requisitos previos

Paso 1: Configuración de una Aplicación React

Primero, necesitamos configurar nuestra aplicación React. Puedes utilizar Create React App para este ejemplo.

npx create-react-app chat-app
cd chat-app

A continuación, instala la biblioteca TanStack Query:

npm install @tanstack/react-query

Configuración de la aplicación React

Paso 2: Creación de una API simulada

Para el propósito de este tutorial, utilizaremos una API simulada simple. Puedes utilizar un servicio como json-server para crear un backend simulado. Para instalar json-server, ejecuta:

npm install -g json-server

Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido para representar los mensajes de chat:

{
  "messages": [
    { "id": 1, "text": "hola!", "user": "alice" },
    { "id": 2, "text": "hola!", "user": "bob" }
  ]
}

Ahora, ejecuta el json-server:

json-server --watch db.json --port 5000

Tu API estará disponible en http://localhost:5000/messages. Creación de la API simulada

Paso 3: Configuración de TanStack Query

Ahora, configuremos TanStack Query en nuestra aplicación. Abre src/index.js y envuelve tu aplicación con el QueryClientProvider.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

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

Configuración de TanStack Query

Paso 4: Obtención de mensajes

A continuación, crearemos un componente para obtener y mostrar los mensajes de chat. Crea un nuevo archivo src/Chat.js y agrega el siguiente código:

import { useQuery } from '@tanstack/react-query';

const fetchMessages = async () => {
  const response = await fetch('http://localhost:5000/messages');
  if (!response.ok) {
    throw new Error('La respuesta de la red no fue ok');
  }
  return response.json();
};

function Chat() {
  const { data, error, isLoading } = useQuery('messages', fetchMessages);

  if (isLoading) {
    return <div>Cargando mensajes...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Mensajes de chat</h1>
      {data.messages.map((message) => (
        <div key={message.id}>
          <strong>{message.user}</strong>: {message.text}
        </div>
      ))}
    </div>
  );
}

export default Chat;

Obtención de mensajes

Paso 5: Agregar un formulario de mensaje

Ahora, agregaremos un formulario para permitir a los usuarios enviar nuevos mensajes. Actualiza el archivo src/Chat.js con el siguiente código:

import { useQuery, useMutation } from '@tanstack/react-query';

// ... (resto del código sigue siendo el mismo)

function Chat() {
  // ... (resto del código sigue siendo el mismo)

  const [messageText, setMessageText] = useState('');

  const addMessage = useMutation(
    async (newMessage) => {
      const response = await fetch('http://localhost:5000/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newMessage),
      });
      if (!response.ok) {
        throw new Error('La respuesta de la red no fue ok');
      }
      return response.json();
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('messages');
      },
    }
  );

  const handleSubmit = (event) => {
    event.preventDefault();
    addMessage.mutate({ text: messageText, user: 'Tu' });
    setMessageText('');
  };

  return (
    <div>
      <h1>Mensajes de chat</h1>
      {data.messages.map((message) => (
        <div key={message.id}>
          <strong>{message.user}</strong>: {message.text}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={messageText}
          onChange={(event) => setMessageText(event.target.value)}
          placeholder="Escribe tu mensaje..."
        />
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
}

export default Chat;

Agregar formulario de mensaje

Conclusión

En este tutorial, construimos con éxito una aplicación de chat simple utilizando TanStack Query para la obtención de datos y la gestión del estado. Aprendimos cómo configurar una aplicación React con TanStack Query, obtener datos de una API simulada, mostrar datos en un componente React, enviar nuevos mensajes a la API y actualizar la interfaz de usuario utilizando mutaciones. No dudes en extender esta aplicación agregando autenticación de usuarios, fechas de mensaje o capacidades en tiempo real utilizando WebSockets u otras tecnologías. ¡Buena codificación!