Event-triggered GraphQL

Dynamic

I saw this amazing talk by Tanmai Gopal, one of the founders at JAMStack SF, on Making Static React Sites Dynamic .

“I could probably cook up a Vue alternative,” I thought.

My Blog happens to be built with Gridsome, a Vue powered static site generator for building blazing-fast static websites.

I’ve played around with Hasura in the past: it’s a super fast GraphQL server that gives you instant, realtime GraphQL APIs over Postgres. So we’re going to build something with Gridsome, deploy it, and then make a portion of it dynamic (sort of) with GraphQL and Netlify.

I have a list of books I’ve read in a GraphQL API and I want to use that as a data source for the content on our Gridsome site. We want this site to update dynamically when ever we add a new book to the list or take one out.

I’ll show you how.

TL;DR: Hasura Event Triggers
Demo

I left my GraphQL endpoint open for the sake of this tutorial, but it’s not advisable for a production environment.

Have a look at this post on securing your API by adding authorization and managing users.

We’ll start out by installing the Gridsome CLI tool with npm install --global @gridsome/cli.

When that’s done, we create a new Gridsome project with gridsome create <project name>.

After that, we cd <project name> and then run it locally with gridsome develop.

You’ll get a very simple page like this.

Now go to this page and click Deploy to Heroku. You might have to create a new Heroku account.

When that’s sorted, you’ll be prompted to create an app name. Key one in and then click Deploy.

Once it’s deployed, head over to <your-app-name>.herokuapp.com to access your Hasura API Explorer.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

It should look this:

On our API Console, we’ll head over to the data section and click add table.

We then create a table called books and go on to create the following columns:

• id, Integer (AutoIncrement), Unique
• name, text
• author, text

Set id as the primary key. Then, click create.

Now that we’ve got a books table, we’ve got to insert data into it.

In the data section, click on the books table and pick the insert data tab. Feel free to add any books and authors you enjoy. Mine looks something like this:

We’re done with the Hasura API console for now.

Next up, we want to be able to query a remote GraphQL source.

First, we need to install the Gridsome source plugin. We’ll enter npm install gridsome-source-graphql to do so. Once that’s done, we need to edit our gridsome.config.js.

We then paste in the following code:

plugins: [
    {
      use: 'gridsome-source-graphql',
      options: {
        url: 'https://example.com/api',
        fieldName: 'puppies',
        typeName: 'puppyTypes',

      },
    },
  ]

Be sure to change url, fieldName, and typeName (although the latter is optional).

You can get the url from the Hasura API console, i.e
<your app name>herokuapp.com/v1alpha1/graphql.

I’ll name fieldType booksList and leave the typeName blank. They’re important, so remember them.

Now let’s navigate to the src > pages > About.vue<. This is where we want to display the data.

Gridsome uses GraphQL to query data that it displays on pages.

After the closing <template>, we paste the following page query:

<page-query>  
query {
  books {
    author
    id
    name
  }
}
</page-query>

The query fetches the author, id, and name from the books table. Now we need to display the data we’re querying.

To do so, add the following code below the sole <p> tag:

<h1>Books Read by Me</h1>
<div v-for="book in $page.books" v-bind:key="book.id">
   <li>{{ book.author }} - {{ book.name }}</li>
</div>

We use $page.books to access the query response and parse through it with the v-for directive, storing each value in the book variable. We then use this to display the book author and book name.

This also happens to be a really nice way of understanding how Gridsome displays data. When we run this locally and click about, we can see the books and their authors displayed.

If you head back to the Hasura API Console and insert one row into the books table, you’ll notice that the list on the site updates.

This only happens locally because the data source is continuously refreshed.

When you deploy the app, only the data available on deploy is displayed, meaning when we insert a row in the API console it will not show until the site is rebuilt.

To solve this, we’ll leverage Hasura Event Triggers to trigger a Netlify build that will then update the data in your database.

You will need to push your code to GitHub or GitLab and connect your repository to Netlify.

Gridsome put together a great resource to help out if you have any trouble doing so. Check that out here.

Once deployed to Netlify, we need to create a build hook.

I’ll call mine hasura-event-trigger.

When you create one, you get a URL that triggers a build.

Copy this URL and head back to your Hasura API console.

This time, we’ll head over to the events section.

Hasura event triggers capture events on specified tables and invoke webhooks to carry out any custom logic.

Events could be inserts, updates, or deletes on a row. They also give you the flexibility to add manual triggers.

We want to trigger a rebuild whenever we delete or add a book. After clicking create, we name it author-update, select the books table, tick insert, and update as trigger operations.

We’re then asked to add a webhook URL. This is the build hook URL we copied from Netlify.

After pasting that in, click create.

Now, every time we insert or delete a row (be it manually in the API console or with a mutation using another web app), the event is triggered and a new build will start.

This updates the side content—some would say dynamically.

Add or delete a few rows to trigger builds and your events tab will look like this:

The builds on Netlify also show what triggered them.

Conclusion

Now we have a sort of dynamic static site that leverages Hasura GraphQL Event Triggers.

Check out the full repo on my GitHub and feel free to tweet me any questions.

Monitor failed and slow GraphQL requests in production

While GraphQL has some features for debugging requests and responses, making sure GraphQL reliably serves resources to your production app is where things get tougher. If you’re interested in ensuring network requests to the backend or third party services are successful, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.