Construye en Flow: Aprende FCL - 3. Como retornar valores arbitrarios desde un script
Tags: javascript, web3, flow, fcl
Published: 2022-06-09 21:33:31

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

## Vista previa

En esta guía aprenderás como retornar un valor que contenga multiples otros valores que no son del mismo tipo. Haremos esto definiendo y usando `structs` en Cadence, es decir:

- definiendo un `Struct` en el cuerpo del script.
- creando una instancia del mencionado `Struct` y usándolo como valor de retorno del script.

## Previamente en “Aprende FCL”

En el post pasado, aprendimos como pasar argumentos a nuestro script en Cadence. Si recordamos el ejemplo `passMultipleDifferentTypes` podíamos retornar un valor único, a pesar de que pasábamos tipos de valor diferentes.

Hoy te mostraré como definir un `Struct` personalizado en el cuerpo de tu script para poder usarlo como valor de retorno.

Empecemos! 💪 

### Paso 1 - Instalación

Agrega `"onflow/fcl": "1.0.0"` como tu dependencia

### Paso 2 - Configuración

Como la última vez, importaremos los métodos necesarios para configurar FCL:

```jsx
import { query, config } from "@onflow/fcl";

const api = "https://rest-testnet.onflow.org";
config().put("accessNode.api", api);
```

### Paso 3 - Implementando el método `fetchCustom`

```jsx
const fetchCustom = async (name) => {
  const cadence = `
    // Este script te permite definir Structs personalizados en su cuerpo. 
		// Crearemos uno y lo llamaremos Custom (puedes usar cualquier nombre que quieras)
    pub struct Custom {
      pub let number: Int
      pub let address: Address
      
      init(number: Int, address: Address){
        self.number = number
        self.address = address
      }
    }

    pub fun main():Custom {
			// para crear una instancia del struct usa su nombre
			// y pásale los argumentos de inicializacion entre paréntesis
			let t = Custom(number: 42, address: 0x1337)
      return t
    }
  `;

  const custom = await query({ cadence });

  const { number, address } = custom;
	console.log(`number field is ${number}`)
	console.log(`address field is ${address}`)
};
```

### Finalmente

Como siempre , ejecutamos el código con una IIFE:

```jsx
(async () => {
  console.clear();
  await fetchCustom();
})();
```

Deberías ver el siguiente resultado en la consola:

```jsx
number field is: 42
address field is: 0x0000000000001337
```

Te perdiste? Puedes revisar el código completo en [este Codesandbox](https://codesandbox.io/s/dev-to-fcl-return-custom-struct-sgywnx).

Hasta la próxima  👋

## Recursos

- Código del ejemplo - [https://codesandbox.io/s/dev-to-fcl-return-custom-struct-sgywnx](https://codesandbox.io/s/dev-to-fcl-return-custom-struct-sgywnx?file=/src/index.js:1399-1512)
- Documentación sobre Structs en Cadence - [https://docs.onflow.org/cadence/language/composite-types/#composite-type-declaration-and-creation](https://docs.onflow.org/cadence/language/composite-types/#composite-type-declaration-and-creation)

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.