Create React App

Create React App

Coming back, now lets create a basic react app as a front-end to our DB and to consume our Graph APIs and experiment on this todos table.


yarn create-react-app todos-example-rocketgraph
cd todos-example-rocketgraph
yarn install
yarn start

to spin up a basic react application

Next, install the dependencies we need to connect to our backends:

yarn add react-router-dom react-router
yarn add @apollo/client @rocketgraphql/react-apollo @rocketgraphql/rocketgraph-js-sdk graphql

Next, add the following code to your index.js:

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { Login } from "./components/login";
import { Signup } from "./components/signup";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import App from "./App";
import { RApolloProvider } from "@rocketgraphql/react-apollo";
import { auth } from "./utils/rockets";
    <RApolloProvider auth={auth} gqlEndpoint="gqlEndpoint/v1/graphql">
            <Route exact path="/login">
              <Login />
            <Route exact path="/signup">
              <Signup />
            <Route exact path="/">
              <App />

In the above code replace the gqlEndpoint with your Hasura URL in your project dashboard:

Hasura Console

It should be of the following format:

The graphQL endpoint will be

Now let's also create a client that talks to our backend and does authentication for us. Create a folder called utils and create a file named rockets.js.

Add this code to /utils/rockets.js

import { createClient } from "@rocketgraphql/rocketgraph-js-sdk";
import Cookies from 'js-cookie';
const config = {
  baseURL: "",
const { auth } = createClient(config);
export { auth };

You will find your backend URL in the below tab:

backend console