Plotly Dash Refreshing Global Data On Reload

Imagine I have a dash application where I want the global data to refresh on page reload. I'm using a function to serve the layout as described here. However, I'm note sure how/whe

Solution 1:

The most common approach for sharing data between callbacks is to save the data in a dash_core_components.Store object,

def serve_layout():
    df = # Fetch data from DB
    store = Store(id="mystore", data=df.to_json())  # The store must be added to the layoutreturn# Layout 

You can then add the store as a State argument for the callbacks that need access to the data,

@app.callback(..., [State("mystore", "data")])defmy_func(..., data):
    df = pd.read_json(data)

The main drawback of this approach is that the data is exchanged between the client and the server each time a callback is invoked. If the data frame is small, it doesn't really matter, but if it is large, the data exchange (and the serialization to/from JSON) might cause severe performance issues. It can be avoided by caching the data frame server side, either manually as demonstrated in the documentation or using the enriched components from dash-extensions. Here is a small example of the latter,

import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd

from dash_extensions.enrich import Dash, ServersideOutput, Output, Input, Trigger

app = Dash()
app.layout = html.Div([dcc.Store(id="store"),  # this is the store that holds the data
                       html.Div(id="onload"),  # this div is used to trigger the query_df function on page load
                       html.Div(id="log")])


@app.callback(ServersideOutput("store", "data"), Trigger("onload", "children"))defquery_df():
    return pd.DataFrame(data=np.random.rand(int(10)), columns=["rnd"])  # some random example data@app.callback(Output("log", "children"), Input("store", "data"))defprint_df(df):
    return df.to_json()  # do something with the dataif __name__ == '__main__':
    app.run_server()

tested with dash-extensions==0.0.27rc1. Disclaimer: I am the author of dash-extensions.