El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Construcció d'una aplicació full-stack

Següent ►
►

En aquest tema, aprendrem a construir una aplicació full-stack utilitzant GraphQL. Aquest procés inclou la creació d'un servidor GraphQL, la connexió a una base de dades, la implementació de resolvers, i la construcció d'un client que consumeixi l'API GraphQL. Utilitzarem Node.js per al servidor i React amb Apollo Client per al client.

Objectius del tema

  • Configurar un servidor GraphQL amb Node.js.
  • Connectar el servidor a una base de dades.
  • Implementar resolvers per a consultes i mutacions.
  • Construir un client React que consumeixi l'API GraphQL.

Requisits previs

  • Coneixements bàsics de JavaScript i Node.js.
  • Familiaritat amb React.
  • Coneixements bàsics de GraphQL.

Passos per construir l'aplicació full-stack

  1. Configuració del servidor GraphQL

Instal·lació de dependències

Primer, crearem un nou projecte Node.js i instal·larem les dependències necessàries.

mkdir fullstack-graphql
cd fullstack-graphql
npm init -y
npm install express express-graphql graphql mongoose

Configuració del servidor

Crearem un fitxer server.js per configurar el servidor GraphQL.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const mongoose = require('mongoose');

// Connexió a la base de dades
mongoose.connect('mongodb://localhost:27017/fullstack', { useNewUrlParser: true, useUnifiedTopology: true });

// Definició de l'esquema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Definició dels resolvers
const root = {
  hello: () => 'Hello, world!',
};

// Configuració del servidor Express
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000, () => console.log('Servidor en funcionament a http://localhost:4000/graphql'));

  1. Connexió a una base de dades

Definició del model

Crearem un model de Mongoose per gestionar les dades. Per exemple, un model d'usuari.

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
});

const User = mongoose.model('User', userSchema);

module.exports = User;

Actualització de l'esquema i resolvers

Actualitzarem l'esquema GraphQL per incloure operacions sobre els usuaris.

const { buildSchema } = require('graphql');
const User = require('./models/user');

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }

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

const root = {
  users: async () => {
    return await User.find();
  },
  addUser: async ({ name, email }) => {
    const user = new User({ name, email });
    await user.save();
    return user;
  },
};

  1. Construcció del client React

Instal·lació de dependències

Crearem un nou projecte React i instal·larem Apollo Client.

npx create-react-app client
cd client
npm install @apollo/client graphql

Configuració d'Apollo Client

Configurarem Apollo Client per connectar-se al nostre servidor GraphQL.

// src/index.js
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')
);

Creació de components

Crearem components per mostrar i afegir usuaris.

// src/App.js
import React from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';

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

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

function App() {
  const { loading, error, data } = useQuery(GET_USERS);
  const [addUser] = useMutation(ADD_USER);

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

  let nameInput, emailInput;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
      <form
        onSubmit={e => {
          e.preventDefault();
          addUser({ variables: { name: nameInput.value, email: emailInput.value } });
          nameInput.value = '';
          emailInput.value = '';
        }}
      >
        <input
          ref={node => {
            nameInput = node;
          }}
          placeholder="Name"
        />
        <input
          ref={node => {
            emailInput = node;
          }}
          placeholder="Email"
        />
        <button type="submit">Add User</button>
      </form>
    </div>
  );
}

export default App;

Exercicis pràctics

Exercici 1: Afegir un camp d'edat als usuaris

  1. Actualitza el model d'usuari per incloure un camp age.
  2. Actualitza l'esquema GraphQL per incloure el camp age en les consultes i mutacions.
  3. Actualitza el client React per permetre l'entrada i visualització de l'edat dels usuaris.

Exercici 2: Implementar una mutació per eliminar usuaris

  1. Afegeix una mutació a l'esquema GraphQL per eliminar un usuari per ID.
  2. Implementa el resolver corresponent.
  3. Actualitza el client React per permetre l'eliminació d'usuaris.

Resum

En aquest tema, hem après a construir una aplicació full-stack utilitzant GraphQL. Hem configurat un servidor GraphQL amb Node.js, connectat a una base de dades, implementat resolvers, i construït un client React que consumeix l'API GraphQL. A més, hem proporcionat exercicis pràctics per reforçar els conceptes apresos.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats