How To Interact With The Hive Blockchain Using REST APIs

in Programming/Devlast month

I am a web developer and as a result, I mostly work with REST APIs. But there is little to no resource on how to interact with the chain directly using REST methods.

P.S., If you don't know what REST APIs are, this is a good resource.


While working on a React project today, I needed to fetch the posts made by a user but I didn't want to install a library just for one operation because that would increase the bundle size and I didn't want that.

Screenshot (403).png

So I started snooping around to see if I can get around that. I opened up the chrome dev tools and went to the network tab to see if I could find something. And sure enough, I could find normal XHR POST requests to api.hive.blog.

In the above image, you can see that it sends a POST request to api.hive.blog with the highlighted payload.

So, I opened up, Postman and tried to replicate the request and it worked. I tried some other methods from the Appbase API methods and all of them worked great.

So, I integrated that into my React frontend like below:

async componentDidMount() {
    const promise = await fetch("https://api.hive.blog/", {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify({
        id: 1,
        jsonrpc: "2.0",
        method: "bridge.get_account_posts",
        params: { sort: "posts", account: "rahul.stan" },
      }),
    });

    const data = await promise.json();

    const posts= [];

    data.result.map((el) => {
      posts.push({ title: el.title, url: el.url });
    });

    this.setState({ posts: posts});
  }

P.S.P.S., Note that you could do the same using any other nodes as well.

I'm using the async/await syntax with fetch same can be done by using regular callbacks as well.

You can call any API methods by passing them in the method key in the payload and the parameters required by said method. All the available methods can be found at developers.hive.io.

So there you have it. By using this method, I saved almost 1 MB in bundle size as my bundle size jumped up from 1.01 MB to 1.96MB after I imported hive-js which is pretty massive if you ask me.

Nevertheless, I wouldn't recommend doing this if you're signing/broadcasting transactions as you might leak your keys if you're not careful.

Thank you for reading!

Sort:  

Axios is the way to go :)

This is exactly what hive-js does under the hood. Just coverts your request to this format and then returns the data. It's similar when broadcasting too, signs your transaction, then converts it to a request and then submits it.

Axios is the way to go :)

Axios would've added some more to the dreaded bundle size lol.

I know, but the fact still remains that using hive-js would've doubled my bundle size and that too for just one operation. I'd gladly use these libraries but in my current use case, using a library for just one request seemed overkill.

Axios would've added some more to the dreaded bundle size lol.

Yea, thats true. Web dev sucks because of that, at least on the backend I don't have to worry so much about the size of npm modules since its a install once thing(though minimal dependencies is better for many reasons).

Needing to care about dependency size is just one of the things on a long list that makes web dev so annoying.

Just write everything yourself, no need for anything extra then :P