DEV Community: Javier Acrich

Interacting with Compound.finance

Javier Acrich — Wed, 30 Mar 2022 20:17:36 +0000

Compound is one of the oldest protocols out there, it allows you to lend and borrow just like everybody else, but how can you do that with typescript, ethers.js and Angular ?

That is what I am going to show you today with some code examples.
in this occasion we are going to start up a new dapp using Angular to demonstrate how to do it.

First let's explain some of the fundamental concepts of Compound.

cTokens
Each asset supported by the Compound Protocol is integrated through a cToken contract, which is an EIP-20 compliant representation of balances supplied to the protocol. By minting cTokens, users (1) earn interest through the cToken's exchange rate, which increases in value relative to the underlying asset, and (2) gain the ability to use cTokens as collateral.

cTokens are the primary means of interacting with the Compound Protocol; when a user mints, redeems, borrows, repays a borrow, liquidates a borrow, or transfers cTokens, she will do so using the cToken contract.

Comptroller
The Comptroller is the risk management layer of the Compound protocol; it determines how much collateral a user is required to maintain, and whether (and by how much) a user can be liquidated. Each time a user interacts with a cToken, the Comptroller is asked to approve or deny the transaction.

So let's see some code.

We are going to connect our metamask wallet to our page so that we are able to see our cDai balance.
Then we are going to deposit DAI to the cDAI contract in the kovan network because we do not want to use real money.
and
Finally we are going to listen to the Mint event that the cDAI contract raises when DAI is deposited.

First of all we have to request permission to the provider that Metamask injects in the global object.

Once we are connected we are going to retrieve the current cDAI balance:

In order to deposit we need to get a handler of a signer,

and finally here we can listen to the Mint event raised by the cDai contract.

Good! you have reached the end of the article, if you want, you can take a look at the whole code here:https://github.com/javieracrich/dapp

Randomness in deterministic systems.

Javier Acrich — Tue, 01 Feb 2022 17:56:06 +0000

What is the use case for randomness ?

After defi, blockchain gaming is probably the largest use case for blockchains right now. Blockchain gaming basically depends on users going to a smart contract that guarantees that a user will be fairly treated and whatever manipulation happens in a centralized version of that same game can't occur with the user. So for example the creator of the contract can't manipulate money away from users that deserve to get it according to the contract's condition, or if there is some kind of digital good generated by the contract, the contact creator can't simple take it away from a user.

The most common design pattern for blockchain gaming is the use of randomness. Randomness often generates payouts to users in crypto currency or generates digital goods or any type of events that games rely on.

The design patterns we see in blockchain gaming so far, sometimes don't deliver the full potential and end to end security that defi is now seeking to deliver to its users through the use of highly reliable oracles.

In certain scenarios the creator of the blockchain game also runs the random number generation service, so on the one hand the smart contract and the conditions of the game and possibly the owner of digital goods is on a blockchain and therefore not gameable, but the random number generation that determines the amount or the value of the relationship between that contract and the user and the currency they put into that contract is controller by the game's creator.

This leads to not the certainty but the unfortunate possibility that there is a chance that the game's creator could have the same problems either by having his service compromised by an adversary or by compromising it themselves or whatever collection of problems that might occur.

This is why it is important to have a verifiable source of randomness that can't be gamed and that is outside the control of any interested party such as the player or even the creator of the game.

Randomness in deterministic systems

Getting truly random numbers in a deterministic system is impossible. You cannot create truly random numbers but you can pseudo-random numbers. Blockchain is a deterministic system so we have to make sure that each node must be given the same random number. Determinism is fundamental because it is vital that regardless of where the smart contract code executes, it produces the same result every time and everywhere.

For example, Timestamp vulnerability is quite common. Usually, the timestamp of a block is accessed via block.timestamp but this timestamp can be manipulated by miners, leading to influencing the outcome of some function that relies on timestamps. The timestamp is used as a source of randomness in lottery games to select the next winner. Thus, it might be possible for a miner to modify the timestamp in such a way that its chances of becoming the next winner increase.

In order to get the true random number we have to look at outside the blockchain. We need to use oracle services to get the true random number. If you do not have your true random number in your smart contract, your smart contract can get hacked.

What is chainlink VRF ?

Chainlink VRF is an external source of randomness for smart contracts as a key input that is cryptographically proven to be unbiased and developers and users can safely rely on it. The benefit of Chainlink VRF is that it is built to use the unique capabilities of blockchains to verify that proof and signatures which no other randomness generator does.

