Build on FLOW | Learn FCL - 3. How to Return Custom Value from Script

Overview

In this guide you will learn how to return value containing multiple other values that doesn’t share the same type. We will do this by defining and using custom Cadence Struct.

• define custom Struct in the body of the script
• create instance of aforementioned Struct and use it as return value of the script

💡 Learn better with video? Lucky for you there is a video you can follow along w/ this guide. Narrated by one and only Flow Developer Advocate Kimcodeashian!

Kimazing Content

Previously on "Learn FCL"

In the previous post, we learned how to pass arguments to our Cadence script. But if you recall from one of the examples - passMultipleDifferentTypes - we could only return a single value, even though we passed in multiple different types.

Today, I will show you how you can define a custom Struct in the body of your script and then use it as a return type.

Let’s begin! 💪

Step 1 - Installation

Add "@onflow/fcl": "1.0.0" as your dependency

Step 2 - Setup

Just like the last time, we will import the necessary methods and setup FCL:

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

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

Step 3 - Implement fetchCustom method

It is allowed define new Structs in the body of the script. We will create one and call it Custom(use can use any name you want)

const fetchCustom = async (name) => {
  const cadence = `
    // We will define custom Struct with name Custom :)
    pub struct Custom {

      pub let number: Int
      pub let address: Address

      // underscore before name of the arguments will allow us to pass values
      // without specifying the name of the arguments, which is usefull when
      // you have only a few of them

      init(number: Int, address: Address){
        self.number = number
        self.address = address
      }
    }

    pub fun main():Custom {
        // in order to create instance of a struct you use it's name
        // and pass initialization arguments in parentheses
        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}`)
};

Finally

As always, let’s execute the code with IIFE:

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

You should see the following result in the console:

number field is: 42
address field is: 0x0000000000001337

Did you get lost 🤷‍♂️? No worries 😉 - checkout the full code on Codesandbox

Next time we will put our aquired skills to use and use .find deployed contract to convert .find identity name to address.

Until next time 👋

Resources

• Example Code - https://codesandbox.io/s/dev-to-fcl-return-custom-struct-sgywnx
• Cadence Structs - https://docs.onflow.org/cadence/language/composite-types/#composite-type-declaration-and-creation

Other resources you might find useful:

• Flow Docs Site - https://docs.onflow.org/ - More detailed information about Flow blockchain and how to interact with it
• Flow Portal - https://flow.com/ - your entry point to Flow
• FCL JS - https://github.com/onflow/fcl-js - Source code and ability to contribute to the FCL JS library
• Cadence - https://docs.onflow.org/cadence/ - Introduction to Cadence
• Codesandbox - https://codesandbox.io - An amazing in-browser IDE enabling quick prototyping