ServerSideOutput with multiple pages

Dash Python
1

I’m using ServerSideOutput to cache intermediate data. In order to do this my app.py looks like

app.py

app = DashProxy(transforms=[ServersideOutputTransform()])

@app.callback(ServersideOutput(component_id='data-store', component_property='data'),
              Input(component_id='dropdown', component_property='value'))
def load_data(id):
    pass

I’m trying to refactor into pages based on https://dash.plotly.com/urls - this means the declaration of app and the callbacks are in different files, i.e.

app.py

app = DashProxy(transforms=[ServersideOutputTransform()])

pages/analytics.py

@app.callback(ServersideOutput(component_id='data-store', component_property='data'),
              Input(component_id='dropdown', component_property='value'))
def load_data(id):
    pass

But now I cannot access the app object to declare the callback decorator. This doesn’t work, it’s mentioned in the docs under Circular Imports (https://dash.plotly.com/urls) - it says to use dash.callback but this doesn’t work with ServersideOutput and app=DashProxy (you get the error reported in Dash-extensions, ServerSideOutput error)

I tried to use

pages/analytics.py

app = dash.get_app()

@app.callback(ServersideOutput(component_id='data-store', component_property='data'),
              Input(component_id='dropdown', component_property='value'))
def load_data(id):
    pass

But this throws AttributeError: ‘DashProxy’ object has no attribute ‘blueprint’

Can you use ServersideOutput in multi-page apps and if so how?

 File "/home/david/dev/dash-test/app.py", line 7, in <module>
    app = DashProxy(
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash_extensions/enrich.py", line 352, in __init__
    super().__init__(*args, **kwargs)
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash/dash.py", line 504, in __init__
    self.init_app()
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash/dash.py", line 588, in init_app
    self.enable_pages()
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash/dash.py", line 2041, in enable_pages
    self._import_layouts_from_pages()
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash/dash.py", line 2012, in _import_layouts_from_pages
    spec.loader.exec_module(page_module)
  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
  File "/home/david/dev/dash-test/pages/test.py", line 36, in <module>
    @app.callback(ServersideOutput(component_id='data-store', component_property='data'),
  File "/home/david/dev/dash-test/.venv/lib/python3.10/site-packages/dash_extensions/enrich.py", line 358, in callback
    return self.blueprint.callback(*args, **kwargs)
AttributeError: 'DashProxy' object has no attribute 'blueprint'
2

As noted in the docs, you must replace imports from dash with their counter parts from dash-extensions. For you use case specifically, you need to replace the import

from dash import callback

with

from dash_extensions.enrich import callback

The reason these replacements are needed is to enable dash-extensions to make the appropriate transformations before the Dash application is launched.