GraphQL Operations in Vue

This part builds upon the previous parts by demonstrating how to perform GraphQL operations with proper database permissions. You’ll learn how to design database tables, configure user permissions, and implement complete CRUD operations through GraphQL queries and mutations in a real todos application.

This is Part 4 in the Full-Stack Vue Development with Nhost series. This part focuses on GraphQL operations, database management, and permission-based data access control in a production application.

Full-Stack Vue Development with Nhost

1. Create Project

Set up your Nhost project

2. Protected Routes

Route protection basics

3. User Authentication

Complete auth flow

4. GraphQL Operations

Current - CRUD operations with GraphQL

5. File Uploads

File upload and management

Prerequisites

Complete the User Authentication part first
The project from the previous part set up and running

What You’ll Build

By the end of this part, you’ll have:

GraphQL queries and mutations for complete CRUD operations
Database schema with proper relationships and constraints
User permissions for secure data access control
Vue components that interact with GraphQL endpoint

Step-by-Step Guide

Create the To-Dos Table

First, we’ll perform the database changes to set up the todos table with proper schema and relationships to users.In your Nhost project dashboard:

Navigate to Database
Click on the SQL Editor

Enter the following SQL:

CREATE TABLE public.todos (
  id uuid DEFAULT gen_random_uuid() NOT NULL,
  created_at timestamptz DEFAULT now() NOT NULL,
  updated_at timestamptz DEFAULT now() NOT NULL,
  title text NOT NULL,
  details text,
  completed bool DEFAULT false NOT NULL,
  user_id uuid NOT NULL,
  PRIMARY KEY (id),
  FOREIGN KEY (user_id) REFERENCES auth.users (id) ON UPDATE CASCADE ON DELETE CASCADE
);


CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = now();
  RETURN NEW;
END;
$$ language 'plpgsql';


CREATE TRIGGER update_todos_updated_at
  BEFORE UPDATE ON public.todos
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();

Please make sure to enable Track this so that the new table todos is available through the auto-generated APIs

Set Up Permissions

It’s now time to set permission rules for the table you just created. With the table todos selected, click on …, followed by Edit Permissions. You will set permissions for the user role and actions insert, select, update, and delete.

When inserting permissions we are only allowing users to set the title, details, and completed columns as the rest of the columns are set automatically by the backend. The user_id column is configured as a preset to the currently authenticated user’s ID using the X-Hasura-User-Id session variable. This ensures that each todo is associated with the user who created it.

Create the Todos Page Component

Now let’s implement the Vue component that uses the database we just configured.

src/views/Todos.vue

