vormiaqueryjs
Advanced tools
A powerful JavaScript library for building modern web applications with enhanced querying, caching, and state management capabilities.
A powerful, framework-agnostic query and mutation library with built-in error handling, notifications, and debug capabilities.
Before installing vormiaqueryjs, you must install the correct peer dependencies for your framework:
@tanstack/react-query@tanstack/vue-query@tanstack/svelte-query@tanstack/solid-query@builder.io/qwik@tanstack/react-query + react react-domaxios (required for all frameworks)zustand (required for advanced features)Install VormiaQueryJS using your favorite package manager:
npm install vormiaqueryjs
# or
bun add vormiaqueryjs
# or
pnpm add vormiaqueryjs
# or
yarn add vormiaqueryjs
🌐 Browser Compatibility: VormiaQueryJS is designed for browser environments and uses ESM modules for optimal compatibility with modern bundlers like Vite, Webpack, and Rollup. It does not support Node.js environments.
VormiaQueryJS uses framework-specific adapters to prevent dependency resolution conflicts. Choose the correct import path for your framework:
import { createVormiaClient, HttpMethod } from "vormiaqueryjs";
import { useVormiaQuery, VormiaProvider } from "vormiaqueryjs/react";
import { useVrmAuthEnhanced } from "vormiaqueryjs/react";
import { useVormia } from "vormiaqueryjs/vue";
import { useVrmAuthEnhancedVue } from "vormiaqueryjs/vue";
import { vormiaStore } from "vormiaqueryjs/svelte";
import { useVrmAuthEnhancedSvelte } from "vormiaqueryjs/svelte";
import { createVormiaResource } from "vormiaqueryjs/solid";
import { useVormia } from "vormiaqueryjs/qwik";
⚠️ Important: Always use the framework-specific import path to avoid dependency resolution errors. The main package only exports framework-agnostic utilities.
VormiaQueryJS includes complete TypeScript definitions for all functions, hooks, components, and types. No additional @types package is required!
TypeScript will automatically detect the types when you import from vormiaqueryjs:
// Core functionality - Framework-agnostic
import {
createVormiaClient,
HttpMethod,
} from "vormiaqueryjs";
// React-specific functionality
import {
useVormiaQuery,
VormiaConfig,
VormiaError,
VormiaProvider,
} from "vormiaqueryjs/react";
// Full type safety for configuration
const config: VormiaConfig = {
baseURL: "https://api.example.com",
headers: { Authorization: "Bearer token" },
withCredentials: true,
debug: true,
};
// Type-safe query options
const queryOptions = {
endpoint: "/api/users",
method: HttpMethod.GET,
params: { page: 1, limit: 10 },
showDebug: true,
};
// Generic types for response data
const { data, isLoading, error } = useVormiaQuery<User[]>(queryOptions);
VormiaConfig, VormiaQueryOptions, VormiaResponse<T>, HttpMethodVormiaError class with utility methodsVormiaProviderProps and other component interfacesimport { VormiaError } from "vormiaqueryjs";
if (error instanceof VormiaError) {
// Type-safe error handling
if (error.isValidationError()) {
const validationErrors = error.getValidationErrors();
// validationErrors is properly typed
}
if (error.isNetworkError()) {
// Handle network errors
}
// Get user-friendly message
const userMessage = error.getUserMessage();
}
See the TypeScript example for more detailed usage patterns.
Configure your package using environment variables in your .env file:
# Required
VITE_VORMIA_API_URL=https://api.example.com
# Debug System (Single Control)
VITE_VORMIA_DEBUG=true # true = development mode, false = production mode
# Advanced Configuration (Optional)
VITE_VORMIA_AUTH_TOKEN_KEY=vormia_auth_token # Custom auth token storage key
VITE_VORMIA_TIMEOUT=30000 # Request timeout in milliseconds
VITE_VORMIA_WITH_CREDENTIALS=false # Include credentials in requests
⚠️ Important: All environment variables must start with VITE_ prefix to be accessible in the browser.
🎯 Environment Variable Simplification: We removed the redundant VITE_VORMIA_ENV variable. Now VITE_VORMIA_DEBUG serves as both the debug toggle and environment indicator:
VITE_VORMIA_DEBUG=true = Development mode (show debug info)VITE_VORMIA_DEBUG=false = Production mode (hide debug info)🔔 Notification System: Notifications are automatically shown for all queries and mutations. The showDebug option controls debug panel visibility and respects the VITE_VORMIA_DEBUG environment variable.
useVormiaAuth hook with permission and role checkinghasPermission(), hasAnyPermission(), and resource access controlisUser(), isAdmin(), isModerator() and more role helperscanCreate(), canRead(), canUpdate(), canDelete() helpersbg-*-500 colors for maximum visibilityerrorLabel optionVITE_VORMIA_DEBUGPersonalize your error logging with custom labels for better debugging:
const mutation = useVormiaQueryAuthMutation({
endpoint: "/register",
errorLabel: "Registration Error", // 🏷️ Custom error label!
showDebug: true,
// ... rest of config
});
Console Output: Shows " Registration Error" instead of generic " Mutation Error" for better identification.
The SimpleNotification component provides a clean, consistent way to display notifications without manual HTML styling:
// ✅ Recommended: Use SimpleNotification
{
generalError && (
<SimpleNotification
type="error"
title="Error"
message={generalError}
onClose={() => setGeneralError("")}
className="mb-4"
/>
);
}
Available Types: success, error, warning, info, announce
🎨 Notification Styling: All notification types use solid background colors with perfect contrast:
| Type | Background | Text | Border | Description |
|---|---|---|---|---|
| Success | bg-green-500 | text-white | border-green-200 | Professional green with white text |
| Error | bg-red-500 | text-white | border-red-200 | Clear red with white text |
| Warning | bg-yellow-500 | text-white | border-yellow-200 | Bright yellow with white text |
| Info | bg-blue-500 | text-white | border-blue-200 | Trusted blue with white text |
| Announce | bg-black | text-white | border-gray-200 | Pure black with white text for maximum contrast |
CSS Fallback: Guaranteed styling even when Tailwind JIT compilation fails.
🛡️ Reliability Features:
!important ensures notifications always workVormiaQueryJS includes a robust HTTP client that handles all response types gracefully:
The client automatically handles 204 No Content responses, which are common in:
import { createVormiaClient } from "vormiaqueryjs";
const client = createVormiaClient({
baseURL: "https://api.example.com",
});
// 204 responses are handled automatically
const logoutResponse = await client.post("/api/auth/logout");
console.log(logoutResponse.status); // 204
console.log(logoutResponse.data); // { message: "Success - No content returned" }
// Delete operations with 204
const deleteResponse = await client.delete("/api/users/123");
if (deleteResponse.status === 204) {
console.log("User deleted successfully");
}
// PUT/PATCH operations with 204
const updateResponse = await client.put("/api/resource/123", {
name: "Updated",
});
if (updateResponse.status === 204) {
console.log("Resource updated successfully");
}
| Status Code | Description | Handling |
|---|---|---|
| 200-299 | Success responses | JSON parsed automatically |
| 204 | No Content | Special handling with success message |
| 205 | Reset Content | Special handling with success message |
| 4xx/5xx | Error responses | Wrapped in VormiaError with details |
| Network Errors | Connection issues | Graceful error handling |
| JSON Parse Errors | Malformed responses | Fallback with descriptive messages |
VormiaQueryJS provides automatic form data transformation through the formdata configuration option in useVrmMutation. This feature allows you to:
import { useVrmMutation } from 'vormiaqueryjs/react';
const mutation = useVrmMutation({
endpoint: "/register",
method: "POST",
formdata: {
rename: {
confirmPassword: "password_confirmation" // Rename field
},
add: {
terms: true // Add new field
},
remove: ["confirmPassword"] // Remove field after transformation
}
});
Original form data:
{
name: "John Doe",
email: "john@example.com",
password: "secret123",
confirmPassword: "secret123"
}
After transformation:
{
name: "John Doe",
email: "john@example.com",
password: "secret123",
password_confirmation: "secret123", // Renamed
terms: true // Added
}
// confirmPassword removed
terms: true or locale: "en"confirmPassword after validationVormiaRouteGuard componentCore Components:
VormiaProvider - Essential configuration providerNotificationPanel - Advanced notification systemSimpleNotification - Easy drop-in notificationsErrorDebugPanel - Debug information displayQuery Hooks:
useVormiaQuery - Basic queries (no auth required)useVormiaQueryAuth - Authenticated queriesuseVormiaQueryAuthMutation - Authenticated mutations with form transformationuseVormiaQuerySimple - Flexible testing queriesUtility Hooks:
useVormiaConfig - Dynamic configuration managementuseVormiaAuth - Comprehensive authentication and authorization helpersuseVrmAuthEnhanced - Enhanced authentication with Zustand storesuseVrmQuery - Legacy query supportuseVrmMutation - Legacy mutation supportEnhanced Caching Hooks:
useVormiaCache - React enhanced caching with auto-refresh and smart fallbacksuseVormiaCacheVue - Vue.js enhanced caching with auto-refresh and smart fallbacksuseVormiaCacheSvelte - Svelte enhanced caching with auto-refresh and smart fallbacksZustand Stores:
useAuthStore - Centralized authentication state managementuseCacheStore - Offline data caching and persistenceuseStorageStore - Local data storage and user preferencesuseSettingsStore - Application-wide configuration and settingsWhy VormiaProvider is Critical:
The VormiaProvider sets up the foundation for your entire application. It's essential to configure the correct baseURL because:
import { VormiaProvider } from "vormiaqueryjs/react";
function App() {
return (
<VormiaProvider
config={{
baseURL: import.meta.env.VITE_VORMIA_API_URL,
// New Zustand-powered configuration options
enableZustand: true, // Enable Zustand stores
persistAuth: true, // Persist authentication state
persistCache: true, // Persist cache data
persistStorage: true, // Persist user preferences
persistSettings: true, // Persist app settings
// Cache configuration
cacheConfig: {
maxSize: 100, // Maximum cache items
maxAge: 3600000, // 1 hour cache expiry
enableOfflineQueue: true, // Queue requests when offline
},
// Storage configuration
storageConfig: {
encryption: false, // Enable encryption for sensitive data
compression: true, // Enable data compression
maxSize: 50 * 1024 * 1024, // 50MB storage limit
},
}}
>
<YourApp />
</VormiaProvider>
);
}
import { NotificationPanel } from "vormiaqueryjs/react";
function MyComponent() {
const [notification, setNotification] = useState(null);
return (
<div>
{notification && (
<NotificationPanel
notification={notification}
onClose={() => setNotification(null)}
/>
)}
</div>
);
}
import { SimpleNotification } from "vormiaqueryjs/react";
function MyComponent() {
const [error, setError] = useState(null);
const [success, setSuccess] = useState(null);
const [info, setInfo] = useState(null);
return (
<div>
{/* Easy error display - matches your exact styling */}
<SimpleNotification
type="error"
message={error}
onClose={() => setError(null)}
/>
{/* Easy success display */}
<SimpleNotification
type="success"
message={success}
onClose={() => setSuccess(null)}
/>
{/* Info notification */}
<SimpleNotification
type="info"
message={info}
onClose={() => setInfo(null)}
/>
</div>
);
}
### **ErrorDebugPanel** - Debug Information
```jsx
import { ErrorDebugPanel } from "vormiaqueryjs/react";
function MyComponent() {
const [debugInfo, setDebugInfo] = useState(null);
return (
<div>
<ErrorDebugPanel
debugInfo={debugInfo}
showDebug={true}
onClose={() => setDebugInfo(null)}
/>
</div>
);
}
import { useVormiaQuery } from "vormiaqueryjs/react";
const query = useVormiaQuery({
endpoint: "/public/data",
method: "GET",
showDebug: true, // Override debug panel visibility
});
import { useVormiaQueryAuth } from "vormiaqueryjs/react";
const query = useVormiaQueryAuth({
endpoint: "/user/profile",
method: "GET",
showDebug: true, // Override debug panel visibility
});
import { useVormiaQueryAuthMutation } from "vormiaqueryjs/react";
const mutation = useVormiaQueryAuthMutation({
endpoint: "/register",
method: "POST",
showDebug: true, // Override debug panel visibility
formdata: {
rename: {
confirmPassword: "password_confirmation",
user_name: "name",
},
add: {
terms: true,
source: "web",
},
remove: ["confirmPassword", "tempField"],
},
});
import { useVormiaQuerySimple } from "vormiaqueryjs/react";
const query = useVormiaQuerySimple({
endpoint: "/test-endpoint",
method: "POST",
data: { test: "data" },
showDebug: true, // Override debug panel visibility
});
import { useVrmQuery, useVrmMutation } from "vormiaqueryjs/react";
// Legacy query hook
const query = useVrmQuery({
endpoint: "/legacy/endpoint",
method: "GET",
});
// Legacy mutation hook with form data transformation
const mutation = useVrmMutation({
endpoint: "/legacy/endpoint",
method: "POST",
formdata: {
rename: {
confirmPassword: "password_confirmation" // Rename field
},
add: {
terms: true // Add new field
},
remove: ["confirmPassword"] // Remove field after transformation
},
data: { legacy: "data" },
});
VormiaQueryJS provides a comprehensive authentication and authorization system with easy-to-use helpers for permission checking and role management.
import { useVormiaAuth } from "vormiaqueryjs/react";
const auth = useVormiaAuth();
// Basic authentication
const isLoggedIn = auth.isAuthenticated();
const user = auth.getUser();
// Store user data after login
auth.setUser({
id: 1,
name: "John Doe",
email: "john@example.com",
permissions: ["view_reports", "add_users"],
roles: ["user", "moderator"],
});
// Clear user data on logout
auth.clearUser();
// Check single permission
const canViewReports = auth.hasPermission("view_reports");
// Check multiple permissions (ALL must be present)
const canManageUsers = auth.hasPermission(["manage_users", "user_management"]);
// Check if user has ANY of the specified permissions
const hasAnyPermission = auth.hasAnyPermission(["view_reports", "add_users"]);
// Get all user permissions
const permissions = auth.getPermissions();
// Check single role
const isAdmin = auth.isUser("Admin");
// Check multiple roles (ANY can be present)
const isModerator = auth.isUser(["moderator", "Mod"]);
// Check if user has ALL specified roles
const hasAllRoles = auth.hasAllRoles(["user", "verified"]);
// Common role checks
const isAdmin = auth.isAdmin();
const isModerator = auth.isModerator();
const isSuperUser = auth.isSuperUser();
// Get all user roles
const roles = auth.getRoles();
// CRUD operations
const canCreateUsers = auth.canCreate("users");
const canReadReports = auth.canRead("reports");
const canUpdateProfile = auth.canUpdate("profile");
const canDeletePosts = auth.canDelete("posts");
// Custom resource access
const canAccess = auth.canAccess("reports", "export");
// Common permission checks
const canManageUsers = auth.canManageUsers();
const canViewReports = auth.canViewReports();
const canAddUsers = auth.canAddUsers();
function AdminPanel() {
const auth = useVormiaAuth();
return (
<div>
{auth.isAuthenticated() && (
<>
{auth.canViewReports() && <button>View Reports</button>}
{auth.canAddUsers() && <button>Add New User</button>}
{auth.isAdmin() && <button>Admin Panel</button>}
</>
)}
</div>
);
}
function ProfileUpdate() {
const auth = useVormiaAuth();
const mutation = useVormiaQueryAuthMutation({
endpoint: "/api/update-profile",
method: "PUT",
onSuccess: (data) => {
// Update local user data after successful update
auth.setUser(data.data.user);
},
});
const handleUpdate = (profileData) => {
// Check permissions before allowing update
if (!auth.canUpdate("profile")) {
alert("You do not have permission to update profiles");
return;
}
mutation.mutate(profileData);
};
return (
<button
onClick={() => handleUpdate({ name: "New Name" })}
disabled={!auth.canUpdate("profile")}
>
Update Profile
</button>
);
}
The new useVrmAuthEnhanced hook provides advanced authentication features powered by Zustand stores. It's available for React, Vue.js, and Svelte:
import { useVrmAuthEnhanced } from "vormiaqueryjs/react";
function EnhancedAuthExample() {
const auth = useVrmAuthEnhanced();
// ... rest of implementation
}
import { useVrmAuthEnhancedVue } from "vormiaqueryjs/vue";
export default {
setup() {
const auth = useVrmAuthEnhancedVue();
// ... rest of implementation
},
};
import { useVrmAuthEnhancedSvelte } from "vormiaqueryjs/svelte";
const auth = useVrmAuthEnhancedSvelte();
// ... rest of implementation
import { useVrmAuthEnhanced } from "vormiaqueryjs/react";
function EnhancedAuthExample() {
const auth = useVrmAuthEnhanced();
// Enhanced authentication with automatic token management
const handleLogin = async (credentials) => {
const result = await auth.login(credentials);
// Handle different response types including 204 No Content
if (result.status === 204) {
console.log("Operation completed successfully (204 No Content)");
return;
}
if (result.success) {
// Token automatically stored and managed
// User data automatically cached
// Offline queue automatically processed
}
};
// Automatic token refresh
const ensureValidToken = async () => {
const isValid = await auth.ensureValidToken();
if (!isValid) {
// Redirect to login or refresh token
}
};
// User preferences with persistence
const setTheme = (theme) => {
auth.setUserPreference("theme", theme);
// Automatically saved and synced across tabs
};
// Form data persistence
const saveForm = (formData) => {
auth.saveFormData("profile-form", formData);
// Automatically restored on page reload
};
return (
<div>
<button
onClick={async () => {
await auth.logout();
// Logout automatically handles 204 responses from logout endpoints
}}
>
Logout
</button>
<button onClick={() => setTheme("dark")}>Dark Theme</button>
</div>
);
}
import { useCacheStore, useStorageStore } from "vormiaqueryjs/react";
function OfflineExample() {
const cache = useCacheStore();
const storage = useStorageStore();
// Cache data with tags for smart invalidation
const cacheUserData = (userData) => {
cache.setCache("user-profile", userData, {
tags: ["user", "profile"],
maxAge: 3600000, // 1 hour
});
};
// Add to offline queue when network is down
const queueRequest = (request) => {
cache.addToOfflineQueue({
type: "POST",
endpoint: "/api/update",
data: request,
retryCount: 3,
});
};
// Persistent user preferences
const savePreferences = (prefs) => {
storage.setUserPreference("notifications", prefs);
// Automatically synced across tabs
};
return (
<div>
<button onClick={() => cache.clearCache()}>Clear Cache</button>
<button onClick={() => storage.exportData()}>Export Data</button>
</div>
);
}
VormiaQueryJS now includes powerful enhanced caching hooks that provide a vormiaqueryjs-style API for advanced caching operations. These hooks wrap the underlying Zustand stores and offer features like auto-refresh, retry logic, data validation, and smart fallbacks.
Available for all frameworks:
useVormiaCacheuseVormiaCacheVueuseVormiaCacheSvelteimport { useVormiaCache } from "vormiaqueryjs/react";
function UserProfile() {
const cache = useVormiaCache({
defaultTTL: 1800000, // 30 minutes default
defaultPriority: "high", // High priority by default
autoRefresh: true, // Enable auto-refresh
refreshInterval: 300000, // 5 minutes refresh interval
maxRetries: 3, // Retry failed refreshes
retryDelay: 1000, // 1 second base delay
});
// Store user data with auto-refresh
const storeUserData = async () => {
const userData = await fetchUserData();
cache.store("user:profile", userData, {
ttl: 3600000, // 1 hour TTL
priority: "high", // High priority
tags: ["user", "profile"], // Tag for invalidation
autoRefresh: true, // Enable auto-refresh
refreshInterval: 300000, // 5 minutes
refreshFunction: fetchUserData, // Function to refresh data
maxRetries: 2, // Custom retry count
retryDelay: 1500, // Custom retry delay
});
};
// Get data with fallback and validation
const getUserData = () => {
return cache.get("user:profile", {
fallback: defaultUserData, // Fallback if cache miss
validate: (data) => data && data.id, // Validate data integrity
refresh: true, // Trigger refresh if data exists
refreshFunction: fetchUserData, // Function to refresh
});
};
// Manual refresh with retry logic
const refreshUserData = async () => {
const result = await cache.refresh("user:profile", fetchUserData, {
fallback: getUserData(), // Use current data as fallback
validate: (data) => data && data.id, // Validate new data
maxRetries: 3, // Retry up to 3 times
retryDelay: 2000, // 2 second base delay
});
if (result.success) {
console.log("Data refreshed successfully");
} else if (result.retryCount > 0) {
console.log(`Retrying... (${result.retryCount} attempts left)`);
}
};
// Invalidate cache by pattern or tags
const clearUserCache = () => {
// Remove all user-related cache entries
cache.invalidate("user:", { clearTimers: true });
// Remove all profile-tagged entries
cache.invalidateByTags(["profile"], { clearTimers: true });
};
// Get cache statistics
const showCacheStats = () => {
const stats = cache.stats();
console.log("Cache Statistics:", {
totalItems: stats.totalItems,
totalSize: `${(stats.totalSize / 1024 / 1024).toFixed(2)} MB`,
cacheEfficiency: `${(stats.cacheEfficiency * 100).toFixed(1)}%`,
expiredItems: stats.expiredItems,
});
};
// Configure cache settings
const configureCache = () => {
cache.configure({
maxSize: 100 * 1024 * 1024, // 100MB
maxAge: 7200000, // 2 hours
maxItems: 1000, // Maximum 1000 items
});
};
return (
<div>
<button onClick={storeUserData}>Store User Data</button>
<button onClick={refreshUserData}>Refresh Data</button>
<button onClick={clearUserCache}>Clear Cache</button>
<button onClick={showCacheStats}>Show Stats</button>
<button onClick={configureCache}>Configure Cache</button>
<div>
<h3>User Data:</h3>
<pre>{JSON.stringify(getUserData(), null, 2)}</pre>
</div>
</div>
);
}
import { useVormiaCacheVue } from "vormiaqueryjs/vue";
export default {
setup() {
const cache = useVormiaCacheVue({
defaultTTL: 1800000,
autoRefresh: true,
refreshInterval: 300000,
});
const storeData = async () => {
const data = await fetchData();
cache.store("key", data, {
ttl: 3600000,
tags: ["important"],
autoRefresh: true,
refreshFunction: fetchData,
});
};
const getData = () => {
return cache.get("key", {
fallback: defaultData,
validate: (data) => data && data.id,
});
};
return {
storeData,
getData,
cache,
};
},
};
import { useVormiaCacheSvelte } from "vormiaqueryjs/svelte";
export default {
setup() {
const cache = useVormiaCacheSvelte({
defaultTTL: 1800000,
defaultPriority: "high",
});
const storeData = async () => {
const data = await fetchData();
cache.store("key", data, {
priority: "high",
tags: ["critical"],
});
};
const getData = () => {
return cache.get("key", {
fallback: defaultData,
});
};
return {
storeData,
getData,
cache,
};
},
};
const cache = useVormiaCache({
// Time settings
defaultTTL: 1800000, // 30 minutes default TTL
refreshInterval: 300000, // 5 minutes refresh interval
// Priority settings
defaultPriority: "high", // 'high', 'normal', 'low'
// Auto-refresh settings
autoRefresh: true, // Enable auto-refresh globally
maxRetries: 3, // Maximum retry attempts
retryDelay: 1000, // Base retry delay (exponential backoff)
});
cache.store("key", data, {
// Time settings
ttl: 3600000, // Custom TTL for this entry
// Priority and organization
priority: "high", // 'high', 'normal', 'low'
tags: ["user", "profile"], // Tags for invalidation
size: 1024, // Size in bytes for cleanup calculations
// Auto-refresh settings
autoRefresh: true, // Enable auto-refresh for this entry
refreshInterval: 300000, // Custom refresh interval
refreshFunction: fetchData, // Function to refresh data
maxRetries: 2, // Custom retry count
retryDelay: 1500, // Custom retry delay
});
const data = cache.get("key", {
// Fallback data
fallback: defaultData,
// Data validation
validate: (data) => {
return data && typeof data === "object" && data.id && data.name;
},
// Auto-refresh options
refresh: true, // Trigger refresh if data exists
refreshFunction: fetchData, // Function to refresh data
});
// Remove specific entry
cache.remove("user:profile");
// Invalidate by pattern
cache.invalidate("user:", { clearTimers: true });
// Invalidate by tags
cache.invalidateByTags(["profile"], { clearTimers: true });
// Clear all cache
cache.clear();
// Get cache statistics
const stats = cache.stats();
// Configure cache settings
cache.configure({
maxSize: 100 * 1024 * 1024, // 100MB
maxAge: 7200000, // 2 hours
maxItems: 1000, // Maximum items
});
The new VormiaRouteGuard component provides declarative route protection using your existing authentication system. It's available for React, Vue.js, and Svelte:
import { VormiaRouteGuard } from "vormiaqueryjs/react";
<VormiaRouteGuard roles={["admin"]} redirectTo="/login">
<AdminDashboard />
</VormiaRouteGuard>;
import { createVormiaRouteGuardVue } from 'vormiaqueryjs/vue';
// In your Vue component
const VormiaRouteGuard = createVormiaRouteGuardVue();
// Use in template
<VormiaRouteGuard :roles="['admin']" redirect-to="/login">
<AdminDashboard />
</VormiaRouteGuard>
import { createVormiaRouteGuardSvelte } from "vormiaqueryjs/svelte";
// In your Svelte component
const VormiaRouteGuard = createVormiaRouteGuardSvelte();
// Use in template
<VormiaRouteGuard roles={["admin"]} redirectTo="/login">
<AdminDashboard />
</VormiaRouteGuard>;
import { VormiaRouteGuard } from 'vormiaqueryjs/react';
// Role-based protection
<VormiaRouteGuard roles={["admin"]} redirectTo="/login">
<AdminDashboard />
</VormiaRouteGuard>
// Permission-based protection
<VormiaRouteGuard permissions={["manage_users", "delete_posts"]} fallback={<AccessDenied />}>
<UserManagement />
</VormiaRouteGuard>
// Multiple roles (ANY role)
<VormiaRouteGuard roles={["admin", "moderator"]} requireAll={false}>
<ModeratorPanel />
</VormiaRouteGuard>
// Custom validation
<VormiaRouteGuard
validate={(user) => user?.isVerified && user?.subscription === 'premium'}
fallback={<UpgradeRequired />}
>
<PremiumFeatures />
</VormiaRouteGuard>
withVormiaGuard HOC for class componentsuseVormiaGuard hook for custom logicAutomatically transform form data before sending to API:
const mutation = useVormiaQueryAuthMutation({
endpoint: "/register",
formdata: {
// Rename fields
rename: {
confirmPassword: "password_confirmation",
user_name: "name",
},
// Add fields
add: {
terms: true,
source: "web",
},
// Remove fields
remove: ["confirmPassword", "tempField"],
},
});
// Just pass formData - transformation happens automatically!
mutation.mutate(formData);
VormiaQueryJS provides a comprehensive notification system with multiple display variants:
// Create notifications
const successNotification = {
type: "success",
title: "Success",
message: "Operation completed successfully!",
variant: "banner", // or 'inapp', 'modal', 'toast'
};
// Display with NotificationPanel
<NotificationPanel
notification={successNotification}
onClose={() => setNotification(null)}
/>;
The debug panel automatically:
VITE_VORMIA_DEBUG=trueVITE_VORMIA_DEBUG=false (production mode)💡 Simple Rule: One variable controls everything - true = development, false = production
import { ErrorDebugPanel, createDebugInfo } from "vormiaqueryjs/react";
// Create debug info from API response
const debugInfo = createDebugInfo(response);
// Display debug panel
<ErrorDebugPanel
debugInfo={debugInfo}
showDebug={true}
onClose={() => setDebugInfo(null)}
/>;
VormiaProviderNotificationPanelErrorDebugPanelVormiaRouteGuard - Route protection componentcreateVormiaRouteGuardVue() - Factory function for Vue 3 route guarduseVrmAuthEnhancedVue() - Enhanced authentication hook for Vue 3 Composition APIcreateVormiaRouteGuardSvelte() - Factory function for Svelte route guarduseVrmAuthEnhancedSvelte() - Enhanced authentication hook for Svelte// Get HTML strings for other frameworks
const notificationHtml = query.getNotificationHtml(
"success",
"Success",
"Data loaded!"
);
const debugHtml = query.getDebugHtml(response, true);
// Use in any framework
// Vue: <div v-html="notificationHtml"></div>
// Svelte: {@html notificationHtml}
// Vanilla JS: document.getElementById('notifications').innerHTML = notificationHtml;
VITE_VORMIA_DEBUG=true🔍 VormiaQuery Debug: VITE_VORMIA_DEBUG = trueVITE_ prefix on all variables.env fileSee the examples/ directory for comprehensive usage examples:
zustand-integration-example.jsx: Complete demonstration of all new Zustand-powered featuresvue-zustand-integration-example.vue: Vue.js implementation with Composition APIsvelte-zustand-integration-example.svelte: Svelte implementation with reactive storesVormiaRouteGuard usage across all frameworksVormiaQueryJS now includes powerful Zustand stores for comprehensive state management:
useAuthStore)hasPermission() and hasAnyPermission()hasRole() and hasAllRoles()useCacheStore)useStorageStore)useSettingsStore)VormiaQueryJS includes comprehensive testing with modern tools:
# Run all tests
npm test
# Run specific test files
npm test test/zustand-integration.test.js
npm test test/VormiaRouteGuard.test.jsx
# Run tests in watch mode
npm run test:watch
We welcome contributions! Please see our Contributing Guide for details.
This project is licensed under the MIT License - see the LICENSE file for details.
[2.1.5] - 2024-01-01
response.data.id instead of response.data.data.id{ success, message, data, debug } API responsesresponse.data contained the entire API response wrapperresponse.data contains just the actual data, with response.message and response.debug available separately{ success: true, data: { id: 123 } } now returns response.data = { id: 123 }FAQs
A powerful JavaScript library for building modern web applications with enhanced querying, caching, and state management capabilities.
The npm package vormiaqueryjs receives a total of 549 weekly downloads. As such, vormiaqueryjs popularity was classified as not popular.
We found that vormiaqueryjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.