Building a Book app with NextJs, Hasura & gqless

https://gqless.dev/

qgless, it’s a tool that makes you generate the queries at runtime based upon the data your app consumes, which means converting the paths into GraphQL queries.

A GraphQL client without queries ✨

Step 1: App setup

So, let's start by installing NextJs:

npx create-next-app <app-name>

we need to install some dependencies

yarn add — dev @types/react @types/node

Then cd <app-name> and create a new file named tsconfig.json at the root of your project and run this command npm run dev to generate typescript config for Next.js.

Step 2: work with gqless

Install the gqless dependencies

Important: If using Typescript, ensure version is 3.7.0+

yarn add gqless
yarn add @gqless/cli -D

Create a new file named .gqlessrs.json at the root of your project, with the following contents (follow the instructions here to set up codegen and generate all the types from your schema):

{
    "url": "http://localhost:4000", // For the url, use your Hasura GraphQL endpoint
    "outputDir": "graphql",
    "headers": {}
}

Next, add a generate script to your package.json:

"scripts": {
    "generate": "gqless generate"
}

After you run the generate command, you should see a new folder in your app where you specified the outputDir.

In your component import the Books query

import React, { Suspense } from 'react'
import { query, books } from "../graphql";
import { graphql } from "@gqless/react";

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.

const Books = graphql(() => {
    return (
    <div>
      {query.books.map(book => {
          return <div key={book.id}>{book.title}</div>;
      })}
    </div>
  );
});
export default function Home() {
    return (
    <div>
      <Suspense fallback="loading">
        <Books />
      </Suspense>
    </div>
  );
}

You can find the demo app here on GitHub.