Getting data from Hasura onto your Next.js app

Hasura

GraphQL

You get exactly what you ask for!

Next.js

Next.js + Hasura + next-apollo = SSR react apps with GraphQL!

npx create-next-app <app-name>
yarn add next-apollo apollo-boost graphql graphql-tag next-apollo react-apollo
// config.jsimport { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'

const GRAPHQL_URL = 'http://localhost:8080/v1/graphql' // url from Hasura

export default withData({
link: new HttpLink({ uri: GRAPGQL_API }),
});
import gql from 'graphql-tag'

const BOOKS_QUERY = gql`
query Books {
books {
id
title
author{
id
name
}
}
}
`

export default BOOKS_QUERY
<Query query={BOOKS_QUERY}>
{({loading, data, error}) => {
if (error) {
return <div>Error {JSON.stringify(error)}</div>
}
if (loading) {
return <div>Loading..</div>
}
return (
<ul>
{data.books.map((book) => {
return (
<li key={`book__${book.id}`}>
<h3>{book.title}</h3> <small>{book.author.name}</small>
</li>
)
})}
</ul>
)
}}
</Query>
npm run start

In conclusion

I am Heithem! PHP, JS specialist, JamStack/Go enthusiast, and more

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store