Frontend Usage

This guide demonstrates how to build Vue Single File Components (SFCs) using the @ormbridge/core client. You’ll see how to perform CRUD operations, work with relationships, and even create real-time UIs using our demo blog models.

Note: These examples assume that you’ve already set up your demo models (e.g., a blog with Post and Category models) in a Django app and registered them with ORMBridge.

JS Syntax

The ORMBridge frontend library is designed to run in the browser. It follows Django ORM’s syntax and uses the same field names as your backend models. There are a few key differences:

1. Function Naming: Snake case function names are converted to CamelCase.
2. Async Terminal Operations: Terminal operations such as .get, .first, .last, or converting a queryset to a list are asynchronous. They must be used inside an async function and awaited.

Example Comparison

Python

Post.objects.get_or_create(...)

JS Translation

await Post.objects.getOrCreate(...)

Return values follow Django conventions. For example, you can destructure the result from getOrCreate in either of these ways:

let [post, created] = await Post.objects.getOrCreate(...)

// or

let { post, created } = await Post.objects.getOrCreate(...)

Loading Querysets

Just like in Django, ORMBridge querysets are lazy. For example, the following code sets up a queryset, but doesn't fetch any data:

let qs = Post.objects.all();

To retrieve the actual data, convert the queryset into a local JS object:

// Using the fetch helper command:
let posts = await qs.fetch();

// Or by converting to an array:
let posts = [ ...await qs.fetch() ];

---

Fetching Data

Below is a Vue component that fetches and displays Posts from your backend. Note that this is not a Live View query, so the data will load once on page load and won’t update automatically.

<template>
  <div>
    <h1>Posts</h1>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <div v-for="post in posts" :key="post.id">
        {{ post.title }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Post } from '../models';

const posts = ref([]);
const loading = ref(true);

onMounted(async () => {
  posts.value = await Post.objects
    .orderBy('-published_date')
    .all()
    .fetch();
  loading.value = false;
});
</script>

---

Creating Data

This component shows how to create a new post by providing a title and content. For relationships, simply pass the related object’s ID (using a static value here for demonstration):

<template>
  <form @submit.prevent="createPost">
    <input v-model="title" placeholder="Title" />
    <textarea v-model="content" placeholder="Content"></textarea>
    <button type="submit" :disabled="submitting">Create</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { Post } from '../models';

const title = ref('');
const content = ref('');
const submitting = ref(false);

async function createPost() {
  submitting.value = true;
  await Post.objects.create({
    title: title.value,
    content: content.value,
    author: 1 // Replace this with an actual user id
  });
  submitting.value = false;
  title.value = '';
  content.value = '';
}
</script>