Build Nuxt 4 client cabinet with Apollo and GraphQL flows

app/pages/products.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { ClientProductsDocument } from '~/composables/graphql/generated';
+
+const { result, loading, error } = useQuery(ClientProductsDocument);
+</script>
+
+<template>
+  <section class="space-y-4">
+    <h1 class="text-2xl font-bold">Витрина товаров</h1>
+    <div v-if="loading" class="alert">Загрузка...</div>
+    <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
+    <div v-else class="grid gap-4 lg:grid-cols-2">
+      <article v-for="product in result?.clientProducts ?? []" :key="product.id" class="card bg-base-100 border border-base-300">
+        <div class="card-body gap-2">
+          <h2 class="card-title">{{ product.name }}</h2>
+          <p class="text-sm opacity-80">{{ product.description }}</p>
+          <p class="text-xs">SKU: {{ product.sku }}</p>
+          <ul class="text-sm space-y-1">
+            <li v-for="stock in product.availableInWarehouses" :key="stock.warehouse.id">{{ stock.warehouse.name }}: {{ stock.availableQty }}</li>
+          </ul>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>