Construye en Flow: Aprende FCL - 2. Pasando argumentos a Scripts
Tags: javascript, tutorial, flow, fcl
Published: 2022-05-30 17:26:13

**Resumen**

Después de trabajar con el código en este post, sabrás como:

- Pasar simple argumentos - `Int` , `String`, etc.
- Pasar argumentos complejos - Arrays y Dictionaries.
- Pasar estructuras complejas - Arrays de Dictionaries, etc.

**Previamente en “Aprende FCL”**

En posts pasados aprendimos como enviar scripts basicos en Cadence para su ejecución. En este te mostraré como pasar diferentes tipos de argumentos.

Para este y todos los siguientes ejemplos usaremos Codesandbox para simplificar el proceso.

**Paso 1 - Instalación**

Agrega  `"@onflow/fcl": "1.0.0"` como dependencia a tu proyecto.

**Paso 2 - Setup** 

Como la vez anterior importaremos los métodos necesarios y configuraremos FCL:

```jsx
import { query, config } from "@onflow/fcl";
const api = "[https://rest-testnet.onflow.org](https://rest-testnet.onflow.org/)";
config().put("accessNode.api", api);
```

**Paso 3 - Pasar enteros**

`passIntegers` pasará dos enteros como argumentos a un simple script en Cadence el cual retornará su suma.

```jsx
const passIntegers = async () => {
// Aquí almacenaremos el código que queremos ejecutar.
// Podemos ponerlo en la misma línea que pasamos el método "query"
// pero se ve mas simple de esta manera.
const cadence = pub fun main(a: Int, b: Int): Int{
       return a + b     
};

// A pesar de que ambos argumentos son números, tenemos que pasarlos como String.
const a = (5).toString();
const b = (12).toString();
const args = (arg, t) => [arg(a, t.Int), arg(b, t.Int)];

// "query" pasará código Cadence y los argumentos para acceder a un nodo para ejecutarse y retornará el resultado
// lee más acerca del método "query" en la documentación de FCL:
// [https://docs.onflow.org/fcl/reference/api/#query](https://docs.onflow.org/fcl/reference/api/#query)
const result = await query({ cadence, args });
console.log({ result }); 
};
```

**Paso 4 - Pasar multiples tipos diferentes**

`passMultipleDifferentTypes` pasará argumentos de tipo String, Bool, UFix64 y Address.

```jsx
const passMultipleDifferentTypes = async () => {
  const cadence = `
    pub fun main(a: String, b: Bool, c: UFix64, d: Address): Address{
      return d
    }
  `;

  const a = "Hello";
  const b = true;
	// Todos los valores numericos tienen que ser pasados como Strings, recuerdas? :)
  const c = "42.0";
	// Las direcciones también deberían ser pasadas como Strings.
  const d = "0x01";

  // No todos los tipos son los mismos como especificamos en nuestro codigo en Cadence.
  const args = (arg, t) => [arg(a, t.String), arg(b, t.Bool), arg(c, t.UFix64)];

  const result = await query({ cadence, args });
  console.log({ result }); 
};
```

**Paso 5 - Pasar un Array**

El método`passArray` pasará un array de Strings y retornará una de ellas.

```jsx
const passArray = async () => {
  const cadence = `
    pub fun main(a: [String]): String{
      return a[1]
    }
  `;

  const a = ["Hello", "Cadence"];
	// El tipo del argumento esta compuesto por t.Array y t.String
  const args = (arg, t) => [arg(a, t.Array(t.String))];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

```

**Paso 6 - Pasar un Dictionary**

El método`passDictionary` pasará un Dictionary como argument y luego retornará el valor de uno de los campos en el diccionario. Las llaves de dicho Dictionary seran de tipo `String` y los valores de tipo `Int`.  

```jsx
const passDictionary = async () => {
	// En este ejemplo pasaremos un diccionario de Cadence como argumento.
	// Las llaves seran de tipo String y los valores de tipo Int.
  const cadence = `
    pub fun main(a: {String: Int}): Int?{
      return a["amount"]
    }
  `;

	// Los diccionarios deben ser representados como listas de pares de clave y valor.
	// Nótese que aquí deberiamos pasar un valor numérico como String 
  const a = [{ key: "amount", value: "42" }];
	// Para nuestro caso el tipo del diccionario esta compuesto de t.Dictionary, t.String y t.Int
  const args = (arg, t) => [
    arg(a, t.Dictionary({ key: t.String, value: t.Int }))
  ];

  const result = await query({ cadence, args });
  console.log({ result }); //
};
```

**Paso 7 - Pasar argumentos complejos**

El método`passComplex` demostrará como pasar un listado de diccionarios como argumento. Conceptualmente es una combinación de Arrays y tipos de Dictionary.

**Finalmente**

Agreguemos un IIFE  al final del archivo para popularlo con los métodos que acabamos de definir.

```jsx
(async () => {
  console.clear();
  await passIntegers();
  await passMultipleDifferentTypes();
  await passArray();
  await passDictionary();
  await passComplex();
})();
```

Cuando el polvo se asiente deberías ver lo siguiente en el historial de la consola.

```jsx
{result: "17"}
{result: "0x0000000000000001"}
{result: "Cadence"}
{result: "42"}
{result: "1337"}
```

Practica pasando diferentes tipos de argumentos, debería ser una tarea común para ti en el futuro.

El código completo puede ser encontrado en Codesandbox aquí [https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel](https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel)

Hasta la próxima! 👋

**Recursos**

Otros recursos que te podrían ser útil:

- **Documentación de Flow** - [https://docs.onflow.org/](https://docs.onflow.org/) - Más información detallada acerca de la blockchain de Flow y como interactuar con ella.
- **Flow Portal** - [https://flow.com/](https://flow.com/) - Tu portal de entrada a Flow.
- **FCL JS** - [https://github.com/onflow/fcl-js](https://github.com/onflow/fcl-js) - Código fuente y la habilidad de contribuir a la libreria de FCL JS.
- **Cadence** - [https://docs.onflow.org/cadence/](https://docs.onflow.org/cadence/) - Introduccion a Cadence.
- **Codesandbox** - [https://codesandbox.io](https://codesandbox.io/) - Un editor de texto genial para prototipar en el navegador.

*Esta es una traducción al español del segundo artículo de la serie Build on Flow | Learn FCL escrita por [Maksimus Starka](https://twitter.com/MaxStalker).*