<template>
  <div v-if="!session" class="auth-message">
    <p>Please sign in to view your todos.</p>
  </div>

  <div v-else class="container">
    <header class="page-header">
      <h1 class="page-title">
        My Todos
        <button
          v-if="!showAddForm"
          type="button"
          @click="showAddForm = true"
          class="add-todo-btn"
          title="Add a new todo"
        >
          +
        </button>
      </h1>
    </header>

    <div v-if="error" class="error-message">
      <strong>Error:</strong> {{ error }}
    </div>

    <div v-if="showAddForm" class="todo-form-card">
      <form @submit.prevent="addTodo" class="todo-form">
        <h2 class="form-title">Add New Todo</h2>
        <div class="form-fields">
          <div class="field-group">
            <label :for="titleId">Title *</label>
            <input
              :id="titleId"
              type="text"
              v-model="newTodoTitle"
              placeholder="What needs to be done?"
              required
            />
          </div>
          <div class="field-group">
            <label :for="detailsId">Details</label>
            <textarea
              :id="detailsId"
              v-model="newTodoDetails"
              placeholder="Add some details (optional)..."
              :rows="3"
            />
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">
              Add Todo
            </button>
            <button
              type="button"
              @click="cancelAddForm"
              class="btn btn-secondary"
            >
              Cancel
            </button>
          </div>
        </div>
      </form>
    </div>

    <div v-if="!showAddForm">
      <div v-if="loading" class="loading-container">
        <div class="loading-content">
          <div class="spinner"></div>
          <span class="loading-text">Loading todos...</span>
        </div>
      </div>

      <div v-else class="todos-list">
        <div v-if="todos.length === 0" class="empty-state">
          <svg
            class="empty-icon"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              :stroke-width="1.5"
              d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
            />
          </svg>
          <h3 class="empty-title">No todos yet</h3>
          <p class="empty-description">
            Create your first todo to get started!
          </p>
        </div>

        <div
          v-else
          v-for="todo in todos"
          :key="todo.id"
          :class="['todo-card', { completed: todo.completed }]"
        >
          <div v-if="editingTodo?.id === todo.id" class="todo-edit">
            <div class="edit-fields">
              <div class="field-group">
                <label :for="`${titleId}-edit`">Title</label>
                <input
                  :id="`${titleId}-edit`"
                  type="text"
                  v-model="editingTodo.title"
                />
              </div>
              <div class="field-group">
                <label :for="`${detailsId}-edit`">Details</label>
                <textarea
                  :id="`${detailsId}-edit`"
                  v-model="editingTodo.details"
                  :rows="3"
                />
              </div>
              <div class="edit-actions">
                <button
                  type="button"
                  @click="saveEdit"
                  class="btn btn-primary"
                >
                  ✓ Save Changes
                </button>
                <button
                  type="button"
                  @click="editingTodo = null"
                  class="btn btn-cancel"
                >
                  ✕ Cancel
                </button>
              </div>
            </div>
          </div>

          <div v-else class="todo-content">
            <div class="todo-header">
              <button
                type="button"
                :class="['todo-title-btn', { completed: todo.completed }]"
                @click="toggleTodoExpansion(todo.id)"
              >
                {{ todo.title }}
              </button>
              <div class="todo-actions">
                <button
                  type="button"
                  @click="toggleComplete(todo)"
                  class="action-btn action-btn-complete"
                  :title="todo.completed ? 'Mark as incomplete' : 'Mark as complete'"
                >
                  {{ todo.completed ? "↶" : "✓" }}
                </button>
                <button
                  type="button"
                  @click="editingTodo = todo"
                  class="action-btn action-btn-edit"
                  title="Edit todo"
                >
                  ✏️
                </button>
                <button
                  type="button"
                  @click="deleteTodo(todo.id)"
                  class="action-btn action-btn-delete"
                  title="Delete todo"
                >
                  🗑️
                </button>
              </div>
            </div>

            <div v-if="expandedTodos.has(todo.id)" class="todo-details">
              <div
                v-if="todo.details"
                :class="['todo-description', { completed: todo.completed }]"
              >
                <p>{{ todo.details }}</p>
              </div>

              <div class="todo-meta">
                <div class="meta-dates">
                  <span class="meta-item">
                    Created: {{ new Date(todo.created_at).toLocaleString() }}
                  </span>
                  <span class="meta-item">
                    Updated: {{ new Date(todo.updated_at).toLocaleString() }}
                  </span>
                </div>
                <div v-if="todo.completed" class="completion-badge">
                  <svg
                    class="completion-icon"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      :stroke-width="2"
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                  <span>Completed</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, useId } from "vue";
import { useAuth } from "../lib/nhost/auth";

// The interfaces below define the structure of our data
// They are not strictly necessary but help with type safety

// Represents a single todo item
interface Todo {
  id: string;
  title: string;
  details: string | null;
  completed: boolean;
  created_at: string;
  updated_at: string;
  user_id: string;
}

// This matches the GraphQL response structure for fetching todos
// Can be used as a generic type on the request method
interface GetTodos {
  todos: Todo[];
}

// This matches the GraphQL response structure for inserting a todo
// Can be used as a generic type on the request method
interface InsertTodo {
  insert_todos_one: Todo | null;
}

// This matches the GraphQL response structure for updating a todo
// Can be used as a generic type on the request method
interface UpdateTodo {
  update_todos_by_pk: Todo | null;
}

const { nhost, session } = useAuth();

const todos = ref<Todo[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);
const newTodoTitle = ref("");
const newTodoDetails = ref("");
const editingTodo = ref<Todo | null>(null);
const showAddForm = ref(false);
const expandedTodos = ref<Set<string>>(new Set());

const titleId = useId();
const detailsId = useId();

const fetchTodos = async () => {
  try {
    loading.value = true;
    // Make GraphQL request to fetch todos using Nhost client
    // The query automatically filters by user_id due to Hasura permissions
    const response = await nhost.graphql.request<GetTodos>({
      query: `
        query GetTodos {
          todos(order_by: { created_at: desc }) {
            id
            title
            details
            completed
            created_at
            updated_at
            user_id
          }
        }
      `,
    });

    // Check for GraphQL errors in the response body
    if (response.body.errors) {
      throw new Error(
        response.body.errors[0]?.message || "Failed to fetch todos",
      );
    }

    // Extract todos from the GraphQL response data
    todos.value = response.body?.data?.todos || [];
    error.value = null;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Failed to fetch todos";
  } finally {
    loading.value = false;
  }
};

