Get up and running with Nhost and React

Get up and running with Nhost and React

1. Create Nhost Project

   Create your project through the Nhost Dashboard.

2. Setup Database

   Navigate to the SQL Editor of the database and run the following SQL to create a new table todos.

   Make sure the option Track this is enabled

   SQL Editor

   CREATE TABLE todos (
     id uuid NOT NULL DEFAULT gen_random_uuid(),
     created_at timestamptz NOT NULL DEFAULT now(),
     updated_at timestamptz NOT NULL DEFAULT now(),
     user_id uuid NOT NULL,
     contents text NOT NULL,
     PRIMARY KEY (id),
     FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE cascade ON DELETE cascade
   );
   

   
3. Configure the todos table permissions

   To set permissions for the new todos table, select the table, click on the ... to open the actions dialog, then click on Edit Permissions. Set the following permissions for the user role:

   1. Insert

      • Set Row insert permissions to Without any checks
      • Select all columns except user_id on Column insert permissions
      • Add a new Column preset and set Column Name to user_id and Column Value to X-Hasura-User-Id
      • Save
      

   2. Select

      • Set Row select permissions to With custom check and fill in the following rule:
        • Set Where to todos.user_id
        • Set the operator to _eq
        • Set the value to X-Hasura-User-Id
      • Select all columns except user_id on Column select permissions
      • Save
      

   3. Update

      • Set Row update permissions to With custom check and fill in the following rule:
        • Set Where to todos.user_id
        • Set the operator to _eq
        • Set the value to X-Hasura-User-Id
      • Select all columns except user_id on Column select permissions
      • Save
      

   4. Delete

      • Set Row delete permissions to With custom check and fill in the following rule:
        • Set Where to todos.user_id
        • Set the operator to _eq
        • Set the value to X-Hasura-User-Id
      • Save
      
4. Configure permissions to enable user file uploads

   To enable file uploads by users, set the permissions as follows:

   1. Edit the files table permissions

      1. Navigate to the files table within the Database tab
      2. Click on the three dots (…) next to the files table
      3. Click on Edit Permissions

   2. Modify the Insert permission for the user role:

      1. Set Row insert permissions to Without any checks
      2. Select all columns on Column insert permissions
      3. Save
      

   3. Select

      • Set Row select permissions to With custom check and fill in the following rule:
        • Set Where to files.uploaded_by_user_id
        • Set the operator to _eq
        • Set the value to X-Hasura-User-Id
      • Select all columns on Column select permissions
      • Save
      
5. Bootstrap your React app

   Intialize a new React project using the template @nhost/react-apollo

   Terminal

   npx create-react-app myapp --template @nhost/react-apollo
   

6. Connect your React app to the Nhost project

   Copy your project’s <subdomain> and <region> values available on the dashboard overview

   src/index.tsx

   const nhost = new NhostClient({
     subdomain: "<subdomain>", // replace the subdomain value e.g. "hjcuuqweqwezolpolrep"
     region: "<region>", // replace the region value e.g. "eu-central-1"
   });
   

7. Create the Todos Page and Add It to the Sidebar Navigation

   src/components/routes/app/todos.tsx

   import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
   import { Button } from '@/components/ui/button'
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Input } from '@/components/ui/input'
   import { gql, useMutation } from '@apollo/client'
   import { useAuthQuery } from '@nhost/react-apollo'
   import { Check, Info, Plus, Trash } from 'lucide-react'
   import { useState } from 'react'
   import { toast } from 'sonner'
   
   export default function Todos() {
     const { data, refetch: refetchTodos } = useAuthQuery<{
       todos: Array<{
         id: string
         contents: string
       }>
     }>(gql`
       query {
         todos(order_by: { createdAt: desc }) {
           id
           contents
         }
       }
     `)
   
     const [contents, setContents] = useState('')
   
     const [addTodo] = useMutation<{
       insertTodo?: {
         id: string
         contents: string
       }
     }>(gql`
       mutation ($contents: String!) {
         insertTodo(object: { contents: $contents }) {
           id
           contents
         }
       }
     `)
   
     const [deleteTodo] = useMutation<{
       deleteNote?: {
         id: string
         content: string
       }
     }>(gql`
       mutation deleteTodo($todoId: uuid!) {
         deleteTodo(id: $todoId) {
           id
           contents
         }
       }
     `)
   
     const handleAddTodo = () => {
       if (contents) {
         addTodo({
           variables: { contents },
           onCompleted: async () => {
             setContents('')
             await refetchTodos()
           },
           onError: (error) => {
             toast.error(error.message)
           }
         })
       }
     }
   
     const handleDeleteTodo = async (todoId: string) => {
       await deleteTodo({
         variables: { todoId },
         onCompleted: async () => {
           await refetchTodos()
         },
         onError: (error) => {
           toast.error(error.message)
         }
       })
   
       await refetchTodos()
     }
   
     return (
       <div className="w-full">
         <Card className="mb-4">
           <CardHeader>
             <CardTitle>Todos</CardTitle>
           </CardHeader>
         </Card>
         <Card className="w-full pt-6">
           <CardContent className="flex flex-col gap-4">
             <div className="flex flex-row gap-4">
               <Input
                 value={contents}
                 onChange={(e) => setContents(e.target.value)}
                 onKeyDown={(e) => e.code === 'Enter' && handleAddTodo()}
               />
               <Button className="m-0" onClick={handleAddTodo}>
                 <Plus />
                 Add
               </Button>
             </div>
             <div>
               {data?.todos.length === 0 && (
                 <Alert className="w-full">
                   <Info className="w-4 h-4" />
                   <AlertTitle>Empty</AlertTitle>
                   <AlertDescription className="mt-2">Start by adding a todo</AlertDescription>
                 </Alert>
               )}
               {data?.todos.map((todo) => (
                 <div
                   key={todo.id}
                   className="flex flex-row items-center justify-between w-full p-4 border-b last:pb-0 last:border-b-0"
                 >
                   <div className="flex flex-row gap-2">
                     <Check className="w-5 h-5" />
                     <span>{todo.contents}</span>
                   </div>
                   <Button variant="ghost" onClick={() => handleDeleteTodo(todo.id)}>
                     <Trash className="w-5 h-5" />
                   </Button>
                 </div>
               ))}
             </div>
           </CardContent>
         </Card>
       </div>
     )
   }
   

8. Run the project

   Run your project with npm start and enter http://localhost:3000 in your browser.