Conectando Frontend React con APIs Serverless en AWS con GraphQL

Las aplicaciones modernas necesitan ser rápidas, escalables y eficientes en el manejo de datos. Una de las combinaciones más potentes para lograr esto es utilizar GraphQL con AWS AppSync en el backend y React en el frontend. En este artículo vamos a ver cómo crear un backend serverless con GraphQL utilizando AppSync y cómo conectar el frontend con Apollo Client. Además, cubriremos la autenticación con AWS Cognito para asegurar nuestras rutas. ¿Por qué utilizar AWS AppSync y GraphQL? AWS AppSync es un servicio de GraphQL totalmente gestionado que facilita la creación de APIs flexibles y en tiempo real. Al usar AppSync, podemos conectar directamente nuestras aplicaciones frontend a servicios serverless, bases de datos como DynamoDB e incluso integrarlo con Lambda para lógica de negocio. Beneficios de AppSync: Consultas y mutaciones rápidas mediante GraphQL. Actualizaciones en tiempo real con suscripciones. Autenticación y autorización robustas con AWS Cognito. Integración nativa con otros servicios de AWS. Paso 1: Configurar el Backend con AWS AppSync Crear un Proyecto con Amplify CLI Instala Amplify si aún no lo tienes: npm install -g @aws-amplify/cli Inicializa el proyecto: amplify init Agregar el Servicio AppSync Añade GraphQL a tu proyecto: amplify add api Selecciona las opciones: Tipo de API: GraphQL Autenticación: Amazon Cognito User Pool Perfil de autenticación: Default configuration Paso 2: Definir el Esquema de GraphQL Vamos a crear un esquema básico para manejar tareas. Archivo schema.graphql type Task @model { id: ID! title: String! description: String completed: Boolean! } Implementar el Backend Ejecuta el siguiente comando para desplegar la API: amplify push Esto generará el endpoint de AppSync y la configuración de GraphQL en el archivo aws-exports.js. Paso 3: Configuración del Frontend con Apollo Client Instala Apollo Client y Amplify en tu proyecto React: npm install @apollo/client graphql aws-amplify Configurar Amplify en React Agrega la configuración en el archivo index.js: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Amplify } from 'aws-amplify'; import awsconfig from './aws-exports'; import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'; Amplify.configure(awsconfig); const client = new ApolloClient({ uri: awsconfig.aws_appsync_graphqlEndpoint, cache: new InMemoryCache(), headers: { Authorization: `Bearer ${localStorage.getItem("idToken")}`, }, }); ReactDOM.render( , document.getElementById('root') ); Paso 4: Crear Consultas y Mutaciones Crear la Mutación en Apollo mutations.js import { gql } from '@apollo/client'; export const CREATE_TASK = gql` mutation CreateTask($title: String!, $description: String, $completed: Boolean!) { createTask(input: {title: $title, description: $description, completed: $completed}) { id title description completed } } `; Crear la Consulta queries.js import { gql } from '@apollo/client'; export const GET_TASKS = gql` query ListTasks { listTasks { items { id title description completed } } } `; Paso 5: Implementar el Frontend App.js import React, { useState, useEffect } from 'react'; import { useQuery, useMutation } from '@apollo/client'; import { GET_TASKS, CREATE_TASK } from './graphql/queries'; function App() { const { data, loading, error } = useQuery(GET_TASKS); const [createTask] = useMutation(CREATE_TASK); const [task, setTask] = useState({ title: '', description: '', completed: false }); const handleSubmit = async () => { await createTask({ variables: task }); setTask({ title: '', description: '', completed: false }); }; if (loading) return Cargando...; if (error) return Error: {error.message}; return ( Lista de Tareas setTask({ ...task, title: e.target.value })} /> Crear Tarea {data?.listTasks?.items.map((task) => ( {task.title} ))} ); } export default App; Buenas Prácticas de Estructuración Modularización del Código: Organiza consultas y mutaciones en directorios específicos. Autenticación Centralizada: Maneja los tokens en un contexto o servicio compartido. Tipado con TypeScript: Utiliza tipos para garantizar la integridad de los datos. Control de Errores: Implementa manejadores para los errores comunes de Apollo y GraphQL. Conclusión Con AWS AppSync y React, podemos construir aplicaciones rápidas y escalables utilizando GraphQL. La integración con Apollo Client facilita el consumo de datos en tiempo real y la autenticación con Cognito garant

Mar 27, 2025 - 20:59

Conectando Frontend React con APIs Serverless en AWS con GraphQL