There are a number of applications that use randomness in very meaningful ways to be able to securely exist. It is of of those input that pulling that input from some other off chain source is sometimes problematic because it is not necessarily build for a blockchain or using all the capabilities of a blockchain to provide security to the application developer and the user.

Show me the code!

pragma solidity ^0.8.7;

import "@chainlink/contracts/src/v0.8/VRFConsumerBase.sol";

/**
 * THIS IS AN EXAMPLE CONTRACT WHICH USES HARDCODED VALUES FOR CLARITY.
 * PLEASE DO NOT USE THIS CODE IN PRODUCTION.
 */

/**
 * Request testnet LINK and ETH here: https://faucets.chain.link/
 * Find information on LINK Token Contracts and get the latest ETH and LINK faucets here: https://docs.chain.link/docs/link-token-contracts/
 */

contract RandomNumberConsumer is VRFConsumerBase {

    bytes32 internal keyHash;
    uint256 internal fee;
    uint256 public randomResult;

    /**
     * Constructor inherits VRFConsumerBase
     * 
     * Network: Kovan
     * Chainlink VRF Coordinator address: 0xdD3782915140c8f3b190B5D67eAc6dc5760C46E9
     * LINK token address:                0xa36085F69e2889c224210F603D836748e7dC0088
     * Key Hash: 0x6c3699283bda56ad74f6b855546325b68d482e983852a7a82979cc4807b641f4
     */
    constructor() 
        VRFConsumerBase(
            0xdD3782915140c8f3b190B5D67eAc6dc5760C46E9, // VRF Coordinator
            0xa36085F69e2889c224210F603D836748e7dC0088  // LINK Token
        )
    {
        keyHash = 0x6c3699283bda56ad74f6b855546325b68d482e983852a7a82979cc4807b641f4;
        fee = 0.1 * 10 ** 18; // 0.1 LINK (Varies by network)
    }

    /** 
     * Requests randomness 
     */
    function getRandomNumber() public returns (bytes32 requestId) {
        require(LINK.balanceOf(address(this)) >= fee, "Not enough LINK - fill contract with faucet");
        return requestRandomness(keyHash, fee);
    }

    /**
     * Callback function used by VRF Coordinator
     */
    function fulfillRandomness(bytes32 requestId, uint256 randomness) internal override {
        randomResult = randomness;
    }

    // function withdrawLink() external {} - Implement a withdraw function to avoid locking your LINK in the contract
}

My name is Javier Acrich and you can find me at LinkedIn

Rock-Paper-Scissors Smart Contract with commit-reveal pattern

Javier Acrich — Tue, 07 Sep 2021 18:56:30 +0000

I wrote a smart contract in which you can bet DAI and play rock paper scissors taking turns with your opponent.

Traditionally when you play rock paper scissors with a friend, you both play at the same time, and then you can cut her paper with your scissors, and that's how both of you know you have won.

but in a decentralized app, you can't play at the same time, you have to take turns. If you go first, since everything is public in the blockchain, she can see what you have chosen, for instance if you have chosen scissors, then she'll know she has to choose rock to win.

To overcome this issue the commit/reveal pattern exists. It consists of 2 phases. The first one, the commit phase in which you commit your choice, but it remains secret, and then the reveal phase where you reveal your choice and make it visible.

In solidity you can accomplish the hiding part using the hashing function
keccak256(abi.encodePacked(...))
which returns a hash of a group of data.

but, if you hash, your choice, for instance scissors, nothing stops your opponent, from hashing the 3 choices (rock, paper, and scissors) and then compare the hashes with the one that is stored in the smart contact, and in that way check what you have chosen, in order to win the game. This is why you need to make things a little more complex and add a password, a string that you only know, and hash that along with your choice.

function hashChoice(Choice data) private view returns (bytes32) { return keccak256(abi.encodePacked(address(this), playerPasswords[_msgSender()], data)); }

in this way, you will have a unique hash, that your opponent won't be able to use against you.

so before playing you have to login to the game providing your password

function login(string memory password) external { require(playerPasswords[_msgSender()] == bytes32(0), "you have already logged in"); playerPasswords[_msgSender()] = hashPassword(password); }

after logging in, player1 can commit the choice using the previously registered password and adding an optional bet in DAI to spice things up.

function player1Commit( Choice choice, uint256 _amount, string memory password ) external onlyLoggedIn(password) { ... }

player 2 does the same afterwards. Once the 2 players have committed their choices, it is time for the reveal phase.

Both players have to send new transactions to the contract to reveal what they have chosen.

function player1Reveals( Choice choice, uint256 gameId, string memory password ) external onlyLoggedIn(password) {...}

and

function player2Reveals( Choice choice, uint256 gameId, string memory password ) external onlyLoggedIn(password) {...}

At this time, we already know who the winner is, so the only step missing is the prize distribution. We can do that calling the distribute function. Any player can call it.

function distribute(uint256 gameId) external

In the case that player 1 has committed, but player 2 is not cooperative and decides not to commit at all, a function has been added to retrieve the bet after 1 week.

player1WithdrawBalance(uint256 gameId) external

You can check the source code for this exercise in my github

My name is Javier Acrich. I'm a software engineer and I work at Santex.

Techo, mi smart contract para alquiler de propiedades.

Javier Acrich — Mon, 16 Aug 2021 13:17:54 +0000

Escribí este smart contract en Solidity usando Ethers.js y Hardhat para practicar.
Un contrato de alquiler de propiedad me pareció un buen caso de uso para implementar.

Tenemos un propietario, un inquilino y una inmobiliaria.

Primero, la inmobiliaria desplega el contrato en mainnet con todas las configuración necesaria: el monto de dinero, la duración, la frecuencia de pago, el porcentaje de comisión inmobiliaria y las direcciones del inquilino y del propietario.
Una vez que el smart contract esta desplegado, el inquilino activa el contrato mandándole el 100% del monto acordado al contrato + la comisión inmobiliaria. Al hacer esto, la inmobiliaria recibe su comisión y el contrato queda preparado para que el propietario pueda empezar a cobrar la renta.
El propietario todos los meses (o semanas, o días, según haya sido configurado al inicio) retira la renta del contrato. El monto de la renta es calculado automáticamente por el contrato.
La inmobiliaria puede rescindir anticipadamente el contrato en cualquier momento y el dinero remanente en el contrato regresa automáticamente al inquilino.
El smart contract tiene las validaciones necesarias para que solo el propietario pueda cobrar las rentas y que no pueda cobrar mas de una renta por ciclo.

Beneficios para el inquilino

No hacen falta garantías para alquilar. el inquilino aporta el 100% del dinero al inicio del contrato.
Poder usar su crypto ahorrada, sin tener que venderla.
Al rescindir anticipadamente, el contrato le devuelve el dinero restante automáticamente.

Beneficios para el propietario

Se asegura el pago del alquiler ya que los pagos son manejados por el contrato, no según la voluntad del inquilino.
Cobrar el alquiler en crypto.
No necesita garantías propietarias del inquilino.

Beneficios para la inmobiliaria.

Cobrar la comisión del alquiler en crypto.
Ofrecer un nuevo servicio para sus clientes.

Si quieres ver el Código de este smart contract junto con los unit tests lo puedes encontrar en mi Github Profile

Aqui puedes ver el contrato desplegado y verificado en la red de Ropsten

Mi nombre es JAVIER ACRICH y trabajo en Santex

Is it possible to upgrade a smart contract? no? think again.

Javier Acrich — Fri, 09 Apr 2021 02:37:05 +0000

Are smart contracts really upgradable?

"TL;DR" Not really. but...
Smart Contracts are pieces of software that live in the blockchain. They can execute actions according to a series of parameters already programmed. All of this in an immutable, transparent, and completely secure way. The fact that these smart contracts are distributed in thousands of machines makes them censorship-resistant, transparent, efficient, secure, and inexpensive.

Transparency - The data on the blockchain is available for everyone to see.
Efficiency - No room for (mis-) interpretations or lost documents. "code is law" is a popular expression that describes this behavior.
Cost reduction - As middlemen are cut out, the costs are significantly reduced as well.
Security - Cryptography is used to secure transactions and prevents attacks

What is OpenZeppelin?

OpenZeppelin is a company that offers a variety of services for developing distributed applications.
It also offers some free standard base smart contracts that are audited for security reasons and they are one of the most used smart contracts among developers. When building a new smart contract often you have to follow standards like ERC20 or EC721. Instead of reinventing the wheel, you can just inherit your contract from one of the openZeppelin contracts to save time and start programming right away your specific business rules.

Why upgrade a Contract?

By design, smart contracts are immutable. On the other hand, software quality heavily depends on the ability to upgrade and patch source code in order to produce iterative releases. Even though blockchain-based software profits significantly from the technology’s immutability, still a certain degree of mutability is needed for bug fixing and potential product improvements. OpenZeppelin Upgrades solves this apparent contradiction by providing an easy-to-use, simple, robust, and opt-in upgrade mechanism for smart contracts that can be controlled by any type of governance, be it a multi-sig wallet, a simple address or a complex DAO.

How do I upgrade a Contract?

The basic idea is to use a proxy for upgrades. The first contract is a simple wrapper or "proxy" with which users interact directly and is in charge of forwarding transactions to and from the second contract, which contains the logic. The key concept to understand is that the logic contract can be replaced while the proxy or the access point is never changed. Both contracts are still immutable in the sense that their code cannot be changed, but the logic contract can simply be swapped by another contract. The wrapper can thus point to different logic implementation and in doing so, the software is "upgraded".

OpenZeppelin provides a plugin that allows us to upgrade a contract easily.

Diagram 1: contracts relation and users

When we deploy our implementation contract with the Upgrades plugin we are also deploying 2 more contracts. The Proxy Contract and the ProxyAdmin Contract.

The Proxy Contract will be the contract that your clients will connect to. You won't have to update this contract since it doesn't hold any of the logic. Just the state.
The Implementation Contract will hold the logic (that you can later upgrade if you find bugs or need to add features )
But you won't actually “upgrade” it. We will just make the Proxy Contract point to a new V2 Contract with fixed bugs or more features than V1. And since the client is connected to the Proxy Client, you won't have to ask them to switch to the V2 Contract. What a relief…

You also deploy the ProxyAdmin Contract whose only responsibility is to change the Proxy Contract to point to a newer Implementation Contract. Only an admin owner can do this trick.

There is a special function in Solidity called DELEGATECALL that allows you to call another contract using the context of the caller. Not the callee. This allows the discrimination between state and logic which makes possible the “upgrade”

My name is Javier Acrich
And I work at Santex as a full-stack software developer.

How to build a performant SignalR chat SPA using Angular 10 and .Net Core 3.1

Javier Acrich — Thu, 01 Oct 2020 15:04:32 +0000

This article explores SignalR concepts and tries to explain with simplicity how to build a chat interface in a single page application. You can find the source code to this app at the end of this text.

ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly.

Let's see some of the most important concepts in SignalR: Hubs, Protocols, and Transports.

HUB

A hub is the thing in the middle between the client and the server.

SignalR uses hubs to communicate between clients and servers.
A hub is a high-level pipeline that allows a client and server to call methods on each other. SignalR handles the dispatching across machine boundaries automatically, allowing clients to call methods on the server and vice versa.

PROTOCOLS

There are 2 protocols you can use in SignalR

These are serialization formats you can use to send messages between server and client. Json is the default protocol, but we can also use MessagePack which is a fast and compact binary serialization format. It's useful when performance and bandwidth are a concern because it creates smaller messages compared to JSON. The binary messages are unreadable when looking at network traces and logs unless the bytes are passed through a MessagePack parser. SignalR has built-in support for the MessagePack format and provides APIs for the client and server to use.

TRANSPORTS

SignalR supports the following techniques for handling real-time communication (in order of graceful fallback):

WebSockets has the best performance, but it is only available if both the client and the server support it. If that is not the case, SSE or Long Polling is used instead.

BACKEND

Let's start by creating a blank web API .Net Core 3.1 Solution in visual studio

Now that we have a solution, let's install the following required nugets:

The first one is the core NuGet required for SignalR, and the second will be required to use the MessagePack protocol

Now let's create a ChatHub class and the IChatHub interface that will represent the proxy between the client and server



public class ChatHub : Hub<IChatHub>
    {
        public async Task BroadcastAsync(ChatMessage message)
        {
            await Clients.All.MessageReceivedFromHub(message);
        }
        public override async Task OnConnectedAsync()
        {
            await Clients.All.NewUserConnected("a new user connectd");
        }
    }

    public interface IChatHub
    {
        Task MessageReceivedFromHub(ChatMessage message);

        Task NewUserConnected(string message);
    }

As you can see the ChatMessage class will be a simple Data Transfer Object that will be used to transfer the messages



    public class ChatMessage
    {
        public string Text { get; set; }
        public string ConnectionId { get; set; }
        public DateTime DateTime { get; set; }
    }

Now, we need to tell Asp.Net Core we want to use SignalR, registering the services in the ConfigureServices Method



  public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            services.AddSignalR().AddMessagePackProtocol();

            services.AddCors(options =>
            {
                options.AddDefaultPolicy(builder =>
                {
                    builder
                        .WithOrigins(
                        "http://localhost")
                        .AllowCredentials()
                        .AllowAnyHeader()
                        .SetIsOriginAllowed(_ => true)
                        .AllowAnyMethod();
                });
            });
        }

Take a look at the CORS default policy, we are also going to need that since this we are building a SPA.

Now, let's Map the ChatHub class we previously wrote in the Configure method



        app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapHub<ChatHub>("/signalr");
            });

And to finish the server part, let's write the ChatController



    [Route("api/[controller]")]
    [ApiController]
    public class ChatController : ControllerBase
    {
        private readonly IHubContext<ChatHub> hubContext;

        public ChatController(IHubContext<ChatHub> hubContext)
        {
            this.hubContext = hubContext;
        }

 [HttpPost]
        public async Task SendMessage(ChatMessage message)
        {
            //additional business logic 

            await this.hubContext.Clients.All.SendAsync("messageReceivedFromApi", message);

            //additional business logic 
        }
    }

Pay attention to the dependency injected in the controller constructor. It is not a ChatHub, It is an IHubContext. This is the correct way of injecting a Hub Reference in a controller according to SignalR docs. We can use this hub reference to call hub methods from outside the hub.
It's important to say here that, although we are injecting a Hub reference in the controller, we don't actually need to. As we discuss below, this is only required if you need to execute additional logic in the controller before or after calling the hub.

if you want extra config options you can take a look at this doc.

FRONTEND

We’ll use a simple Angular app without much styling effort since we are only interested in showing how SignalR works. You can see the UI in the following image

Write the following CLI commands to create the UI for the chat app

ng new chat-ui in any folder to scaffold and create a new angular app
npm i @microsoft/signalr@latest --save to install the required SignalR libraries.
ng g s signalr to scaffold the SignalR service
npm i @microsoft/signalr-protocol-msgpack --save to use the MessagePack protocol in the frontend

First, let's write the SignalR service which will be used from the UI Component.



import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr'
import { from } from 'rxjs';
import { tap } from 'rxjs/operators';
import { chatMesage } from './chatMesage';
import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack'

@Injectable({
  providedIn: 'root'
})
export class SignalrService {

  private hubConnection: HubConnection
  public messages: chatMesage[] = [];
  private connectionUrl = 'https://localhost:44319/signalr';
  private apiUrl = 'https://localhost:44319/api/chat';

  constructor(private http: HttpClient) { }

  public connect = () => {
    this.startConnection();
    this.addListeners();
  }

  public sendMessageToApi(message: string) {
    return this.http.post(this.apiUrl, this.buildChatMessage(message))
      .pipe(tap(_ => console.log("message sucessfully sent to api controller")));
  }

  public sendMessageToHub(message: string) {
    var promise = this.hubConnection.invoke("BroadcastAsync", this.buildChatMessage(message))
      .then(() => { console.log('message sent successfully to hub'); })
      .catch((err) => console.log('error while sending a message to hub: ' + err));

    return from(promise);
  }

  private getConnection(): HubConnection {
    return new HubConnectionBuilder()
      .withUrl(this.connectionUrl)
      .withHubProtocol(new MessagePackHubProtocol())
      //  .configureLogging(LogLevel.Trace)
      .build();
  }

  private buildChatMessage(message: string): chatMesage {
    return {
      connectionId: this.hubConnection.connectionId,
      text: message,
      dateTime: new Date()
    };
  }

  private startConnection() {
    this.hubConnection = this.getConnection();

    this.hubConnection.start()
      .then(() => console.log('connection started'))
      .catch((err) => console.log('error while establishing signalr connection: ' + err))
  }

  private addListeners() {
    this.hubConnection.on("messageReceivedFromApi", (data: chatMesage) => {
      console.log("message received from API Controller")
      this.messages.push(data);
    })
    this.hubConnection.on("messageReceivedFromHub", (data: chatMesage) => {
      console.log("message received from Hub")
      this.messages.push(data);
    })
    this.hubConnection.on("newUserConnected", _ => {
      console.log("new user connected")
    })
  }
}

