How Rocketgraph is built using Rocketgraph
Published: 2023-08-09 06:51:21

## TL;DR

I built a PAAS [Rocketgraph](https://rocketgraph.io/). It lets you build production grade web applications in minutes rather than in weeks. I believe in the idea so much that the entire Rocketgraph infrastructure runs on Rocketgraph.

You can find the latest release [here](https://github.com/RocketsGraphQL/rgraph/releases/tag/v0.2-stable).

We do this by providing you the following functionality:

- 20 GB Postgres DB hosted on AWS RDS
- Pre-populated with some tables for common use cases
- Authentication using email/password
- Authentication using Social logins, Magic link and OTP as well.
- Server less functions.
- Hasura console for an amazing GraphQL experience.

So as you can see, it covers most of the use cases. You'll only have to write the front-end for your web applications. You can see me build a todos application here

{% youtube K5TGDapSnQw %}

---

## Rocketgraph: The complete backend

Build production grade web applications in minutes, not weeks. Rocketgraph is an open-source backend as a service that let's you build web applications much faster. It's like Firebase but much better.

When you create a project on rocketgraph, you get PostgresDB to hold your data, Hasura console that "GraphQLises" your data, authentication, serverless functions and much more.

You can check out the detailed blog [here](https://blog.rocketgraph.io/), [documentation](https://docs.rocketgraph.io/) and the [example](https://github.com/RocketsGraphQL/messaging-app) [setups](https://github.com/RocketsGraphQL/rgraph/tree/master/example-setups) 

I have been building it alone for the last 2 years and only spoke about it [here](https://dev.to/kaushik94/how-to-build-a-real-time-movie-voting-system-using-reactjs-3nfa), [here](https://dev.to/kaushik94/tldr-version-messaging-app-4dh0) and [here](https://www.producthunt.com/products/rocketgraph-2). It was extremely difficult and lonely here.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/RIAOV7vXdehyGB6tIg/giphy.gif">

## How do you do it?
<img width="100%" style="width:100%" src="https://media2.giphy.com/media/nFybmudwXVlqiItpiO/giphy.gif?cid=ecf05e47wiq3llz1bjnignhvk6rcmt5yaey8m8nn50xmfjjm&ep=v1_gifs_search&rid=giphy.gif&ct=g">

We do this by leveraging the power of GraphQL. Basically, we provide an authentication method to your Javascript using a library called `rocket-js-sdk` like so:

```js
rocketgraph.signUp({ email, password, provider: "local"})
```

Then every GraphQL request you make will be embedded with a JWT once you wrap our provider at the root level of your tree like so:

```js
<RApolloProvider auth={auth} gqlEndpoint="https://hasura-vf0gs3q.rocketgraph.app/v1/graphql">
    <App />
</RApolloProvider>
```

Once you have configured that, subscribe to your Postgres tables like:

```js
const GET_TODOS = gql`
  subscription {
    instances {
      id
      created_at
      name
    }
  }
`;

export default function ProjectsList() {
  const { data, loading } = useSubscription(GET_TODOS);
  console.log("data, loading: ", data, loading);
}
```

You'd only get the instances belonging to that particular user. Of-course you'd need to enable public/user access which is really simple. Please follow the steps [here](https://docs.rocketgraph.io/create-basic-app/permissions).

## Hows Rocketgraph built

So to hold the users data, I use AWS RDS. The I run the [hasura-batteries](https://github.com/RocketsGraphQL/hasura-batteries) software that is connected to this RDS instance. This runs as a docker container alongside the hasura GraphQL engine as described in this file [here](https://github.com/RocketsGraphQL/hasura-batteries/blob/master/docker-compose.yml).

Now in my frontend, I wrapped it with the `RApolloProvider` as described above. Now when the user logs in, hasura-batteries already takes care of setting and refreshing the JWT tokens. Now everytime I need to fetch the user's details, for example all the projects of the user I just do:

```js
const GET_TODOS = gql`
  subscription {
    instances {
      id
      created_at
      name
    }
  }
`;

export default function ProjectsList() {
  const { data, loading } = useSubscription(GET_TODOS);
  console.log("data, loading: ", data, loading);
}
```

That's literally it. This brought down the code written by 25% since most of it was redundant stuff like authentication, setting the JWTs, fetch methods. Now all of that suff is gone out the window. Simple, clean, elegant GraphQL requests like the good ol' JSON.

Be sure to [give us a star](https://github.com/RocketsGraphQL/rgraph). Check out [Rocketgraph](https://rocketgraph.io). Please let me know if you have any questions. Oh, and it's free for 1 week and no CC required.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/pVVk0XwiIkYoQkjRfl/giphy.gif">