Frontend & API Layer AI Prompts: Vue, Django & GraphQL (2026)

You are a senior full-stack architect with expertise in Vue 3, Nuxt 4, Django 5, and GraphQL.

Design a production SaaS architecture for a project management tool:

Backend (Django 5 + Python 3.13):
- Auth: django-allauth with JWT via djangorestframework-simplejwt
- Database: PostgreSQL 16 with django-pgvector for AI-powered search
- API: Graphene-Django 3 (GraphQL) + minimal DRF REST for auth and webhooks
- Background tasks: Celery 5 + Redis (user notifications, email, AI embeddings)
- Caching: Django's cache framework with Redis backend (per-user query cache)

Frontend (Nuxt 4 + Vue 3):
- State: Pinia with pinia-plugin-persistedstate
- GraphQL client: Apollo Client 3 with graphql-codegen for TypeScript types
- Auth: nuxt-auth-utils consuming Django's JWT
- Real-time: Apollo subscriptions over WebSocket (Django Channels backend)
- UI: Nuxt UI v3

Deliver:
1. Django app layout: which apps, what models, how Graphene schema is composed
2. Nuxt directory structure: which pages SSR, which SSG, which SPA
3. GraphQL schema structure: which types live in which Django app, federation strategy
4. Celery task architecture: which tasks are async vs deferred, beat schedule
5. Cross-layer auth flow: Django issues JWT → Nuxt stores → Apollo attaches to headers → Django validates

You are a Vue 3 expert using script setup, TypeScript, and Apollo Client 3 with graphql-codegen.

Build a useProjectTasks composable for a project management app:

Requirements:
- Accepts projectId: Ref<string> as a reactive parameter
- Uses Apollo's useQuery() with the generated ProjectTasksQuery type from graphql-codegen
- Handles loading, error, and empty states explicitly
- Implements optimistic UI for task status toggling (UPDATE_TASK_STATUS mutation)
- Polls every 30s when the window is focused (useVisibilityChange)
- Exposes: tasks (computed), loading, error, toggleStatus(taskId, newStatus)
- Caches per projectId — switching projects should not flash stale data
- TypeScript strict mode: no any, no non-null assertions

Use defineProps/defineEmits if this becomes a component. For the composable, use script setup conventions: return only what the consumer needs.

You are a Django 5 + Graphene-Django 3 expert.

Build a production GraphQL schema for a project management API:

Django models (already exist): User, Organization, Project, Task, Comment
- Task has ForeignKey to Project (project_id) and User (assigned_to_id)
- Comment has ForeignKey to Task

Schema requirements:
1. Types: UserType, ProjectType, TaskType, CommentType with all fields
2. DjangoObjectType for each model with only_fields specified (no implicit exposure)
3. Relay connections: ProjectConnection, TaskConnection with cursor pagination
4. Query: projects(first, after, status), task(id), myTasks, searchTasks(query)
5. Mutations: CreateTask, UpdateTaskStatus, AssignTask, AddComment — each returns payload with task/errors
6. DataLoaders: one per ForeignKey (user_loader, project_loader, comments_by_task_loader) — no ORM calls in resolvers
7. Authorization: schema-level shield using graphql-core middleware — only org members see org data
8. N+1 prevention: verify every resolver uses DataLoader.load() — flag any direct queryset access

Output: complete schema.py, types.py, mutations.py, dataloaders.py, and middleware.py

You are a security-focused full-stack engineer using Django 5 and Vue 3 / Nuxt 4.

Implement a complete authentication system:

Django backend:
- Auth library: django-allauth (social: Google, GitHub) + djangorestframework-simplejwt
- Token strategy: short-lived access token (15 min) + httpOnly cookie refresh token (7 days)
- Endpoints: POST /auth/login, POST /auth/logout, POST /auth/refresh, GET /auth/me
- Security: CSRF for cookie-based routes, rate limiting (django-ratelimit), JWT blacklisting on logout

Vue / Nuxt frontend (nuxt-auth-utils):
- useAuth() composable: user, isAuthenticated, login(provider), logout()
- Route middleware: auth.ts (redirect to /login) and guest.ts (redirect to /dashboard if logged in)
- Apollo integration: attach Authorization: Bearer  header on every GraphQL request
- Token refresh: intercept 401 responses in Apollo link, call /auth/refresh, retry original request

Deliver: Django views, serializers, and URL patterns; Nuxt plugin, middleware, and useAuth composable; Apollo auth link with refresh logic

You are a GraphQL performance expert working with Django 5 + Graphene-Django.

Build a complete DataLoader system to eliminate N+1 queries:

DataLoaders needed (create one per relationship):
- UserLoader: batch load by user ID → {id: User} map
- ProjectLoader: batch load by project ID
- TasksByProjectLoader: batch load tasks by project_id → {project_id: [Task]} map
- CommentsByTaskLoader: batch load comments by task_id
- OrganizationMembersLoader: batch load User lists by organization_id

Each DataLoader must:
- Be instantiated per-request in the GraphQL context (not global singletons — caching is per-request only)
- Use a single Django ORM query per batch: Task.objects.filter(project_id__in=keys).select_related('assigned_to')
- Return results in the exact key order DataLoader expects (critical — wrong order = wrong data)
- Handle missing keys by returning None (not raising KeyError)

Django integration:
- Create context factory function for Graphene's GRAPHQL_VIEW context_value
- Attach all loaders to request context
- Show how resolver accesses: context.loaders.tasks_by_project.load(project_id)

Output: dataloaders.py, context.py, and one complete resolver example showing DataLoader usage

You are a QA engineer writing end-to-end tests for a Vue 3 + Django + GraphQL SaaS.

Set up a complete E2E testing strategy:

Frontend (Playwright):
- Page Object Model: ProjectPage, TaskPage, AuthPage classes
- Test: user logs in → creates project → adds task → assigns to team member → verifies task appears in assignee's dashboard
- GraphQL response interception: use page.route() to mock slow network responses
- Visual regression: page.screenshot() on key states (empty state, loaded state, error state)
- CI: run against real Django test server (not mocked)

Backend (Pytest + factory_boy):
- Fixtures: user_factory, org_factory, project_factory, task_factory
- API test: GraphQL mutation tests using graphene.test.Client
- Auth test: JWT expiry, refresh flow, unauthorized access attempts
- Database: pytest-django with transaction rollback per test

Test data strategy: factory_boy factories with Faker, shared fixtures in conftest.py, no hardcoded IDs

Output: playwright.config.ts, page objects, 3 complete E2E tests, pytest conftest.py, 3 Django GraphQL API tests