const addTodo = async () => {
  if (!newTodoTitle.value.trim()) return;

  try {
    // Execute GraphQL mutation to insert a new todo
    // user_id is automatically set by Hasura based on JWT token
    const response = await nhost.graphql.request<InsertTodo>({
      query: `
        mutation InsertTodo($title: String!, $details: String) {
          insert_todos_one(object: { title: $title, details: $details }) {
            id
            title
            details
            completed
            created_at
            updated_at
            user_id
          }
        }
      `,
      variables: {
        title: newTodoTitle.value.trim(),
        details: newTodoDetails.value.trim() || null,
      },
    });

    if (response.body.errors) {
      throw new Error(response.body.errors[0]?.message || "Failed to add todo");
    }

    if (!response.body?.data?.insert_todos_one) {
      throw new Error("Failed to add todo");
    }
    todos.value = [response.body?.data?.insert_todos_one, ...todos.value];
    newTodoTitle.value = "";
    newTodoDetails.value = "";
    showAddForm.value = false;
    error.value = null;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Failed to add todo";
  }
};

const updateTodo = async (
  id: string,
  updates: Partial<Pick<Todo, "title" | "details" | "completed">>,
) => {
  try {
    // Execute GraphQL mutation to update an existing todo by primary key
    // Hasura permissions ensure users can only update their own todos
    const response = await nhost.graphql.request<UpdateTodo>({
      query: `
        mutation UpdateTodo($id: uuid!, $updates: todos_set_input!) {
          update_todos_by_pk(pk_columns: { id: $id }, _set: $updates) {
            id
            title
            details
            completed
            created_at
            updated_at
            user_id
          }
        }
      `,
      variables: {
        id,
        updates,
      },
    });

    if (response.body.errors) {
      throw new Error(
        response.body.errors[0]?.message || "Failed to update todo",
      );
    }

    if (!response.body?.data?.update_todos_by_pk) {
      throw new Error("Failed to update todo");
    }

    const updatedTodo = response.body?.data?.update_todos_by_pk;
    if (updatedTodo) {
      todos.value = todos.value.map((todo) =>
        todo.id === id ? updatedTodo : todo,
      );
    }
    editingTodo.value = null;
    error.value = null;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Failed to update todo";
  }
};

const deleteTodo = async (id: string) => {
  if (!confirm("Are you sure you want to delete this todo?")) return;

  try {
    // Execute GraphQL mutation to delete a todo by primary key
    // Hasura permissions ensure users can only delete their own todos
    const response = await nhost.graphql.request({
      query: `
        mutation DeleteTodo($id: uuid!) {
          delete_todos_by_pk(id: $id) {
            id
          }
        }
      `,
      variables: {
        id,
      },
    });

    if (response.body.errors) {
      throw new Error(
        response.body.errors[0]?.message || "Failed to delete todo",
      );
    }

    todos.value = todos.value.filter((todo) => todo.id !== id);
    error.value = null;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Failed to delete todo";
  }
};

const toggleComplete = async (todo: Todo) => {
  await updateTodo(todo.id, { completed: !todo.completed });
};

const saveEdit = async () => {
  if (!editingTodo.value) return;
  await updateTodo(editingTodo.value.id, {
    title: editingTodo.value.title,
    details: editingTodo.value.details,
  });
};

const toggleTodoExpansion = (todoId: string) => {
  const newExpanded = new Set(expandedTodos.value);
  if (newExpanded.has(todoId)) {
    newExpanded.delete(todoId);
  } else {
    newExpanded.add(todoId);
  }
  expandedTodos.value = newExpanded;
};

const cancelAddForm = () => {
  showAddForm.value = false;
  newTodoTitle.value = "";
  newTodoDetails.value = "";
};

// Fetch todos when user session is available
// The session contains the JWT token needed for GraphQL authentication
onMounted(() => {
  if (session.value) {
    fetchTodos();
  }
});
</script>

Update Router Configuration

