Querying pending transactions with GraphQL

A GraphQL endpoint is a useful alternative to JSON-RPC, especially when querying a large amount of data. Using GraphQL can reduce resource consumption significantly since it is lightweight and more resource-efficient. Currently, GraphQL is natively supported on Ethereum, BNB smart chain, and Fantom.

This tutorial shows you how to use GraphQL to fetch pending transaction data from Geth. And compares GraphQL and JSON-RPC in terms of speed and data size.

Prerequisites

GraphQL is available on dedicated Ethereum nodes on Chainstack, starting from the Growth plan. Follow this guide to set up your own dedicated node.

Once the node is ready, the GraphQL endpoint can be found in your console:

Figure 1: GraphQL endpoint access details in the Chainstack console

How it works

In GraphQL IDE

Geth comes with a native GraphQL IDE, users can access it at the following URL:

https://**********/graphql/ui

All you need to do is fill in the query and click the run button.

Figure 2: GraphQL IDE

You will get a list of pending transactions in the result panel:

Figure 3: GraphQL IDE response to query

With JavaScript

Create an empty HTML file and paste the following code into it.

<html>
<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</header>
<body>
    <div class="result"></div>
</body>
<script>
    //Fill in your httpURL and graphQLURL here
    var httpURL = ""
    var graphQLURL = ""
    var startTime = new Date().getTime()
    console.log("Program start timestamp:" + startTime)
    var dataGraphQL = '{"query": "query{pending{transactions{hash,gas,s,r}}}"}'
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: graphQLURL,
        data: dataGraphQL,
        success: function(res) {
            resultTime = new Date().getTime() - startTime
            console.log("graphQL gets result in " + resultTime + "ms")
            $(".result").text(JSON.stringify(res));
            console.log(res);
        }
    });
    var dataRPC = '{"jsonrpc":"2.0","method":"txpool_content","id":1}'
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: httpURL,
        data: dataRPC,
        success: function(res) {
            resultTime = new Date().getTime() - startTime
            console.log("RPC gets result in " + resultTime + "ms")
            console.log(res);
        }
    });
</script>
</html>

Remember to fill in the URL for both http and graphQL endpoints at line 11.

Open the HTML file with any browser to see its output:

Measuring the performance

The above JavaScript code also measures the latency of data retrieval. You need to open the developer console to see it.

Figure 4: Measuring latency of data retrieval in the developer console

Comparing latency for 7 rounds.

GraphQL query time(ms)RPC query time(ms)RPC/GraphQL*100%
8131317161.99%
8911499168.24%
37314281114.74%
5811176202.41%
30533624118.70%
4191025244.63%
17352540146.40%
Figure 5: Latency comparison results from seven rounds
Figure 6: GraphQL response object size

Overall, GraphQL takes 60% of the time for data loading. The response object is only 40% in size compared to an RPC endpoint.

Please also take note that:

  • In the test case, the RPC endpoint not only returns the pending transactions but also queue transactions.
  • GraphQL does not retrieve the full object. It only contains four fields: hash, gas, s, and r.

GraphQL is more resource effective because users can specify which fields to retrieve.

Conclusion

This is the end of this article. If you have any questions, feel free to ping us on our Telegram and Discord.

Cheers!

Happy coding.

Have you already explored what you can achieve with Chainstack? Get started for free today.

Chainstack uses cookies to provide you with a secure and
personalized experience on its website. Learn more.