> For the complete documentation index, see [llms.txt](https://archive-docs.klaytn.foundation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-1.-connect-contract-to-frontend.md).

# 7-1. Connect Contract to Frontend

1. `src/klaytn`
   * caver.js
   * KlaystagramContract.js
2. `src/redux`

## 1) `src/klaytn` <a href="#id-1-src-klaytn" id="id-1-src-klaytn"></a>

`src/klaytn`: Contains files that help interact with Klaytn blockchain.

* `src/klaytn/caver.js`: Instantiates caver within configured setting.

  cf) caver-js is a RPC library which makes a connection to klaytn node, interacting with node or smart contract deployed on Klaytn.
* `src/klaytn/Klaystagram.js`: Creates an instance of contract using caver-js API. You can interact with contract through the instance

### `caver.js` <a href="#caver-js" id="caver-js"></a>

```javascript
/**
 * caver-js library helps making connection with klaytn node.
 * You can connect to specific klaytn node by setting 'rpcURL' value.
 * default rpcURL is 'https://public-en-baobab.klaytn.net'.
 */
import Caver from 'caver-js'

export const config = {
  rpcURL: 'https://public-en-baobab.klaytn.net'
}

export const cav = new Caver(config.rpcURL)

export default cav
```

After making the connection, you can call methods on smart contract with caver.

### `KlaystagramContract.js` <a href="#klaystagramcontract-js" id="klaystagramcontract-js"></a>

```javascript
// klaytn/KlaystagramContract.js

import { cav } from 'klaytn/caver'

/**
 * 1. Create contract instance
 * ex:) new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
 * You can call contract method through this instance.
 */

const KlaystagramContract = DEPLOYED_ABI
  && DEPLOYED_ADDRESS
  && new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)

export default KlaystagramContract
```

To interact with contract, we need a contract instance.

`KlaystagramContract` creates a contract instance to interact with Klaystagram contract, by providing `DEPLOYED_ABI`(Application Binary Interface) and `DEPLOYED_ADDRESS` to `cav.klay.Contract` API.

When compiling & deploying `Klaystagram.sol` contract ([5. Deploy Contract](/content/dapp/tutorials/klaystagram/5.-deploy-contract.md)), we already created `deployedABI` and `deployedAddress` files. They contain ABI of Klaystagram contract and deployed contract address.

And thanks to webpack's configuration, we can access it as variable.(`DEPLOYED_ADDRESS`, `DEPLOYED_ABI`)

* `DEPLOYED_ADDRESS` returns deployed Address
* `DEPLOYED_ABI` returns Klaystagram contract ABI

**cf) `contract ABI`(Application Binary Interface)**\
`contract ABI` is the interface for calling contract methods. With this interface, we can call contract methods as below

* `contractInstance.methods.methodName().call()`
* `contractInstance.methods.methodName().send({ ... })`

**Now we are ready to interact with contract in the application.**\
\&#xNAN;*cf. For more information, refer to* [*caver.klay.Contract*](/content/dapp/sdk/caver-js/v1.4.1/api-references/caver.klay.contract.md)*.*

## 2) `src/redux` <a href="#id-2-src-redux" id="id-2-src-redux"></a>

We are going to make API functions with Klaystagram instance. After calling API functions, we use redux store to controls all data flow.

1. Import contract instance

   By using `KlaystagramContract` instance, we can call contract's methods when components need to interact with contract.
2. Call contract method
3. Store data from contract

   If transaction is successful, we will call redux action to save information from contract to redux store.

```javascript
// src/redux/actions/photos.js

// 1. Import contract instance
import KlaystagramContract from 'klaytn/KlaystagramContract'

const setFeed = (feed) => ({
  type: SET_FEED,
  payload: { feed },
})

const updateFeed = (tokenId) => (dispatch, getState) => {

  // 2. Call contract method (CALL): getPhoto()
  KlaystagramContract.methods.getPhoto(tokenId).call()
    .then((newPhoto) => {
      const { photos: { feed } } = getState()
      const newFeed = [feedParser(newPhoto), ...feed]

      // 3. Store data from contract
      dispatch(setFeed(newFeed))
    })
}
```

Redux store controls all data flow in front-end


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-1.-connect-contract-to-frontend.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.