React Embedded AnalyticsSharing & Caching Data

A Data Engine loads, processes, and caches data for Studio widgets. Studio creates one automatically when you pass data sources via the data property, but you can create the engine yourself to share it across instances, or replace it entirely with a custom backend.

Built-in Engine Copy Link

When you pass data sources directly to Studio, it creates a built-in Data Engine behind the scenes. Creating the engine externally with createDataEngine(data) gives you two benefits:

• Sharing - multiple Studio instances can point at the same engine, so they share a single copy of the data.
• Caching across lifecycles - the engine survives when Studio is destroyed and recreated, so data doesn't need to be re-fetched or reprocessed on remount.

const dataEngine = createDataEngine({
    sources: [{
        id: 'medals',
        data: [
            {
                year: 2000,
                sport: 'Swimming',
                country: 'United States',
                // ... other fields
            },
            // ... other rows
        ],
    }],
});

const data = useMemo(() => { 
	return dataEngine;
}, []);

<AgStudio data={data} />

See Sync Data and Async Data for the full range of data loading patterns.

createDataEngine(data) accepts a data object of type AgDataSourcesDefinition.

Custom Engines Copy Link

For larger datasets or when you want to delegate query execution to a backend you already own, see the Server-Side Data guide.