Overview

As your building your Web3 app, a common and useful task is to fetch the latest sealed block. Fetching the latest sealed block is useful for querying specific events and data to make sure everything is working as intended. This guide will teach you how to:

• how to use block function to fetch the latest sealed block, block by it’s heightor id
• the limitations of FCL related to block query

Blocks? Like in Tetris?

Well, not really 😅 Block is a construct designed to contain certain information, like specific amount of transactions, picked up by Collection nodes for execution. The different types of data that blocks contain:

• id - the block id, which can be used to retrieve a particular block by id
• height - the current block height (you can visualize it like if you are stacking boxes one on top of another)
• parentId - so you could go “back in time” and read information from the previous block
• timestamp - object, ****containing time related fields
• blockSeals - the details of which nodes executed and sealed the blocks
• collectionGuarantees - all signatures for the items in the block

Blocks in the blockchain are organized in such a way that each block (except for Genesis Block) is referencing a block attached to it from its “tail”. When you connect multiple blocks in this way you can envision they form a chain - hence the word blockchain 💡

Back to the Fun Part

There are at least two ways to query latest sealed block. We will cover the most simple by calling the block function - a pre-built interaction that returns the latest block (optionally sealed or not), by id, or by height. Since I already “hooked you in” let’s jump right in to see it in action and in detail!

Step 1 - Installation

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

Step 2 - Setup

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

// Import methods from FCL
import { block, config } from "@onflow/fcl";

// Specify the API endpoint - this time we will use Mainnet
const api = "https://rest-mainnet.onflow.org";

// Configure FCL to use mainnet as the access node
config().put("accessNode.api", api);

Finally

Since the block function doesn’t require any setup, we will run through the whole process in one go, without setting up additional methods as we did previously.

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

})();

If you check the console, you should the information about latest block there:

latestBlock 
{
    id: "29697cbe3f0b811f319c99e0002536c5404491feab39d1b3f63ac92faec16306",
    parentId: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    height: 69553091,
    timestamp: "2022-06-01T16:04:42.593016593Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(2)
}

Let’s use height field of the latestBlock and query another block by subtracting 1 from it:

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

  const previousBlock = await block({ height: latestBlock.height - 1 });
  console.log("previousBlock", previousBlock);
})();

Finally, let’s use parentId field of previousBlock to get another block by id:

(async () => {
  console.clear();

  const latestBlock = await block({ sealed: true });
  console.log("latestBlock", latestBlock);

  const previousBlock = await block({ height: latestBlock.height - 1 });
  console.log("previousBlock", previousBlock);

  const blockById = await block({ id: previousBlock.parentId });
  console.log("blockById", blockById);
})()

After updated code is executed, you should see a similar output in the console:

latestBlock 
{
    id: "29697cbe3f0b811f319c99e0002536c5404491feab39d1b3f63ac92faec16306",
    parentId: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    height: 69553091,
    timestamp: "2022-06-01T16:04:42.593016593Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(2)
}

previousBlock 
{
    id: "8bbb05e0e84fb78648b1673a67a5ddf1556a7d9bfd3a81c3afabd108c8234e1e",
    parentId: "3556f13dba2c2e5d543944139666b21d56d2ece8ceb00998e70ec5b007e4c0cd",
    height: 69553090,
    timestamp: "2022-06-01T16:04:41.751672413Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(0)
}

blockById 
{
    id: "3556f13dba2c2e5d543944139666b21d56d2ece8ceb00998e70ec5b007e4c0cd",
    parentId: "8ab3734670901b1d76b57e0ae53908d17b621ea7b7172565a9e07ffe591b2385",
    height: 69553089,
    timestamp: "2022-06-01T16:04:40.932442068Z",
    collectionGuarantees: Array(0),
    blockSeals: Array(1)

Why do we want sealed block? 🤔

As you have probably noticed, we are passing the sealed argument to retrieve the latest block. The block will be sealed by the Consensus nodes only when sufficient Result Approvals have been collected. In plain words, you can be sure that if your transaction was included in the block it was either executed or reverted.

Limitations

The process of getting a specific block - by either id or height - is limited to a current spork - a coordinated network upgrade process where node operators upgrade their node software and re-initialize with a consolidated representation of the previous spork's state.

You can find information about current and previous sporks on Flow Documentation site.

If the block you want to get is outside of the current spork, and you really need get that information - your only option is to use the [Flow Go SDK](https://github.com/onflow/flow-go) and point it to a specific Access Node. We won’t cover the process in this article, but maybe in a future series 😉

The full code could be found on Codesandbox here: https://codesandbox.io/s/dev-to-fcl-06-get-latest-block-5wiry0

Until next time 👋

Resources

• Example - https://codesandbox.io/s/dev-to-fcl-06-get-latest-block-5wiry0
• block function - https://docs.onflow.org/fcl/reference/api/#block

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