Building a Realtime Geolocation App with Hasura GraphQL and PostGIS

In this tutorial, we will learn how to build a real-time geolocation app using Hasura GraphQL and PostGIS. The complexities involved in building such an application include managing large datasets in the database, ease of API consumption, and real-time frontend rendering. By leveraging Postgres's capabilities via functions and its extensibility through PostGIS, along with Hasura providing a neat GraphQL API for clients to consume, we can create a data-heavy real-time geo-location app that plots nearby restaurants on a map. To set up the backend, we will be running a Postgres database and seeding some location data from OpenStreetMap. We will also create a Postgres function to query nearby data. On the frontend, we will be using a React app with Apollo Client integration to query for location data using Hasura GraphQL API. To begin, set up Hasura and Postgres with PostGIS extension by cloning the sample app, running GraphQL Engine locally, installing Hasura CLI, and configuring the Hasura endpoint in the `config.yaml` file. Seed location data from OpenStreetMap for Bangalore or a different city if desired. Next, create a Postgres function to fetch nearby data using PostGIS functions like ST_TRANSFORM, ST_DWITHIN, and ST_X/ST_Y. This function will accept latitude, longitude, and bound range arguments to calculate nearby locations within the specified distance. On the frontend, integrate a GraphQL client for React, such as Apollo Client, and set up the necessary GraphQL query to fetch the restaurants using the Postgres function. To render the map on React, use libraries like React Leaflet. By utilizing Hasura's capabilities with Postgres and PostGIS, we can create a powerful real-time geolocation app that efficiently handles large datasets and provides an easy-to-consume API for clients.