How to Create a GraphQL API in 60 Seconds

How to Create a GraphQL API in 60 Seconds

Hasura is an open-source project that connects your databases and microservices and instantly gives you a production-ready GraphQL API. Reduce your time to go live by giving your team a powerful real-time GraphQL API in seconds from your PostgreSQL database.

What Is Hasura?

Hasura is an open-source project that connects your databases and microservices and instantly gives you a production-ready GraphQL API.

Reduce your time to go live by giving your team a powerful real-time GraphQL API in seconds from your PostgreSQL database.

Why Hasura?

The project is completely open source on GitHub, with new improvements coming out every week.

You can get more than 1,000 queries/sec with 50MB RAM — just with a container on a free Heroku dyno.

You can integrate and interact with microservices, connecting them by webhooks based on database events or merging multiple GraphQL external end points.

You get a full feature JWT or webhook-user-management system connectable to other authentication providers like Firebase or Auth0.

You get fully compatible subscriptions, which means you can get instant updates of the data from your back end to your front end thanks to WebSocket without having to handle anything except for writing the GraphQL query to get the data.

You can get all of that ready in less than one minute — or 60 seconds.

Let’s Get Started!

This is image title

Just press “Deploy to Heroku.” This will automatically add a new app to your account and will also configure a free PostgreSQL database for you.

If you don’t have an account on Heroku, you need to sign up for one. You won’t need a credit card, and once you sign up, you’ll be redirected to your Heroku-app creation page automatically.

All these steps on Heroku will require around 30 seconds, so we still have 30 seconds to prepare Hasura.

Let’s Add Some Info to Your Database

  1. Add Star Wars SQL: Go to the DATA tab, and you’ll add the SQL from there.

Remember: Tick the “Track this” checkbox to automatically add these tables to the ones handled by Hasura without having to manually add them.

This is image title

  1. Relationships: After having added the tables, you’ll have to do one last thing: adding the relationships to each table so you’ll be able to query the tables nesting together with the data based on foreign keys.

This is image title

This is image title

3. Let’s make a query: Go on the GraphQL page, insert this query, and press the play button to show the results of these two tables merged together.

query planets {
  planet {
    name
    diameter
    climate
    people(limit: 5) {
      name
    }
  }
}

star-wars-query01.graphql

Let’s Make a GraphQL Query From Your Front End

Let’s show this data from your front end. I’ll use a modified version of a simple React app with Apollo Client from this tutorial.

Remember to replace the URLof the GraphQL server with the URL of your Heroku application URL, in my case starwars-hasura.herokuapp.com.

import "./styles.css";
import React from "react";
import ReactDOM from "react-dom";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";

import App from "./App";

const client = new ApolloClient({
  uri: "https://starwars-hasura.herokuapp.com/v1/graphql"
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("app")
);

App.js

Complete code sanbox with data from Hasura:

https://codesandbox.io/s/star-wars-hasura-x7bt9

And now?

Secure your Hasura end point like the warning message on the top right of Hasura reminds you to do it.

You can add a user authentication. I suggest you use Firebase because they don’t have any hard limit on the number of users you can have in your app.

Then, you could also try to add an external end point to your Hasura instance by going to the Remote Schemas tab.

This is image title

After that, you could link every update to a row of your table with an invocation of the microservice to check if the user input contains spam or phishing words.

This is image title

I Don’t Want to Use Hasura

Sure you’ll be able to do similar things with other packages like:

GraphQL programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Programming In Acceleration: Levelling Up Programming Skills

Some require and some are not. But acceleration programs might require you to build one. I’ll tell you how I made a computer program for the competition.

Coding 101: Programming Language Building Blocks

This article will introduce the concepts and topics common to all programming languages, that beginners and experts must know!

Getting started with GraphQL

The world is a stage where all of us are artists. Constant learning is the foundation of success. So, here we are going to learn about a query language introduc.

Guide to Python Programming Language

Guide to Python Programming Language

Functional Programming

Functional Programming: Functional Programming is a Declarative style of Programming Paradigm for writing computer programs.