Thursday, 31 January, 2019 UTC
Summary
TL;DR: Server side render websites using Nuxt.js and GraphQL APIs over postgres using Hasura GraphQL Engine. Instant setup. Tutorial/boilerplate 👉 nuxtjs-postgres-graphql
Building universal apps is generally touted to be hard and Nuxt.js is here to solve this for Vue.js apps by being performant and modular. Hasura GraphQL Engine makes it easy to get GraphQL APIs on top of Postgres database. In this post, we will look at how these two can be integrated.
Nuxt.jsNuxt.js gives full support for SSR apps and takes care of the common pitfalls. Being a
universal app makes it more exciting; the page is server rendered and then SPA takes over. This is how it works:- Pages: Nuxt is opinionated on the project directory structure. It will transform every
.vuefile inside the pages directory as a route for the application. The community has embraced the opinionated directory structure with different projects (looking at you Gatsby, Next.js) and its quite easy to get familiar with. In the boilerplate example, you can see how the pages are structured. For more information on the directory structure that Nuxt enforces, read more here. - Server side data fetching: Nuxt community has built this apollo-module that sets up apollo client for a GraphQL endpoint. So in the
index.vuepage, we add the apollo snippet inside<script>as follows:
Here, author is a graphql query which fetches the list of authors from the database and updates the
author property in vue. This GraphQL query is executed on the server and the data is available in <template> which allows the page to be rendered server side. The same query is then executed on the client side as well, making it universal/isomorphic.apollo-module in Nuxt accepts a
Nuxt.js + Hasura + apollo-module = Universal apps with GraphQL!clientConfig which can be used to configure endpoint, authentication and other parameters as well.I have put together a boilerplate and tutorial so that you can get started quickly!
Check it out on github.
Take it for a spin and let us know what you think. If you have any questions or run into any trouble, feel free to reach out to us on twitter, github or on our discord server.