{"id":22299,"date":"2021-03-01T17:04:40","date_gmt":"2021-03-01T17:04:40","guid":{"rendered":"http:\/\/dynamically_fetch_data_in_jamstack_sites_with_hasura"},"modified":"2022-02-25T18:25:28","modified_gmt":"2022-02-25T18:25:28","slug":"dynamically_fetch_data_in_jamstack_sites_with_hasura","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/dynamically_fetch_data_in_jamstack_sites_with_hasura","title":{"rendered":"Dynamically Fetch Data in Jamstack Sites With Hasura"},"content":{"rendered":"

The Jamstack<\/a> web-development architecture yields many benefits, including high performance and security. Plus, thanks to its APIs, which function as software as a service (SaaS), no back-end infrastructure is required for web applications.<\/p>\n

The rise of platforms as a service (a type of SAAS) has rewarded the front end with a lot of autonomy. Even though Jamstack front ends are mostly associated with static site generators like Next.js, Gatsby, and Nuxt.js, I strongly believe that any application that contains a self-sustainable front end and that leverages APIs for specific purposes qualifies as a Jamstack front end. So, it can be a simple project coded with HTML, CSS, and logic.<\/p>\n

Many front-end developers relish building stand-alone applications but must answer several questions at the outset, such as where to get the related data and how to authenticate it. Above all, if a PostgreSQL database already exists, how to connect it to the new Jamstack front end? Hasura.io<\/a> is a silver bullet of a solution.<\/p>\n

Understanding Hasura<\/h2>\n

As defined on GitHub, Hasura is a superfast GraphQL server that \u201cgives you instant, real-time GraphQL APIs over Postgres, with webhook triggers on database events and remote schemas for business logic.\u201d You want to give the front end all the autonomy it needs, e.g., where to source data and how to structure and handle that data.<\/p>\n

Note:<\/strong>

Data in Jamstack applications can usually originate from any source, e.g., one or multiple content management systems, assuming that you\u2019re using a framework like Gatsby or connecting to an existing database like Postgres with Hasura.<\/p><\/div>\n

Below is a demo that shows you how to use Hasura to connect and fetch data to an application built with HTML.<\/p>\n

Setting Up Hasura<\/h2>\n
    \n
  1. Create a Hasura<\/a> account and sign in.<\/li>\n
  2. Click Try a free database with Heroku<\/strong>.<\/li>\n<\/ol>\n

    \"Sign<\/p>\n

    Next, click the DATA<\/strong> tab at the top and then click Create Table<\/strong>.<\/p>\n

    \"GraphQL<\/p>\n

    Assign types to your parameters, that is, define the data you want your queries to return on the front end and the data types.<\/p>\n

    \"GraphQL<\/p>\n

    Connecting Hasura to Applications With Utility Functions<\/h2>\n

    Now connect the database to the sample application with the following:<\/p>\n