Hey there, this is a super common pain point when building dashboards with Cube.js and React—let’s break down exactly how to fix it, depending on whether you’re losing chart configuration (like dimensions/filters you picked) or the actual query results when Cube.js goes down.

1. Persist Chart Configurations (The Most Likely Culprit) #

If you’re having to rebuild entire charts from scratch after a restart, the problem is almost certainly that your React app isn’t saving the chart’s setup (which Cube.js queries to run, chart type, filters, etc.). Here are two ways to fix this:

Option A: Quick Fix with Local Storage #

For small projects or personal dashboards, store each chart’s config directly in the user’s browser with localStorage:

• Every time a user adjusts a chart (e.g., adds a measure, sets a date filter), save the full Cube.js query object + chart settings to localStorage using a unique ID for each chart.
• When your React component mounts, check localStorage first—if a config exists, load it automatically instead of starting fresh.

Example code snippet:

// Save chart config to localStorage
const saveChartConfig = (chartId, config) => {
  localStorage.setItem(`dashboard_chart_${chartId}`, JSON.stringify(config));
};

// Load saved config on component mount
const loadChartConfig = (chartId) => {
  const saved = localStorage.getItem(`dashboard_chart_${chartId}`);
  return saved ? JSON.parse(saved) : null;
};

// Usage in your React chart component
useEffect(() => {
  const savedConfig = loadChartConfig('monthly_sales_chart');
  if (savedConfig) {
    setChartConfig(savedConfig); // Update state to load saved settings
  }
}, []);

Pros: Zero backend setup, fast to implement.
Cons: Configs are tied to a single browser/device, can’t share with other users.

Option B: Production-Grade Backend Storage #

For team dashboards or production apps, store chart configs in a database (e.g., PostgreSQL, MongoDB) via a simple backend API:

• Build a lightweight service (can even be integrated with your Cube.js backend) that exposes endpoints to create, read, update, and delete chart configs.
• When a user saves a chart, send the full config (Cube.js query, chart type, styling) to your API to persist.
• On app load, fetch all saved configs for the user/team and render the charts automatically.

Pair this with Cube.js Persistent Caching to avoid re-running expensive queries after a restart:
Add this to your cube.js config to store cached query results in Redis or a database:

module.exports = {
  // Use Redis for caching (recommended for performance)
  cache: {
    type: 'redis',
    host: 'your-redis-host',
    port: 6379,
    ttl: 3600 // Cache results for 1 hour (adjust as needed)
  },
  // Alternatively, use PostgreSQL for caching
  // cache: {
  //   type: 'postgres',
  //   host: 'your-db-host',
  //   database: 'cube_cache_db',
  //   user: 'db_user',
  //   password: 'db_password'
  // }
};

This way, even if Cube.js restarts, it can pull cached results instead of re-computing from scratch.

2. Precompute Data with Cube.js Pre-Aggregations #

If your dashboards use recurring, complex queries (e.g., weekly sales reports), define Pre-Aggregations in Cube.js. These are pre-computed datasets stored in your database that Cube.js can use instead of running raw SQL queries every time.

Example pre-aggregation in a Cube.js schema file:

cube(`Sales`, {
  sql: `SELECT * FROM sales`,
  
  preAggregations: {
    monthly_sales: {
      type: `rollup`,
      measures: [Sales.totalAmount],
      dimensions: [Sales.month],
      timeDimension: Sales.date,
      granularity: `month`
    }
  }
});

Pre-aggregations are stored permanently in your database, so they survive Cube.js restarts. Pair this with backend-config storage (Option B above) for a fully resilient dashboard.

Final Notes #

• Double-check what you’re losing: If it’s just query results taking too long to load after restart, focus on Cube.js caching/pre-aggregations. If you’re rebuilding charts entirely, prioritize persisting chart configs.
• If you’re using React chart libraries like Recharts or Chart.js, make sure to include styling/ layout settings (colors, titles, axes labels) in your saved configs too.

内容的提问来源于stack exchange，提问作者hiren shah