Skip to main content

Hello World Pt. 3 - Interacting with the Blockchain

Flow Client Library (FCL), is a JavaScript library developed to facilitate interactions with the Flow blockchain. It provides developers with tools to build, integrate, and interact with Flow directly from web applications. This web app quickstart will get you interacting with a contract already deployed to Flow.

For this tutorial, we're going to be making a React app with Create React App. We'll try and keep the code as simple as possible in case you're coming from another framework.

First, let's create our app and then navigate to it with the following terminal commands:


_10
npx create-react-app fcl-app-quickstart
_10
cd fcl-app-quickstart

It comes with a default layout, but let's remove it in src/App.js with something simple. Copy and paste this:


_13
// src/App.js
_13
_13
import './App.css';
_13
_13
function App() {
_13
return (
_13
<div className="App">
_13
<div>FCL App Quickstart</div>
_13
</div>
_13
);
_13
}
_13
_13
export default App;

Now let's run our app with the following npm command:


_10
npm start

Setting Up FCL

In order to use FCL, we need to install it. Let's run the following to download the library and set it as a dependency in our project:


_10
npm install @onflow/fcl --save

Next we'll want to add to our FCL configuration. There's a lot you can do here, but for this simple example, let's configure accessNode.api to talk to the Testnet Flow Access Node. An Access Node serves as the primary point of interaction for clients, such as wallets, dapps, and other services, to communicate with the Flow network. It provides a gateway for these clients to submit transactions, query data, and retrieve information without having to connect to the entire network or maintain a full copy of the blockchain.

For our example, we are going to point at a free Access Node provided by Flow. Add the following config code to your src/App.js


_10
// src/App.js
_10
_10
import * as fcl from '@onflow/fcl'
_10
_10
fcl.config({
_10
'accessNode.api': 'https://rest-testnet.onflow.org'
_10
})

Querying the Chain

On Flow, you can interact with a contract by reading from the chain with a script or changing its state with a transaction. Reading is free and is done with FCL by passing a Cadence (the smart contract language of Flow) script to fcl.query. For our example we are going to read from a HelloWorld contract deployed to the account 0x9dca641e9a4b691b on testnet (you can view the contract here to see what it looks like).

In the same src/App.js file, let's create app state to store our greeting and query the chain when the component renders in order to fetch the greeting state from the HelloWorld contract.


_20
const [greeting, setGreeting] = useState("");
_20
_20
useEffect(() => {
_20
const queryChain = async () => {
_20
const res = await fcl.query({
_20
cadence: `
_20
import HelloWorld from 0x9dca641e9a4b691b
_20
_20
access(all) fun main(): String {
_20
return HelloWorld.greeting
_20
}
_20
`
_20
});
_20
_20
console.log(res);
_20
setGreeting(res);
_20
}
_20
_20
queryChain();
_20
}, []);

At this point our entire src/App.js file should look like this:


_39
import { useEffect, useState } from 'react';
_39
import './App.css';
_39
import * as fcl from '@onflow/fcl';
_39
_39
fcl.config({
_39
'accessNode.api': 'https://rest-testnet.onflow.org'
_39
});
_39
_39
function App() {
_39
const [greeting, setGreeting] = useState("");
_39
_39
useEffect(() => {
_39
const queryChain = async () => {
_39
const res = await fcl.query({
_39
cadence: `
_39
import HelloWorld from 0x9dca641e9a4b691b
_39
_39
access(all) fun main(): String {
_39
return HelloWorld.greeting
_39
}
_39
`
_39
});
_39
_39
console.log(res);
_39
setGreeting(res);
_39
};
_39
_39
queryChain();
_39
}, []);
_39
_39
return (
_39
<div className="App">
_39
<div>FCL App Quickstart</div>
_39
<div>{greeting}</div>
_39
</div>
_39
);
_39
}
_39
_39
export default App;

You just built an app on Flow!

Mutating Chain State and More

For a deeper dive into writing an FCL app, such as how to change the chain state with FCL, check out this guide or the FCL documentation.