Tutorial & boilerplate setup

For this tutorial, the GraphQL backend and the basic app UI is already ready. Our task will be to convert the "static" UI into a working realtime app.

Download and run the boilerplate

  1. Download the boilerplate from https://hasura.io/learn/graphql/react/boilerplate.zip
  2. Unzip and make sure you're in the app-boilerplate directory
  3. Install dependencies and run the "static" app
    • npm install
    • npm start
  4. Signup/login as a user to load the todo app page

This is what you should see after the steps above:

Boilerplate after login

Load GraphiQL to play with your GraphQL APIs

  1. Head to https://hasura.io/learn/graphql/graphiql
  2. Log in (so that you can test the GraphQL APIs with a valid user token)

This is what you should see after the steps above:

GraphiQL after login

GraphQL Endpoint

We are going to make use of https://hasura.io/learn/graphql endpoint for making our GraphQL requests in the tutorial.

Now, if you want to run your own version of the above GraphQL endpoint, you can do so by following the Hasura Backend tutorial

  • Deploy Hasura Cloud
  • Set up Hasura Backend

Head to Hasura Backend Tutorial and get started with creating your own version.

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. โœŒ๏ธ