DEV Community

loading...

Getting data from Hasura onto your Nuxt.js app

debs_obrien profile image Debbie O'Brien Updated on ・3 min read

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.

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.

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'
  }
},
Enter fullscreen mode Exit fullscreen mode
  • Add a config file for apollo
mkdir apollo mkdir apollo/client-configs
touch apollo/client-configs/default.js
Enter fullscreen mode Exit fullscreen mode
  • 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
})
Enter fullscreen mode Exit fullscreen mode
  • 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
    }
  }
`
Enter fullscreen mode Exit fullscreen mode
  • And add this below it
export default {
  data() {
    return {
      food: []
    }
  },
  apollo: {
    $loadingKey: 'loading',
    food: {
      query: food
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

pic
Editor guide
Collapse
acatzk profile image
acatzk

where can i put my hasura secret key in nuxt?
before I am using vue js and this is how it works with websocket but
I'm confused how to config in nuxt with hasura

const httpLink = new HttpLink({
uri: "https://",
headers: {
'x-hasura-admin-secret': ''
}
});

const wsLink = new WebSocketLink({
uri: "wss://",
options: {
reconnect: true,
timeout: 30000,
connectionParams() {
return {
headers: {
'x-hasura-admin-secret': ''
}
}
}
}
})

Collapse
debs_obrien profile image
Debbie O'Brien Author

hey, sorry only seeing this now. the secret key should be a secret so should go in Netlify / Heroku or where you have it hosted as env variable.

Collapse
debs_obrien profile image
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Now, I have to wonder about security of Hasura, and public API's in general.

But, I see that you can set up CORS.

Collapse
debs_obrien profile image
Debbie O'Brien Author

Actually I am writing another post on that. Hasura is really secure but you do need to secure your api by clicking the secure api button and adding a secret key and then you just create a public user that can say select from database only or add depending on what you want them to do and of course you can set up admin roles with authentication etc. Think of Hasura as similar to how Firebase works.