Variables y alias

Me está encantando el curso, finalmente estoy comprendiendo Graphql.

Variables y alias

En GraphQL, podemos utilizar variables y alias para mejorar la organización y manejo de nuestras consultas desde el lado del cliente. Veamos cómo utilizar estas funcionalidades:

Alias

El alias nos permite asignar un nombre personalizado a una consulta y utilizarlo para referenciar el resultado obtenido. Esto es útil cuando deseamos realizar múltiples consultas al mismo servicio y distinguir sus resultados.

Para utilizar un alias, debemos seguir la siguiente sintaxis:

{
	aliasQueDeseamosUsar: servicio {
		name
		id
		description
	}
}

El resultado obtenido estará bajo el nombre del alias que hemos asignado:

Ejemplo:

{
	myProduct: products {
		name
		description
	}
}

# datos retornados
{
    "data": {
        "myProduct": [
            {
                "name": "Product 1",
                "description": "bla bla bla"
            },
            # ...
        ]
    }
}

Es importante destacar que los alias deben ser únicos para evitar conflictos al realizar la consulta.

Variables

Las variables nos permiten parametrizar nuestras consultas y facilitar el manejo de datos. Supongamos que deseamos utilizar nuestro endpoint de creación de un nuevo producto, pero con una gran cantidad de información. Para simplificar la consulta, podemos utilizar variables.

Primero, debemos modificar nuestra consulta de la siguiente manera:

mutation {
	addProduct(dto: {
		name: "nuevo producto",
		description: "la la la",
		price: 100,
		image: "img.jpg",
		categoryId: 1
	}){
		id
		name
		description
	}

En esta consulta, hemos definido una variable $dto del tipo CreateProductDto, que será utilizada como parámetro en la mutación addProduct.

# tendremos que nombrar la mutación 
# recibiremos una variable "$dto" que tiene que ser del tipo "CreateProductDto"
# se la enviamos al "addProduct" como parámetro
mutation createProduct($dto: CreateProductDto!){
	addProduct(dto: $dto){
		id
		name
		description
	}
}

Luego, desde nuestro cliente, ya sea Postman u otra herramienta similar, podemos utilizar la sección de “GraphQL Variables” para definir y enviar los valores de las variables. Por ejemplo:

{
  "dto": {
    "name": "nuevo producto",
		"description": "la la la",
		"price": 100,
		"image": "img.jpg",
		"categoryId": 1
  }
}

Es importante destacar que la definición de las variables debe estar en formato JSON.

Afortunadamente, gracias a estas funcionalidades en GraphQL, el backend puede proporcionar una API flexible y adaptable, ya que es indiferente cómo el usuario consuma los datos. La utilización de variables y alias permite una mayor organización y personalización en las consultas, simplificando la lógica del cliente y mejorando la experiencia de desarrollo.

Si les sale este error en Apollo server Preventing Cross-Site Request Forgery (CSRF) al usar la mutation desde el playground se resuelve de la siguiente manera:

 const server = new ApolloServer({
      typeDefs: await loadFiles('./src/**/*.graphql'),
      resolvers,
      playground: true,
      plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
      csrfPrevention: false,
    });

también podemos añadir variables a los Querys, no solo a las mutaciones
Query variables:

{
  "id1": 1,
  "id2": 2
}

Consulta:

query myProducts($id1: ID!, $id2: ID!) {
  p1: product(id: $id1){
    name,
    price
  }
  p2: product(id: $id2){
    name,
    price
  }
  products: allProducts{
    id,
    name,
    price
  }
}

tendríamos como respuesta

{
  "data": {
    "p1": {
      "name": "Product 1",
      "price": 100
    },
    "p2": {
      "name": "Product 2",
      "price": 200
    },
    "products": [
      {
        "id": "1",
        "name": "Product 1",
        "price": 100
      },
      {
        "id": "2",
        "name": "Product 2",
        "price": 200
      },
      {
        "id": "3",
        "name": "Product 3",
        "price": 300
      },
      {
        "id": "4",
        "name": "Product 4",
        "price": 400
      },
      {
        "id": "5",
        "name": "product 5",
        "price": 500
      },
      {
        "id": "6",
        "name": "product 6",
        "price": 600
      },
      {
        "id": "7",
        "name": "product 7",
        "price": 700
      }
    ]
  }
}