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:
_10npx create-react-app fcl-app-quickstart_10cd 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_13import './App.css';_13_13function App() {_13 return (_13 <div className="App">_13 <div>FCL App Quickstart</div>_13 </div>_13 );_13}_13_13export default App;
Now let's run our app with the following npm command:
_10npm 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:
_10npm 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_10import * as fcl from '@onflow/fcl'_10_10fcl.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.
_20const [greeting, setGreeting] = useState("");_20_20useEffect(() => {_20 const queryChain = async () => {_20 const res = await fcl.query({_20 cadence: `_20 import HelloWorld from 0x9dca641e9a4b691b_20_20 pub 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:
_39import { useEffect, useState } from 'react';_39import './App.css';_39import * as fcl from '@onflow/fcl';_39_39fcl.config({_39 'accessNode.api': 'https://rest-testnet.onflow.org'_39});_39_39function 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 pub 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_39export 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.