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

Mutacions

Següent ►
►

Les mutacions en GraphQL són operacions que permeten modificar dades en el servidor. A diferència de les consultes, que només llegeixen dades, les mutacions poden crear, actualitzar o eliminar dades. En aquest tema, aprendrem com definir i utilitzar mutacions en GraphQL.

Continguts

  1. Definició de Mutacions
  2. Estructura d'una Mutació
  3. Exemple Pràctic
  4. Exercicis Pràctics
  5. Solucions
  6. Errors Comuns i Consells
  7. Conclusió

Definició de Mutacions

Les mutacions es defineixen en l'esquema de GraphQL de manera similar a les consultes, però s'utilitza la paraula clau mutation en lloc de query. Les mutacions poden tenir arguments i retornar tipus complexos, igual que les consultes.

Estructura d'una Mutació

Una mutació en GraphQL té la següent estructura bàsica:

type Mutation {
  createUser(name: String!, email: String!): User
}

En aquest exemple, la mutació createUser pren dos arguments (name i email) i retorna un objecte de tipus User.

Definició del Tipus de Mutació

Primer, definim el tipus de mutació en l'esquema:

type Mutation {
  createUser(name: String!, email: String!): User
}

Definició del Tipus de Retorn

Després, definim el tipus de retorn, en aquest cas, User:

type User {
  id: ID!
  name: String!
  email: String!
}

Implementació del Resolver

Finalment, implementem el resolver per a la mutació:

const resolvers = {
  Mutation: {
    createUser: (parent, args, context, info) => {
      const newUser = {
        id: generateUniqueId(),
        name: args.name,
        email: args.email,
      };
      // Aquí afegim el nou usuari a la base de dades o a la llista d'usuaris
      users.push(newUser);
      return newUser;
    },
  },
};

Exemple Pràctic

Vegem un exemple complet de com definir i utilitzar una mutació per crear un nou usuari.

Esquema

type Mutation {
  createUser(name: String!, email: String!): User
}

type User {
  id: ID!
  name: String!
  email: String!
}

Resolver

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

const typeDefs = gql`
  type Mutation {
    createUser(name: String!, email: String!): User
  }

  type User {
    id: ID!
    name: String!
    email: String!
  }
`;

let users = [];
const generateUniqueId = () => '_' + Math.random().toString(36).substr(2, 9);

const resolvers = {
  Mutation: {
    createUser: (parent, args, context, info) => {
      const newUser = {
        id: generateUniqueId(),
        name: args.name,
        email: args.email,
      };
      users.push(newUser);
      return newUser;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Executar la Mutació

Podem executar la mutació utilitzant una eina com GraphiQL o Apollo Playground:

mutation {
  createUser(name: "John Doe", email: "[email protected]") {
    id
    name
    email
  }
}

Exercicis Pràctics

  1. Crear un Producte: Defineix una mutació createProduct que prengui name i price com a arguments i retorni un objecte Product amb id, name i price.

  2. Actualitzar un Usuari: Defineix una mutació updateUser que prengui id, name i email com a arguments i retorni l'objecte User actualitzat.

  3. Eliminar un Usuari: Defineix una mutació deleteUser que prengui id com a argument i retorni un missatge de confirmació.

Solucions

Solució 1: Crear un Producte

Esquema

type Mutation {
  createProduct(name: String!, price: Float!): Product
}

type Product {
  id: ID!
  name: String!
  price: Float!
}

Resolver

const resolvers = {
  Mutation: {
    createProduct: (parent, args, context, info) => {
      const newProduct = {
        id: generateUniqueId(),
        name: args.name,
        price: args.price,
      };
      products.push(newProduct);
      return newProduct;
    },
  },
};

Solució 2: Actualitzar un Usuari

Esquema

type Mutation {
  updateUser(id: ID!, name: String, email: String): User
}

Resolver

const resolvers = {
  Mutation: {
    updateUser: (parent, args, context, info) => {
      const user = users.find(user => user.id === args.id);
      if (!user) {
        throw new Error('User not found');
      }
      if (args.name) user.name = args.name;
      if (args.email) user.email = args.email;
      return user;
    },
  },
};

Solució 3: Eliminar un Usuari

Esquema

type Mutation {
  deleteUser(id: ID!): String
}

Resolver

const resolvers = {
  Mutation: {
    deleteUser: (parent, args, context, info) => {
      const userIndex = users.findIndex(user => user.id === args.id);
      if (userIndex === -1) {
        throw new Error('User not found');
      }
      users.splice(userIndex, 1);
      return 'User deleted successfully';
    },
  },
};

Errors Comuns i Consells

  1. No retornar el tipus correcte: Assegura't que la mutació retorna el tipus especificat en l'esquema.
  2. No gestionar errors: Implementa una gestió d'errors adequada per a situacions com ara no trobar l'usuari o el producte.
  3. No validar els arguments: Valida els arguments abans de processar la mutació per evitar errors inesperats.

Conclusió

Les mutacions són una part fonamental de GraphQL que permeten modificar dades en el servidor. Hem après com definir i implementar mutacions, així com alguns exemples pràctics i exercicis per reforçar els conceptes apresos. En el següent tema, explorarem els resolvers en més detall.

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