El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Construcción de una Aplicación Full-stack

Siguiente ►
►

En este módulo, aprenderemos a construir una aplicación full-stack utilizando GraphQL. Este proceso implicará tanto el desarrollo del servidor GraphQL como la integración con un cliente front-end. A lo largo de este tema, cubriremos los siguientes puntos:

  1. Configuración del Servidor GraphQL
  2. Definición del Esquema y Resolvers
  3. Configuración del Cliente Front-end
  4. Integración del Cliente con el Servidor
  5. Pruebas y Despliegue

  1. Configuración del Servidor GraphQL

Paso 1: Inicializar el Proyecto

Primero, necesitamos crear un nuevo proyecto Node.js. Abre tu terminal y ejecuta los siguientes comandos:

mkdir fullstack-graphql
cd fullstack-graphql
npm init -y

Paso 2: Instalar Dependencias

Instalaremos las dependencias necesarias para configurar un servidor GraphQL con Express y Apollo Server.

npm install express apollo-server-express graphql

Paso 3: Configurar el Servidor

Crea un archivo index.js en la raíz del proyecto y añade el siguiente código para configurar el servidor Express y Apollo Server:

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const app = express();

// Definición del esquema
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Definición de los resolvers
const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

// Configuración del servidor Apollo
const server = new ApolloServer({ typeDefs, resolvers });
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

Este código configura un servidor básico de GraphQL que responde a una consulta hello.

  1. Definición del Esquema y Resolvers

Paso 1: Definir el Esquema

Vamos a expandir nuestro esquema para incluir un modelo de usuario. Modifica el archivo index.js para incluir el siguiente esquema:

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }

  type Mutation {
    addUser(name: String!, email: String!): User
  }
`;

Paso 2: Definir los Resolvers

Añade los resolvers para manejar las consultas y mutaciones:

let users = [];

const resolvers = {
  Query: {
    users: () => users,
  },
  Mutation: {
    addUser: (_, { name, email }) => {
      const user = { id: users.length + 1, name, email };
      users.push(user);
      return user;
    },
  },
};

  1. Configuración del Cliente Front-end

Paso 1: Crear el Proyecto React

En una nueva terminal, crea un proyecto React utilizando Create React App:

npx create-react-app client
cd client

Paso 2: Instalar Apollo Client

Instala las dependencias necesarias para Apollo Client:

npm install @apollo/client graphql

Paso 3: Configurar Apollo Client

En el archivo src/index.js, configura Apollo Client:

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

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

  1. Integración del Cliente con el Servidor

Paso 1: Crear Componentes

Crea un componente UserList para mostrar la lista de usuarios y un componente AddUser para añadir nuevos usuarios.

UserList.js

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

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

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.users.map(({ id, name, email }) => (
        <li key={id}>
          {name} - {email}
        </li>
      ))}
    </ul>
  );
};

export default UserList;

AddUser.js

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser] = useMutation(ADD_USER);

  const handleSubmit = (e) => {
    e.preventDefault();
    addUser({ variables: { name, email } });
    setName('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Add User</button>
    </form>
  );
};

export default AddUser;

Paso 2: Integrar Componentes en la Aplicación

Modifica el archivo src/App.js para incluir los componentes UserList y AddUser:

import React from 'react';
import UserList from './UserList';
import AddUser from './AddUser';

const App = () => (
  <div>
    <h1>Users</h1>
    <AddUser />
    <UserList />
  </div>
);

export default App;

  1. Pruebas y Despliegue

Pruebas

Para probar la aplicación, asegúrate de que el servidor y el cliente estén ejecutándose:

# En la carpeta del servidor
node index.js

# En la carpeta del cliente
npm start

Despliegue

Para desplegar la aplicación, puedes utilizar servicios como Heroku, Vercel o Netlify. Asegúrate de configurar correctamente las variables de entorno y los scripts de despliegue.

Conclusión

En este tema, hemos construido una aplicación full-stack utilizando GraphQL. Hemos cubierto la configuración del servidor, la definición del esquema y los resolvers, la configuración del cliente front-end y la integración de ambos. Además, hemos visto cómo probar y desplegar la aplicación. Con estos conocimientos, estás preparado para construir aplicaciones más complejas y robustas utilizando GraphQL.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados