Good Bye CRUD APIs, Hello Sync: Realtime PostgreSQL with ElectricSQL
Tags: api, node, postgres, webdev
Published: 2023-10-29 15:26:30


## The Tangle of APIs: Are We Over-Complicating Interactions?

Every action on a web application triggers a cascade of network calls. Take the simple act of engaging with a post on a social media platform like Instagram. Opening a post fires off a _GET_ API call, hitting 'like' triggers a _POST_ API call, and commenting sparks another _POST_ API call. Each interaction, each click, and each submission reels out a string of API calls from the frontend to the backend, fetching or updating data in the database.

This traditional setup, while functional, piles up layers of interaction between the user interface and the backend. Every added layer is a potential point of failure, a delay, or a bottleneck. For Developers and Engineers, managing this entanglement of APIs can be a daily grind. Each API call is crafted, tested, and maintained. The overhead is real, both in time and resources.

Moreover, the users on the other end, often find themselves waiting, even if it’s just for a split second, for these network calls to complete. In an era where speed and real-time interactions define user experience, these micro-delays can add up, affecting user engagement and satisfaction.

Now, imagine a setup that trims down these numerous API calls, a setup that allows direct interaction with the database, cutting through the delay and the clutter. This is where _ElectricSQL_ (ESQL) steps into the picture…

## ElectricSQL: Cutting Through the API Clutter

ESQL proposes a cleaner, streamlined approach. It operates alongside your Postgres DB, reducing the need for these multiple API calls. With ESQL, actions like commenting or upvoting are handled in dedicated tables within the browser’s local storage(SQLite), which then syncs with Postgres. This setup eliminates the need for a backend API call to store data to the Postgres, thereby reducing the layers of communication and the associated delay. The front end and the database can now interact more directly and efficiently. This simplifies the workflow for developers and speeds up user interactions on the front end. Now let's see how this is achieved and what goes on internally.

## Interaction Between Browser and Postgres DB using Electric


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo9tibjk0w89uada9d8v.png)



The diagram demonstrates the communication pathway between the browser and the Postgres database through the _Electric service_. Essentially, [Electric Sync Service](https://electric-sql.com/docs/usage/installation/service), an [Elixir application](https://elixir-lang.org/), orchestrates [active-active](https://electric-sql.com/docs/intro/active-active) data replication between the user's local DB and Postgres.

The browser interacts with the local DB through the [electric-sql](https://www.npmjs.com/package/electric-sql) library. The local DB is connected to the _Electric service_, there is a satellite present in the electric-sql which is used to communicate with the _electric service_, and used for data replication between the local DB and Postgres.

Whenever data alterations occur in either the local DB or Postgres, the _Electric service_ acts as a conflict resolver, ensuring seamless data replication. This configuration eliminates the need for API calls to store new data entries like comments or updates, thereby streamlining the data interaction process.

Continue reading the full article [https://journal.hexmos.com/reduce-apis-using-electric/](https://journal.hexmos.com/reduce-apis-using-electric/)