Add the todos page to your application routing.

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import { useAuth } from "../lib/nhost/auth";
import HomeView from "../views/HomeView.vue";
import ProfileView from "../views/ProfileView.vue";
import SignIn from "../views/SignIn.vue";
import SignUp from "../views/SignUp.vue";
import Todos from "../views/Todos.vue";
import Verify from "../views/Verify.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/signin",
      name: "SignIn",
      component: SignIn,
    },
    {
      path: "/signup",
      name: "SignUp",
      component: SignUp,
    },
    {
      path: "/verify",
      name: "Verify",
      component: Verify,
    },
    {
      path: "/profile",
      name: "profile",
      component: ProfileView,
      meta: { requiresAuth: true },
    },
    {
      path: "/todos",
      name: "Todos",
      component: Todos,
      meta: { requiresAuth: true },
    },
    {
      path: "/:pathMatch(.*)*",
      redirect: "/",
    },
  ],
});

// Navigation guard for protected routes
router.beforeEach((to) => {
  if (to.meta["requiresAuth"]) {
    const { isAuthenticated, isLoading } = useAuth();

    // Show loading state while authentication is being checked
    if (isLoading.value) {
      // You can return a loading component path or handle loading in the component
      return true; // Allow navigation, handle loading in component
    }

    if (!isAuthenticated.value) {
      return "/"; // Redirect to home page
    }
  }
  return true;
});

export default router;

Add a link to the todos page in the navigation bar.

src/components/Navigation.vue

<template>
  <nav class="navigation">
    <div class="nav-container">
      <RouterLink to="/" class="nav-logo">
        Nhost Vue Demo
      </RouterLink>

      <div class="nav-links">
        <RouterLink to="/" class="nav-link">
          Home
        </RouterLink>

        <template v-if="isAuthenticated">
          <RouterLink to="/todos" class="nav-link">
            Todos
          </RouterLink>
          <RouterLink to="/profile" class="nav-link">
            Profile
          </RouterLink>
          <button
            @click="handleSignOut"
            class="nav-link nav-button"
          >
            Sign Out
          </button>
        </template>
        <template v-else>
          <RouterLink to="/signin" class="nav-link">
            Sign In
          </RouterLink>
          <RouterLink to="/signup" class="nav-link">
            Sign Up
          </RouterLink>
        </template>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { RouterLink, useRouter } from "vue-router";
import { useAuth } from "../lib/nhost/auth";

const { isAuthenticated, session, nhost } = useAuth();
const router = useRouter();

const handleSignOut = async () => {
  try {
    if (session.value) {
      await nhost.auth.signOut({
        refreshToken: session.value.refreshToken,
      });
    }
    router.push("/");
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : String(err);
    console.error("Error signing out:", message);
  }
};
</script>

Test Your Complete Application

Run your application and test all the functionality:

npm run dev

Things to try out:

Try signing in and out and see how the Todos page is only available when authenticated
Create, view, edit, complete, and delete todos. See how the UI updates accordingly
Open the application in another browser or incognito window, sign in with a different account and verify that you cannot see or modify todos from the first account

Key Features Implemented

Database Schema

GraphQL API

Row-Level Security

CRUD Operations

Rich Interface

Welcome

Quickstart

Tutorial: ToDo App (React)

Tutorial: ToDo App (Next.js)

Tutorial: ToDo App (Vue)

Tutorial: ToDo App (Svelte)

Tutorial: ToDo App (React Native)

GraphQL Operations in Vue

Full-Stack Vue Development with Nhost

1. Create Project

2. Protected Routes

3. User Authentication

4. GraphQL Operations

5. File Uploads

Prerequisites

What You’ll Build

Step-by-Step Guide

Create the To-Dos Table

Set Up Permissions

Create the Todos Page Component

Update Router Configuration

Update Navigation Links

Test Your Complete Application

Key Features Implemented

Welcome

Quickstart

Tutorial: ToDo App (React)

Tutorial: ToDo App (Next.js)

Tutorial: ToDo App (Vue)

Tutorial: ToDo App (Svelte)

Tutorial: ToDo App (React Native)

​Full-Stack Vue Development with Nhost

1. Create Project

2. Protected Routes

3. User Authentication

4. GraphQL Operations

5. File Uploads

​Prerequisites

​What You’ll Build

​Step-by-Step Guide

​Create the To-Dos Table

​Set Up Permissions

​Create the Todos Page Component

​Update Router Configuration

​Update Navigation Links

​Test Your Complete Application

​Key Features Implemented

Full-Stack Vue Development with Nhost

Prerequisites

What You’ll Build

Step-by-Step Guide

Create the To-Dos Table

Set Up Permissions

Create the Todos Page Component

Update Router Configuration

Update Navigation Links

Test Your Complete Application

Key Features Implemented