connect() is the first method. This method will be called from the OnInit() in the UI component. This method is in charge of connecting to the ChatHub and registering the listeners that will be listening when the server tries to send messages to the client.

In this case and since we are in a SPA, we have 2 options to send messages from the UI to the HUB:

A. We can send messages directly to the HUB.

B. We can send Http requests to the API Controller and let the controller call the hub.

Either option is fine and this depends on your requirements. If you need to execute additional business rules besides sending the message, it is a good idea to call the API controller and execute your business rules there and not in the HUB. Just to separate concerns.

this is the Component in charge :



import { Component, OnInit } from '@angular/core';
import { SignalrService } from './signalr.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  title = 'chat-ui';
  text: string = "";

  constructor(public signalRService: SignalrService) {

  }

  ngOnInit(): void {
    this.signalRService.connect();
  }

  sendMessage(): void {
    // this.signalRService.sendMessageToApi(this.text).subscribe({
    //   next: _ => this.text = '',
    //   error: (err) => console.error(err)
    // });

    this.signalRService.sendMessageToHub(this.text).subscribe({
      next: _ => this.text = '',
      error: (err) => console.error(err)
    });
  }
}

We can see here that the connect() method is called on the OnInit() to initialize the connection.

The SendMessage() method is called whenever the user clicks the Send Button. Just for demo purposes, you have both options. Sending the message directly to the hub and sending the message thru a request to an action method in a controller.

and finally this is the markup with some bootstrap classes:



<div class="container mt-5">
  <h1>SignalR Chat DEMO</h1>
  <input type="text" class="mt-3 mb-3 mr-3" [(ngModel)]="text">
  <button class="btn btn-primary" [disabled]="text.length==0" (click)="sendMessage()">Send Message</button>
  <h4 class="mb-3">List of Messages</h4>

  <div *ngIf="signalRService.messages.length==0">
    <p>You haven't send or received messages</p>
  </div>
  <div *ngFor="let m of signalRService.messages">
    <div class="mb-2 mt-2">
      <div><strong>ConnectionID</strong> {{m.ConnectionId}}</div>
      <div><strong>Date</strong> {{m.DateTime | date}}</div>
      <div><strong>Message</strong> {{m.Text}}</div>
      <hr>
    </div>
  </div>
</div>

If you want to take a look at the source code:

https://github.com/javiergacrich/chat-ui
https://github.com/javiergacrich/chat-server

My Name is Javier Acrich and I work as a software engineer @ Santex

Exposing a GraphQL API using .Net Core 3.1 and HotChocolate.

Javier Acrich — Tue, 26 May 2020 15:35:40 +0000

What is GraphQL?

GraphQL is not a library. It is a syntax that describes how to ask for data and it is generally used to load data from a server to a client. GraphQL has three main characteristics:

-It lets the client specify EXACTLY what data it needs.
-It makes it easier to aggregate data from multiple sources.
-It uses a type system to describe data.

GraphQL is like a middle layer between our data and our clients, and it can be considered as an alternative to REST API or maybe even an evolution.

We can find in this flexibility also an improvement phase of the API: in fact, the addition of fields returned to our structure will not impact the existing clients.
GraphQL is strongly typed: each query level matches a given type, and every type describes a set of available fields. Thanks to this feature, GraphQL can validate a query before running it, and in case of error, GraphQL can also return descriptive error messages.

What are the pros of GraphQL over rest?

With GraphQL, the client is able to make a single request to fetch the required information rather than constructing several REST requests to fetch the same.
This makes the app faster since you only have to wait for a single request to finish.

What are the cons of using GraphQL ?

-A lot of boilerplate and schema code at both frontend and backend.
-You need to learn how to set up GraphQL. The ecosystem is still rapidly evolving so you have to keep up.
-Nested queries in GraphQL can lead to circular queries and can crash the server. Extra care has to be taken.
-Rate limiting of calls becomes difficult because now the user can fire multiple queries in one call.
-Cache at Network Level: Because of the common way GraphQL is used over HTTP (a POST in a single endpoint), cache at network level becomes hard. A way to solve it is to use Persisted Queries.

When should I use GraphQL?

