Создаем на Flow | Изучаем FCL — 2. Передавайте аргументы в скрипты
Published: 2022-06-30 14:49:31

## Краткий обзор
 
После работы с данными в этой статье вы должны знать, как это сделать:

- передать простые аргументы - `Int`,`String` и т. д.
- передавать сложные аргументы - `Arrays` и `Dictionaries`
- передавать сложные структуры - Arrays of Dictionaries и т.п.

> 💡Лучше учиться с помощью видео? К счастью для вас, есть видео, которое вы можете смотреть вместе с этим руководством. Рассказывает один и единственный разработчик Flow Developer Advocate - [Kimcodeashian](https://twitter.com/kimcodeashian)!

## Контент Kimazing

[https://youtu.be/DWz8Plv5n3k](https://youtu.be/DWz8Plv5n3k)

## Ранее в разделе "Изучение FCL"
В [предыдущем посте](https://dev.to/onflow/sozdaiem-na-flow-izuchaiem-fcl-1-vviedieniie-4g8j) мы узнали, как отправить на выполнение базовый скрипт Cadence. В этой статье я покажу вам, как передавать различные типы аргументов.

Для этого и всех следующих примеров мы будем использовать Codesandbox, чтобы упростить процесс 🙂 .

## Шаг 1 - Установка
Добавьте `"@onflow/fcl": "1.0.0"` в качестве зависимости

## Шаг 2 - Настройка
Как и в прошлый раз импортируем необходимые методы и настраиваем FCL:

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

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

## Шаг 3 - Передача целых значений
`passIntegers` передаст два целых аргумента простому скрипту Cadence, который вернет нам их сумму.

```javascript
const passIntegers = async () => {
  // Here we will store the code we want to execute.
  // We can inline it into the object we pass to "query" method,
  // but it feels cleaner this way
  const cadence = `
    pub fun main(a: Int, b: Int): Int{
      return a + b
    }
  `;

  // Even though both of the arguments are numbers, we need to pass them as strings representation
  const a = (5).toString();
  const b = (12).toString();
  const args = (arg, t) => [arg(a, t.Int), arg(b, t.Int)];

  // "query" will pass Cadence code and arguments to access node for execution and return us a result:
  // read more about "query" method on Flow Docs Site:
  // https://docs.onflow.org/fcl/reference/api/#query
  const result = await query({ cadence, args });
  console.log({ result }); //
};
```

## Шаг 4 - Передача нескольких различных типов
`passMultipleDifferentTypes` передаст аргументы String, Bool, UFix64 и Address.

```javascript
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;
  // All  numeric values should be passed as strings, remember? :)
  const c = "42.0";
  // Address should be passed as string value as well
  const d = "0x01";

  // Types should always mirror argument types defined in script
  const args = (arg, t) => [arg(a, t.String), arg(b, t.Bool), arg(c, t.UFix64), arg(d, t.Address)];

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

## Шаг 5 - Передача Array
Метод `passArray` передает строки Array и возвращает одну из них обратно.

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

  const a = ["Hello", "Cadence"];
  // Type of the argument is composed of t.Array and t.String
  const args = (arg, t) => [arg(a, t.Array(t.String))];

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

## Шаг 6 - Передача Dictionary
Метод `passDictionary` передает Dictionary в качестве аргумента, а затем возвращает значение одного из полей. Ключи указанного словаря будут иметь тип `String`, а значения - тип `Int`.

```javascript
const passDictionary = async () => {
  // In this example we will pass to Cadence Dictionary as argument
  // keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: {String: Int}): Int?{
      return a["amount"]
    }
  `;

  // Dictionaries should be represented as array of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [{ key: "amount", value: "42" }];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Dictionary({ key: t.String, value: t.Int }))
  ];

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

## Шаг 7 - Передача сложного аргумента
`passComplex` покажет, как передать Arrays of Dictionaries в качестве аргумента. Концептуально это смесь Arrays и Dictionary.

```javascript
const passComplex = async () => {
  // In this example we will pass an Array of Dictionaries as argument
  // Keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: [{String: Int}]): Int?{
      return a[0]["amount"]
    }
  `;

  // Array of Dictionaries should be represented as array of arrays of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [[{ key: "amount", value: "1337" }]];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Array(t.Dictionary({ key: t.String, value: t.Int })))
  ];

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

## Заключение
Давайте добавим IIFE в конец файла и заполним его методами, которые мы только что разобрали:

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

```
Когда все разрешится, в журнале консоли вы увидите следующее:

```javascript
{result: "17"}
{result: "0x0000000000000001"}
{result: "Cadence"}
{result: "42"}
{result: "1337"}
```
Практикуйтесь в передаче различных типов аргументов, поскольку в будущем это станет для вас обычным делом.

Полный код можно найти на Codesandbox здесь:
[https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel](https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel)

До скорого! 👋

## Информационные ресурсы
Другие источники, которые могут быть вам полезны:

- (ENG) | Документация Flow  - https://docs.onflow.org/ - более детальная информации о блокчейне Flow и как взаимодействовать с ним
- (ENG) | Flow Portal - https://flow.com/ - your entry point to Flow
- (ENG) | FCL JS - https://github.com/onflow/fcl-js - Исходный код и возможность поучаствовать в разработке библиотеки FCL JS library
- (ENG) | Cadence - https://docs.onflow.org/cadence/ - Введение в язык программирования Cadence
- Codesandbox - https://codesandbox.io - Замечательная среда разработки и прототипирования прямо в вашем браузере