Plotly dash refreshing global data on reload

Question

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/where I should define df such that I can use it in callbacks (like in a case where I'd like to subset the df based on some input and pass it to a layout table). My code below reloads the data on page refresh, but the callback cannot access the df.

I'm very new to dash so apologies in advance for potentially dumb question.

def serve_layout():
    df = # Fetch data from DB
    
    return # Layout

app.layout = serve_layout

@app.callback()
def my_func:
    # Here I want to reference df

Answer 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 layout
    return # 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")])
def my_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"))
def query_df():
    return pd.DataFrame(data=np.random.rand(int(10)), columns=["rnd"])  # some random example data


@app.callback(Output("log", "children"), Input("store", "data"))
def print_df(df):
    return df.to_json()  # do something with the data


if __name__ == '__main__':
    app.run_server()

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