Skip to main content
Version: Current

Scripts

Scripts let you run non-permanent Cadence scripts on the Flow blockchain. They can return data.

They always need to contain a pub fun main() function as an entry point to the script.

fcl.query is a function that sends Cadence scripts to the chain and receives back decoded responses.

The cadence key inside the object sent to the query function is a JavaScript Tagged Template Literal that we can pass Cadence code into.

Sending your first Script

In the following code snippet we are going to send a script to the Flow blockchain. The script is going to add two numbers, and return them.


_11
import * as fcl from "@onflow/fcl"
_11
_11
const response = await fcl.query({
_11
cadence: `
_11
pub fun main(): Int {
_11
return 1 + 2
_11
}
_11
`
_11
})
_11
_11
console.log(response) // 3

A more complicated Script

Things like Resources and Structs are fairly common place in Cadence.

In the following code snippet, our script defines a struct called Point, it then returns a list of them.

The closest thing to a Structure in JavaScript is an object. In this case when we decode this response, we would be expecting to get back an array of objects, where the objects have an x and y value.


_21
import * as fcl from "@onflow/fcl"
_21
_21
const response = await fcl.query({
_21
cadence: `
_21
pub struct Point {
_21
pub var x: Int
_21
pub var y: Int
_21
_21
init(x: Int, y: Int) {
_21
self.x = x
_21
self.y = y
_21
}
_21
}
_21
_21
pub fun main(): [Point] {
_21
return [Point(x: 1, y: 1), Point(x: 2, y: 2)]
_21
}
_21
`
_21
})
_21
_21
console.log(response) // [{x:1, y:1}, {x:2, y:2}]

Transforming the data we get back with custom decoders.

In our dapp, we probably have a way of representing these Cadence values internally. In the above example it might be a Point class.

FCL enables us to provide custom decoders that we can use to transform the data we receive from the Flow blockchain at the edge, before anything else in our dapp gets a chance to look at it.

We add these custom decoders by Configuring FCL. This lets us set it once when our dapp starts up and use our normalized data through out the rest of our dapp.

In the below example we will use the concept of a Point again, but this time, we will add a custom decoder, that enables fcl.decode to transform it into a custom JavaScript Point class.


_31
import * as fcl from "@onflow/fcl"
_31
_31
class Point {
_31
constructor({ x, y }) {
_31
this.x = x
_31
this.y = y
_31
}
_31
}
_31
_31
fcl.config()
_31
.put("decoder.Point", point => new Point(point))
_31
_31
const response = await fcl.query({
_31
cadence: `
_31
pub struct Point {
_31
pub var x: Int
_31
pub var y: Int
_31
_31
init(x: Int, y: Int) {
_31
self.x = x
_31
self.y = y
_31
}
_31
}
_31
_31
pub fun main(): [Point] {
_31
return [Point(x: 1, y: 1), Point(x: 2, y: 2)]
_31
}
_31
`
_31
})
_31
_31
console.log(response) // [Point{x:1, y:1}, Point{x:2, y:2}]

To learn more about query, check out the API documentation.