Getting data from Hasura onto your Nuxt.js app

Hasura is a great way for storing data and is really easy to setup. I normally don't use the words easy to set up but Hasura really is. As a frontend developer with not that much backend and database experience I really did find Hasura easy and nice to work with.

I created a very simple demo of how to use Hasura in your project to fetch data. Feel free to clone the project and modify it to how you want. You can find the live demo here, it really is just a simple app so don't expect too much. It's basically a list of all the food I need to eat when I get out of lockdown and which restaurants I will go to eat that food.

Once you clone the project you will have to change the GRAPHCMS_API which is located in the apollo/client-config folder for your own Hasura endpoint. Then add your own data and modify the query if you change the table name or columns.

If you are new to Hasura it is really easy to get started.

I have not recreated these steps in this post as the docs on Hasura explain it so well with screen shots so please don't be afraid to click those links and get stared.

There really are only 2 steps you need to take. The first one is creating your Hasura project and deploying to Heroku and this will only take you 2 mins if you already have a Heroku account setup. If not it might take a few minutes more. Heroku is free but if you prefer other options just check out the Hasura docs.

• Here are the docs to get started deploying with Heroku

The next step is to create a table. But don't worry, no backend knowledge is needed and it is as simple as using the graphical interface to create the table and columns which the docs show you along with screenshots.

• Then you just need to create a table and add some data

For this example I have created a table called food with the following schema

Columns

• id - uuid, primary key, unique, default: gen_random_uuid()
• name - text
• where - text
• img - text
• status - text, default: 'pending'::text
• priority - integer

To add to an existing project

• Install @nuxtjs/apollo
• Add it to your build modules in the nuxt.config.js
• Give apollo module options in the nuxt.config.js

apollo: {
  clientConfigs: {
     default: '~/apollo/client-configs/default.js'
  }
},

• Add a config file for apollo

mkdir apollo mkdir apollo/client-configs
touch apollo/client-configs/default.js

• Add the following code inside remembering to replace the endpoint with the endpoint you get from Hasura

import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// Replace this with your project's endpoint
const GRAPHCMS_API = 'https://exit-lockdown.herokuapp.com/v1/graphql'

export default () => ({
  link: new HttpLink({ uri: GRAPHCMS_API }),
  cache: new InMemoryCache(),
  defaultHttpLink: false
})

• In your component add your query in within the script tags

import gql from 'graphql-tag'
export const food = gql`
  query {
    food {
      id
      img
      name
      priority
      status
      where
    }
  }
`

• And add this below it

export default {
  data() {
    return {
      food: []
    }
  },
  apollo: {
    $loadingKey: 'loading',
    food: {
      query: food
    }
  }
}

That's all you need. You should now have your Hasura endpoint and your application making a query to view the data which you can now display in your template. Have fun

<div v-for="(item, index) in food" :key="index"> 
 <h2>{{ item.name }}</h2>
</div>