No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Variables y alias

14/24
Recursos

Aportes 4

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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
      }
    ]
  }
}

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 鈥淕raphQL 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,
    });