Skip to content

fix: Eliminate N+1 API calls for interactive templates in flow editor - #4002

Open
sentry[bot] wants to merge 1 commit into
masterfrom
seer/fix/n-plus-1-interactive-templates
Open

fix: Eliminate N+1 API calls for interactive templates in flow editor#4002
sentry[bot] wants to merge 1 commit into
masterfrom
seer/fix/n-plus-1-interactive-templates

Conversation

@sentry

@sentry sentry Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR addresses the N+1 API call issue observed on /flow/configure/* pages, specifically for interactive templates.

Problem:
When loading a flow in the editor, the underlying @nyaruka/temba-components library makes individual HTTP GET requests to /flow-editor/interactive-templates/{id} for each interactive template referenced in the flow. This results in a significant number of redundant network calls, impacting performance.

Solution:
Introduces a setupInteractiveTemplateCache function in FlowEditor.helper.tsx that patches window.fetch. This interceptor works as follows:

  1. The first time a request to interactive-templates/{id} is made, it triggers a single network call to the list endpoint (/flow-editor/interactive-templates) to fetch all available templates.
  2. These templates are then stored in an in-memory cache, keyed by their ID.
  3. Subsequent individual requests for interactive-templates/{id} are served directly from this cache, eliminating further network calls.

This approach significantly reduces network overhead and improves the loading performance of the flow editor when dealing with multiple interactive templates. The window.fetch patch is properly cleaned up when the component unmounts, following the pattern established by setAuthHeaders.

Test Plan

  1. Navigate to a flow configuration page (e.g., /flow/configure/some-flow-id) that contains multiple interactive templates.
  2. Open your browser's developer tools and go to the 'Network' tab.
  3. Observe the network requests made when the page loads.
  4. Verify that only one network request is made to /flow-editor/interactive-templates (the list endpoint).
  5. Confirm that no subsequent individual GET /flow-editor/interactive-templates/{id} requests are made over the network for each template, as they should be served from the cache.
  6. Reload the page and repeat the observation to ensure consistent caching behavior.

Fixes GLIFIC-FRONTEND-13G

@github-actions

Copy link
Copy Markdown

@github-actions
github-actions Bot temporarily deployed to pull request June 24, 2026 05:47 Inactive
@cypress

cypress Bot commented Jun 24, 2026

Copy link
Copy Markdown

Glific    Run #9899

Run Properties:  status check passed Passed #9899  •  git commit 998f81389a ℹ️: Merge db11207b7984ad629af77effdfa0d7cd1a985c3f into 9200718f48bc5bdd78560eec871e...
Project Glific
Branch Review seer/fix/n-plus-1-interactive-templates
Run status status check passed Passed #9899
Run duration 06m 45s
Commit git commit 998f81389a ℹ️: Merge db11207b7984ad629af77effdfa0d7cd1a985c3f into 9200718f48bc5bdd78560eec871e...
Committer sentry[bot]
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 32
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants