DEV Community

Cover image for Conectando Frontend React con APIs Serverless en AWS con GraphQL
Gustavo Ramirez
Gustavo Ramirez

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Inicializa el proyecto:

amplify init
Enter fullscreen mode Exit fullscreen mode

Agregar el Servicio AppSync

Añade GraphQL a tu proyecto:

amplify add api
Enter fullscreen mode Exit fullscreen mode

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!
}
Enter fullscreen mode Exit fullscreen mode

Implementar el Backend

Ejecuta el siguiente comando para desplegar la API:

amplify push
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

Crear la Consulta

queries.js 

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

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

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;
Enter fullscreen mode Exit fullscreen mode

Buenas Prácticas de Estructuración

  1. Modularización del Código: Organiza consultas y mutaciones en directorios específicos.
  2. Autenticación Centralizada: Maneja los tokens en un contexto o servicio compartido.
  3. Tipado con TypeScript: Utiliza tipos para garantizar la integridad de los datos.
  4. 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!

Top comments (0)