Nhost Example App with React
Simple Nhost example app using Hasura.
Get started
- Create a project on nhost.io
- Clone this repo
- Edit config.js with the details from you project at nhost.io
npm install
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
src/config.js
with your Nhost project links
2. Edit 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
- Check
- Under Column presets
- Select Column name
user_id
- Select Select preset type
from session variable
- Insert column-name
user-id
(NOT underscore)
- Select Column name
- Click Save Permissions
- Under Row insert 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
- Under Row select 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
anddone
- Check
- Click Save Permissions
- Under Row update 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
- Under Row delete 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
anddownloadable_url
- Check
- Under Column presets
- Select Column name
user_id
- Select Select preset type
from session variable
- Insert column-name
user-id
(NOT underscore)
- Select Column name
- Click Save Permissions
- Under Row insert 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
- Under Row select 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
- Under Row delete 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.