@vendure/dashboard 3.5.0-minor-202510012036 → 3.5.0-minor-202510031341

package/src/lib/hooks/use-saved-views.ts

@@ -3,6 +3,7 @@ import {
     getSettingsStoreValueDocument,
     setSettingsStoreValueDocument,
 } from '@/vdb/graphql/settings-store-operations.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { SavedView, SavedViewsStore, SaveViewInput, UpdateViewInput } from '@/vdb/types/saved-views.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ColumnFiltersState } from '@tanstack/react-table';
@@ -19,6 +20,7 @@ const generateId = () => {
 
 export function useSavedViews() {
     const queryClient = useQueryClient();
+    const { settingsStoreIsAvailable } = useUserSettings();
     const { pageId } = usePage();
     const pageBlock = usePageBlock({ optional: true });
     const blockId = pageBlock?.blockId || 'default';
@@ -38,6 +40,8 @@ export function useSavedViews() {
             const allUserViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
             return allUserViews[pageId]?.[blockId] || [];
         },
+        retry: false,
+        enabled: settingsStoreIsAvailable,
     });
 
     // Query for global views
@@ -48,6 +52,8 @@ export function useSavedViews() {
             const allGlobalViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
             return allGlobalViews[pageId]?.[blockId] || [];
         },
+        retry: false,
+        enabled: settingsStoreIsAvailable,
     });
 
     // Save user view mutation
@@ -217,6 +223,7 @@ export function useSavedViews() {
     const canManageGlobalViews = hasPermissions(['WriteDashboardGlobalViews']);
 
     return {
+        savedViewsAreAvailable: settingsStoreIsAvailable,
         userViews: userViewsData || [],
         globalViews: globalViewsData || [],
         isLoading: userViewsLoading || globalViewsLoading,

package/src/lib/providers/auth.tsx

@@ -1,3 +1,4 @@
+import { LS_KEY_SELECTED_CHANNEL_TOKEN } from '@/vdb/constants.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
@@ -170,8 +171,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                     // Clear all cached queries to prevent stale data
                     queryClient.clear();
                     // Clear selected channel from localStorage
-                    localStorage.removeItem('vendure-selected-channel');
-                    localStorage.removeItem('vendure-selected-channel-token');
+                    localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
                     setStatus('unauthenticated');
                     setIsLoginLogoutInProgress(false);
                     onLogoutSuccess?.();

package/src/lib/providers/channel-provider.tsx

@@ -1,4 +1,5 @@
-import { api, SELECTED_CHANNEL_TOKEN_KEY } from '@/vdb/graphql/api.js';
+import { LS_KEY_SELECTED_CHANNEL_TOKEN } from '@/vdb/constants.js';
+import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
@@ -94,7 +95,7 @@ export interface ChannelContext {
  */
 function setChannelTokenInLocalStorage(channelToken: string) {
     try {
-        localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, channelToken);
+        localStorage.setItem(LS_KEY_SELECTED_CHANNEL_TOKEN, channelToken);
     } catch (e) {
         console.error('Failed to store selected channel in localStorage', e);
     }

package/src/lib/providers/user-settings.tsx

@@ -1,3 +1,4 @@
+import { LS_KEY_USER_SETTINGS } from '@/vdb/constants.js';
 import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnFiltersState } from '@tanstack/react-table';
 import React, { createContext, useEffect, useRef, useState } from 'react';
@@ -43,6 +44,12 @@ const defaultSettings: UserSettings = {
 };
 
 export interface UserSettingsContextType {
+    /**
+     * @description
+     * Whether the server-side SettingsStore is available to use
+     * (i.e. the Vendure instance has the DashboardPlugin configured)
+     */
+    settingsStoreIsAvailable: boolean;
     settings: UserSettings;
     setDisplayLanguage: (language: string) => void;
     setDisplayLocale: (locale: string | undefined) => void;
@@ -63,7 +70,6 @@ export interface UserSettingsContextType {
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
 
-const STORAGE_KEY = 'vendure-user-settings';
 const SETTINGS_STORE_KEY = 'vendure.dashboard.userSettings';
 
 interface UserSettingsProviderProps {
@@ -75,7 +81,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     // Load settings from localStorage or use defaults
     const loadSettings = (): UserSettings => {
         try {
-            const storedSettings = localStorage.getItem(STORAGE_KEY);
+            const storedSettings = localStorage.getItem(LS_KEY_USER_SETTINGS);
             if (storedSettings) {
                 return { ...defaultSettings, ...JSON.parse(storedSettings) };
             }
@@ -86,19 +92,35 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     };
 
     const [settings, setSettings] = useState<UserSettings>(loadSettings);
+    const [settingsStoreIsAvailable, setSettingsStoreIsAvailable] = useState<boolean>(true);
     const [serverSettings, setServerSettings] = useState<UserSettings | null>(null);
     const [isReady, setIsReady] = useState(false);
     const previousContentLanguage = useRef(settings.contentLanguage);
     const saveInProgressRef = useRef(false);
 
     // Load settings from server on mount
-    const { data: serverSettingsResponse, isSuccess: serverSettingsLoaded } = useQuery({
+    const {
+        data: serverSettingsResponse,
+        isSuccess: serverSettingsLoaded,
+        error,
+    } = useQuery({
         queryKey: ['user-settings', SETTINGS_STORE_KEY],
         queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY }),
         retry: false,
         staleTime: 0,
+        enabled: settingsStoreIsAvailable,
     });
 
+    useEffect(() => {
+        if (
+            settingsStoreIsAvailable &&
+            error?.message.includes('Settings store field not registered: vendure.dashboard.userSettings')
+        ) {
+            logSettingsStoreWarning();
+            setSettingsStoreIsAvailable(false);
+        }
+    }, [settingsStoreIsAvailable, error]);
+
     // Mutation to save settings to server
     const saveToServerMutation = useMutation({
         mutationFn: (settingsToSave: UserSettings) =>
@@ -144,7 +166,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     // Save settings to localStorage whenever they change
     useEffect(() => {
         try {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+            localStorage.setItem(LS_KEY_USER_SETTINGS, JSON.stringify(settings));
         } catch (e) {
             console.error('Failed to save user settings to localStorage', e);
         }
@@ -152,7 +174,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
 
     // Save to server when settings differ from server state
     useEffect(() => {
-        if (isReady && serverSettings && !saveInProgressRef.current) {
+        if (settingsStoreIsAvailable && isReady && serverSettings && !saveInProgressRef.current) {
             const serverDiffers = JSON.stringify(serverSettings) !== JSON.stringify(settings);
 
             if (serverDiffers) {
@@ -177,6 +199,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     };
 
     const contextValue: UserSettingsContextType = {
+        settingsStoreIsAvailable,
         settings,
         setDisplayLanguage: language => updateSetting('displayLanguage', language),
         setDisplayLocale: locale => updateSetting('displayLocale', locale),
@@ -201,3 +224,21 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
 
     return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;
 };
+
+function logSettingsStoreWarning() {
+    // eslint-disable-next-line no-console
+    console.warn(
+        [
+            `User settings could not be fetched from the Vendure server.`,
+            `This suggests that the DashboardPlugin is not configured.`,
+            `Check your VendureConfig and ensure the DashboardPlugin is in your plugins array.`,
+            ``,
+            `By setting up the DashboardPlugin, you can take advantage of:`,
+            ` - Persisted settings across browsers and devices`,
+            ` - Saved views on list pages`,
+            ` - Metrics on the Insights page`,
+            ``,
+            `https://docs.vendure.io/reference/core-plugins/dashboard-plugin/`,
+        ].join('\n'),
+    );
+}