Dynamic Properties Option Caching

Need help
1

I want to store the options of dynamic properties in cache unless the user refreshes the page themselves, how can this be done? I only noticed that there were store for data caches but not for the option caches for the dynamic properties

2

Hi @liza, I’m currently implementing an action containing Dropdown & DynamicProperties, and I’m also looking for information on cache.

Could you please be a bit more specific with your request, to see if we’re looking for the same thing?

3

Hello @aguerin this is a block for recreating this issue:

import { createAction, Property } from '@activepieces/pieces-framework';

/**
 *  Options Caching Problem
 * 
 * PROBLEM DESCRIPTION:
 * The dropdown options are fetched from a backend server every time the action block
 * is revisited or the flow configuration is opened. 
 * 
 * REPRODUCTION STEPS:
 * 1. Add this action to a flow
 * 2. Open the action configuration (dropdown will load)
 * 3. Navigate away from the action
 * 4. Return to the action configuration
 * 5. The API call is made again (check network tab or server logs)
 * 
 * EXPECTED BEHAVIOR:
 * The dropdown options should be cached and only refetched when:
 * - Cache expires (e.g., after 5-10 minutes)
 * - User manually refreshes
 * - Flow is reloaded completely - if cache can persist even after reloading, that would be great
 * 
 * CURRENT BEHAVIOR:
 * API call is made every single time the action block is accessed
 */

/**
 * Mock delay function to simulate server response time
 */
const delay = (ms: number): Promise<Array<{label: string, value: string}>> => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('API CALL MADE - This should be cached!');
      resolve([
        { label: 'Today', value: '2024-01-15' },
        { label: 'Tomorrow', value: '2024-01-16' },
        { label: 'Next Week', value: '2024-01-22' }
      ]);
    }, ms);
  });
};

export const getCustomDateList = createAction({
  name: 'getCustomDateList',
  displayName: 'Get Custom Date List',
  description: 'Fetches available shipping dates from backend server.',
  
  props: {
    name: Property.Dropdown({
      displayName: 'Select Shipping Date',
      description: 'Select from available shipping dates',
      
      // CACHING ISSUE LOCATION: This options function is called every time
      options: async (_data, anotherProp) => {
        
        try {
          
          // MOCK SERVER CALL
          const response = await delay(1000);

          if (!response || response.length === 0) {
            return {
              disabled: true,
              placeholder: 'No dates available',
              options: [],
            };
          }

          return {
            disabled: false,
            options: response,
          };
          
        } catch (error) {
          console.error('Error fetching shipping dates:', error);
          return {
            disabled: true,
            placeholder: 'Error loading dates',
            options: [],
          };
        }
      },
      
      refreshers: [], 
      required: true,
    }),
  },
  
  async run(context) {
    try {
      const flowId = context?.flows?.current?.id;
      const selectedDate = context.propsValue.name;

      if (!flowId) {
        throw new Error('Flow ID is required');
      }
      
      if (!selectedDate) {
        throw new Error('No shipping date selected');
      }
      console.log(`Processing shipping date: ${selectedDate} for flow: ${flowId}`);
      
      return {
        success: true,
        selectedDate,
        flowId,
        message: 'Shipping date processed successfully'
      };
      
    } catch (error) {
      console.error('Unexpected error in run function:', error);
      return {
        success: false,
        error: `Error: Unexpected failure - ${error}`
      };
    }
  },
});
1 Like
4

Just wondering if anyone has found a solution for this?