You have an app that needs to get lots of complex data from a backend.
Let's say data with multiple nested hierarchical levels. With a REST API you can achieve it, but it will take you several for loops, data synchronization, and API calls to the backend to get the result you need. This translates into long wait times for the calls to finish and overall diminished user experience. With GraphQL only one endpoint is needed in the backend for all the needs the frontend might have. And also you can get exactly all the data you need in only one call. No over-fetching and no under-fetching. This reduces drastically the latency time and bandwidth

What is the best GraphQL library I can use in .Net Core?

In .Net there are 2 libraries you can use to implement a GraphQL server:
-graphql-dotnet (please don't use this one. Please)
-hotchocolate

graphql-dotnet is old and it is not being actively maintained. Besides, it consumes more memory and it is slower than Hotchocolate.
Hotchocolate is way more flexible. It has a faster release cycle and it also has unique features like sorting and filtering thru the use of directives
although HotChocolate has good documentation I found several orthographic/grammatical errors. I sent several pull requests with corrections but the author didn't update the docs so far.

There are four key concepts in GraphQL:

Schema
Resolver
Query
Mutation

A GraphQL schema consists of object types that define the type of objects that are possible to receive and the type of fields available.

The resolvers are the collaborators that we can associate with the fields of our scheme which will take care of recovering data from these fields.

Considering a typical CRUD, we can define the concept of query and mutation.

The first one will deal with the information reading, while the creation, modification, and deletion are tasks managed by mutation.

How do I use HotChocolate in .Net Core?

First of all, we need to get the nugets required:

HotChocolate.AspNetCore
HotChocolate.AspNetCore.Playground

What is Playground?
If you ever used Swagger for rest APIs, then you will find Playground familiar. Playground is the swagger of rest APIs, It has 2 panels. It lets you write GraphQL queries on the left, click play, and then receive the result on the right, It also has code completion and automatic scheme documentation. It is an excellent tool to test your code and queries.

If you want to play with Playground you can take a look at it at https://localhost:[port]/playground/ when debugging your app.
remember to register it in the startup first.

HotChocolate has 2 approaches: code first and schema first. In order to make this article as short as possible we'll use code first.

We define the Author and Book, which will be the types exposed by our API.

public class Author
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
}

public class Book
{
    public int Id { get; set; }
    public string Title { get; set; }
    public decimal Price { get; set; }
}

At this point, we can create the class Query, starting with defining the authors.

public class Query
{
    private readonly IAuthorService _authorService;
    public Query(IAuthorService authorService)
    {
        _authorService = authorService;
    }

    public IQueryable<Author> Authors => _authorService.GetAll();
}

After adding the nugets to our solution, we add the necessary statements to configure GraphQL in the Startup.cs file

namespace Demo
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddGraphQL(s => SchemaBuilder.New()
                .AddServices(s)
                .AddType<Author>()
                .AddType<Book>()
                .AddQueryType<Query>()
                .Create());
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UsePlayground();
            }
            app.UseGraphQL();
        }
    }
}

With the annotation [UsePaging], we are instructing GraphQL so that the authors returned by the service will have to be made available with pagination.
This way, by starting the application and going to the playground, we can make the following query and see the result.

By adding the HotChocolate.Types and HotChocolate.Types.Filters nuget you can add a new annotation to enable filters.

[UsePaging]
[UseFiltering]
public IQueryable<Author> Authors => _authorService.GetAll();

Persisted Queries?

Persisted queries are a great way to improve the performance of your GraphQL server.
Persisted queries are validated once no matter if your server restarts or your cache is cleared.
Persisted queries are stored close to your server either in the file system or in a Redis cache. This helps to reduce request sizes since your application can send in a query key instead of the whole query.

Hot Chocolate supports out of the box two flows on how to handle persisted queries.

Ahead of time query persistence
Active Query Persistence

The first approach is to store queries ahead of time (ahead of deployment of your application). This can be done by extracting the queries from your client application, hashing them, and pushing them to the query storage.

Active query persistence builds upon the query persistence pipeline and adds the ability to store queries on the fly.

Conclusion
GraphQL and HotChocolate are a great alternative to REST APIs if you care about performance, latency, and bandwidth. It has some drawbacks like all the boilerplate required to make it work and also the learning curve required to build a production-ready API, but It is worth the time trying.

In my next post I'll be analyzing GRPC Apis, and comparing it to GrapqhQL and REST.

My Name is Javier Acrich,
I work as a software engineer at Mobomo.
I hope you liked this article!