Make your first multi-chain Web3 app with GraphQL

What

Some potential applications of multi-chain Web3 apps built with GraphQL:

1. Decentralized finance (DeFi): Multi-chain Web3 apps can be used to build DeFi applications that allow users to interact with various blockchain networks, such as trading cryptocurrencies, lending and borrowing, and liquidity provision.
2. NFT marketplaces: Non-fungible tokens (NFTs) are a type of digital asset that can be used to represent unique items such as art, collectibles, and in-game assets. Multi-chain Web3 apps can be used to build NFT marketplaces that allow users to buy, sell, and trade NFTs across various blockchain networks.
3. Decentralized social networks: Multi-chain Web3 apps can also be used to build decentralized social networks that allow users to interact with each other and share content across multiple blockchain networks.
4. Gaming: Decentralized gaming platforms that allow users to play games and earn rewards across various blockchain networks.

Why

GraphQL is an excellent choice for building multi-chain Web3 apps:

1. Flexible data querying: GraphQL allows you to fetch only the data you need, reducing the amount of data transferred over the network and improving app performance. This is especially useful when dealing with multiple blockchains, each with their own unique data structures.
2. Efficient performance: Similarly, you can fetch multiple resources in a single query, reducing the number of requests needed to retrieve data from different blockchains.
3. Multiple language support: GraphQL is not tied to any specific programming language, so you can use it with any language you choose. This makes it easy to integrate with existing codebases and use the language that best suits your needs.
4. Simplified API management: With GraphQL, you can easily manage your API by defining a single schema that maps to multiple blockchains. This simplifies the process of updating your API as new chains are added or removed.
5. Better developer experience: With GraphQL’s powerful data querying and type system, developers can easily explore and understand the data available in an app. This can lead to a more streamlined development process and fewer errors in code.
6. Code generation: Users are able to generate client code on the fly without tedious and error-prone manual endpoint based code via multiple templates in numerous languages backed by popular libraries.
7. Real-time subscription: It is possible to use websocket subscriptions, where it is available, to get a stream of updates through lightweight socket polling.

Overall, the potential applications of multi-chain Web3 apps built with GraphQL are vast and varied, ranging from finance to gaming to social networks. By leveraging the power and flexibility of GraphQL, developers can build applications that are efficient, performant, and accessible across multiple blockchain networks.

How

Here’s how you can get started building your first multi-chain Web3 app with GraphQL.

1. Set up your development environment: Before you can start building your app, you’ll need to set up your development environment. Let’s say, that’s going to be Javascript, you can also add the GraphQL client library of your choice.
2. Define your query: The GraphQL schema defines the types of data that can be queried and the relationships between them. You’ll need to define your query based on the data you want to fetch according to the schema.
3. Write your wrapper code: Resolvers are functions that execute GraphQL queries and return the requested data. You’ll need to write resolvers for each type of data you want to fetch.
4. Test and deploy: Once you’ve written your queries, you can test your GraphQL API using a tool like GraphiQL dashboard/playground. If everything looks good, you can deploy your API to a production environment.

By following these steps, you can build a powerful multi-chain Web3 app with GraphQL as your API layer. With its flexibility and efficiency, Oraclus GraphQL APIs make it easy to fetch the exact data you need from multiple blockchains.

Example

Suppose we want to get last ERC20 transactions from multiple chains at once, and suppose we only care about token info, then we can write a GraphQL query like this:

query ERC20 {
  transactions(address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045") {
    chain
    tokenSymbol
    value
    to
    tokenDecimal
    timeStamp
    tokenName
  }
}

Here is a simple example how to query Oraclus GraphQL API with plain Javascript and no client libraries:

// main v1 api endpoint
let api_url = "https://leap.oraclus.com/api/v1/graphql"

// Vitalik Buterin's public address as an example
let address = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"

// typed query
let query = `
query ERC20($address: String!) {
  transactions(address: $address) {
    chain
    tokenSymbol
    value
    to
    tokenDecimal
    timeStamp
    tokenName
  }
}
`

fetch(api_url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    query,
    variables: { address },
  }),
})
  .then(r => r.json())
  .then(data => console.log(data))

And the output is exactly what we’ve asked for, just the data we may build visualizations, analytics with:

{
    "data": {
        "transactions": [
            {
                "chain": "ethereum",
                "tokenSymbol": "VITALIK",
                "value": "10056015827396957",
                "to": "0x913a4ce296a5b7790f8f04adf19f9b39a7516f22",
                "tokenDecimal": "9",
                "timeStamp": "1682652827",
                "tokenName": "Vitalik Buterin"
            },
            {
                "chain": "binance",
                "tokenSymbol": "VKETH",
                "value": "66004438371183",
                "to": "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
                "tokenDecimal": "9",
                "timeStamp": "1682857572",
                "tokenName": "VitalikETHTOKEN"
            },
            {
                "chain": "polygon",
                "tokenSymbol": "AIRx",
                "value": "55000000000000",
                "to": "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
                "tokenDecimal": "8",
                "timeStamp": "1682937362",
                "tokenName": "Aircoins"
            },
            {
                "chain": "optimism",
                "tokenSymbol": "COLLAB",
                "value": "10000000000000000000",
                "to": "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
                "tokenDecimal": "18",
                "timeStamp": "1679443941",
                "tokenName": "Collab.Land"
            }
        ]
    }
}

For additional documentation, you can visit a convenient GraphiQL dashboard/playground on the same url with all the available types and features. If in doubt, ask in our Discord channel.