Las aplicaciones modernas necesitan ser rápidas, escalables y eficientes en el manejo de datos. Una de las combinaciones más potentes para lograr esto es utilizar GraphQL con AWS AppSync en el backend y React en el frontend. En este artículo vamos a ver cómo crear un backend serverless con GraphQL utilizando AppSync y cómo conectar el frontend con Apollo Client. Además, cubriremos la autenticación con AWS Cognito para asegurar nuestras rutas.

¿Por qué utilizar AWS AppSync y GraphQL?

AWS AppSync es un servicio de GraphQL totalmente gestionado que facilita la creación de APIs flexibles y en tiempo real. Al usar AppSync, podemos conectar directamente nuestras aplicaciones frontend a servicios serverless, bases de datos como DynamoDB e incluso integrarlo con Lambda para lógica de negocio.

Beneficios de AppSync:

Consultas y mutaciones rápidas mediante GraphQL.
Actualizaciones en tiempo real con suscripciones.
Autenticación y autorización robustas con AWS Cognito.
Integración nativa con otros servicios de AWS.

Paso 1: Configurar el Backend con AWS AppSync

Crear un Proyecto con Amplify CLI

Instala Amplify si aún no lo tienes:

npm install -g @aws-amplify/cli

Inicializa el proyecto:

amplify init

Agregar el Servicio AppSync

Añade GraphQL a tu proyecto:

amplify add api

Selecciona las opciones:

Tipo de API: GraphQL
Autenticación: Amazon Cognito User Pool
Perfil de autenticación: Default configuration

Paso 2: Definir el Esquema de GraphQL

Vamos a crear un esquema básico para manejar tareas.

Archivo schema.graphql

type Task @model {
  id: ID!
  title: String!
  description: String
  completed: Boolean!
}

Implementar el Backend

Ejecuta el siguiente comando para desplegar la API:

amplify push

Esto generará el endpoint de AppSync y la configuración de GraphQL en el archivo aws-exports.js.

Paso 3: Configuración del Frontend con Apollo Client

Instala Apollo Client y Amplify en tu proyecto React:

npm install @apollo/client graphql aws-amplify

Configurar Amplify en React

Agrega la configuración en el archivo index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

Amplify.configure(awsconfig);

const client = new ApolloClient({
  uri: awsconfig.aws_appsync_graphqlEndpoint,
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer ${localStorage.getItem("idToken")}`,
  },
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Paso 4: Crear Consultas y Mutaciones

Crear la Mutación en Apollo

mutations.js

import { gql } from '@apollo/client';

export const CREATE_TASK = gql`
  mutation CreateTask($title: String!, $description: String, $completed: Boolean!) {
    createTask(input: {title: $title, description: $description, completed: $completed}) {
      id
      title
      description
      completed
    }
  }
`;

Crear la Consulta

queries.js

import { gql } from '@apollo/client';

export const GET_TASKS = gql`
  query ListTasks {
    listTasks {
      items {
        id
        title
        description
        completed
      }
    }
  }
`;

Paso 5: Implementar el Frontend

App.js

import React, { useState, useEffect } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import { GET_TASKS, CREATE_TASK } from './graphql/queries';

function App() {
  const { data, loading, error } = useQuery(GET_TASKS);
  const [createTask] = useMutation(CREATE_TASK);
  const [task, setTask] = useState({ title: '', description: '', completed: false });

  const handleSubmit = async () => {
    await createTask({ variables: task });
    setTask({ title: '', description: '', completed: false });
  };

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

  return (
    <div>
      <h1>Lista de Tareas</h1>
      <input placeholder="Título" value={task.title} onChange={e => setTask({ ...task, title: e.target.value })} />
      <button onClick={handleSubmit}>Crear Tarea</button>
      <ul>
        {data?.listTasks?.items.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Buenas Prácticas de Estructuración

Modularización del Código: Organiza consultas y mutaciones en directorios específicos.
Autenticación Centralizada: Maneja los tokens en un contexto o servicio compartido.
Tipado con TypeScript: Utiliza tipos para garantizar la integridad de los datos.
Control de Errores: Implementa manejadores para los errores comunes de Apollo y GraphQL.

Conclusión

Con AWS AppSync y React, podemos construir aplicaciones rápidas y escalables utilizando GraphQL. La integración con Apollo Client facilita el consumo de datos en tiempo real y la autenticación con Cognito garantiza la seguridad del acceso. ¡Implementa esta combinación y lleva tu aplicación a otro nivel!

¿Tienes dudas o sugerencias? ¡Déjamelo saber en los comentarios!