/nhost-react-example-app

Nhost Example project using React

Primary LanguageJavaScript

Nhost Example App with React

Simple Nhost example app using Hasura.

Get started

  1. Create a project on nhost.io
  2. Clone this repo
  3. Edit config.js with the details from you project at nhost.io
  4. npm install
  5. npm start

Auth

  • register page
  • activate account page
  • sign in page
  • new password page
  • forgot password

Storage

  • upload file
  • show file link (ex pdf)
  • show file as image

GraphQL

  • Get data using query
  • Get data using subscriptions
  • Mutate data

Install

1. Create Nhost project

2. Edit src/config.js with your Nhost project links

3. Add the todos table

  • Go to your Hasura console
  • Click on the Data tab in the top menu
  • Click on SQL in the left side menu
  • Copy and paste the content from db.sql (located here in the repo) in the Raw SQL textarea in the Hasura Console.
  • Check Track this
  • Click Run!

4. Set permissions

TODOs permissions

  • Click on the todos table in the left side menu
  • Click on Permissions in the top menu
  • Enter a new role user
  • Click on the X under insert to start setting permissions for insert
    • Under Row insert permissions
      • Select Without any checks
      • Under Column insert permissions
        • Check todo
      • Under Column presets
        • Select Column name user_id
        • Select Select preset type from session variable
        • Insert column-name user-id (NOT underscore)
      • Click Save Permissions
  • Click on the X under select to start setting permissions for select
    • Under Row select permissions
      • Select With custom check
      • Create the following check: {"user_id":{"_eq":"X-Hasura-User-Id"}}
    • Under Column select permissons
      • Click the Toggle All button to select all columns
    • Under Aggregation queries permissions
      • Check Allow role User to make aggregation queries
    • Click Save Permissions
  • Click on the X under update to start setting permissions for update
    • Under Row update permissions
      • Select With same custom checks as select
    • Under Column update permissions
      • Check todo and done
    • Click Save Permissions
  • Click on the X under delete to start setting permissions for delete
    • Under Row delete permissions
      • Select With same custom checks as select, update
    • Click Save Permissions

FILEs permissions

  • Click on the files table in the left side menu
  • Click on Permissions in the top menu
  • Enter a new role user
  • Click on the X under insert to start setting permissions for insert
    • Under Row insert permissions
      • Select Without any checks
      • Under Column insert permissions
        • Check file_path and downloadable_url
      • Under Column presets
        • Select Column name user_id
        • Select Select preset type from session variable
        • Insert column-name user-id (NOT underscore)
      • Click Save Permissions
  • Click on the X under select to start setting permissions for select
    • Under Row select permissions
      • Select With custom check
      • Create the following check: {"user_id":{"_eq":"X-Hasura-User-Id"}}
    • Under Column select permissons
      • Click the Toggle All button to select all columns
    • Under Aggregation queries permissions
      • Check Allow role User to make aggregation queries
    • Click Save Permissions
  • Click on the X under delete to start setting permissions for delete
    • Under Row delete permissions
      • Select With same custom checks as select, update
    • Click Save Permissions

5. Create GraphQL relations

  • Click on the Data tab in the top menu
  • Click Track All next to "Untracked foreign-key relations"

6. Start the app

npm install
npm start

The app should appear in the browser.

7. Register account

8. Login

9. Use the Todo app