Skip to main content
Return the filter options configured for your chain’s SmartMenu widget: enabled diets, allergens, and nutrient sliders. Use this to build the dietary preference UI in your app.

​
Query

query GetSmartMenuFilterOptions {
  filterOptions {
    diets {
      type
      displayName
      description
      isEnabled
      ordinal
    }
    allergens {
      type
      displayName
      description
      isEnabled
      ordinal
      icon
    }
    nutrients {
      type
      displayName
      unit
      defaultMin
      defaultMax
    }
  }
}
This query requires an API key scoped to your chain in the Authorization header. You do not pass chain, widget, or session in the GraphQL query itself.

​
Parameters

This query takes no arguments. Chain and widget context come from your Authorization header.

​
Response Types

​
WidgetDietaryPreference

type WidgetDietaryPreference {
  type: DietType!
  displayName: String!
  description: String
  isEnabled: Boolean!
  ordinal: Int
}

enum DietType {
  VEGAN
  VEGETARIAN
  PESCATARIAN
}

​
WidgetAllergen

type WidgetAllergen {
  type: AllergenType!
  displayName: String!
  description: String
  isEnabled: Boolean!
  ordinal: Int
  icon: String          # Icon or emoji identifier for UI
}

enum AllergenType {
  DAIRY
  EGG
  FISH
  SHELLFISH
  TREE_NUT
  PEANUT
  WHEAT
  SOY
  SESAME
}

​
SmartMenuNutrientPreference

type SmartMenuNutrientPreference {
  type: NutrientType!
  displayName: String!
  unit: String!
  defaultMin: Float
  defaultMax: Float
}

enum NutrientType {
  CALORIES
  PROTEIN
  CARBOHYDRATES
  FAT_TOTAL
  SODIUM
  DIETARY_FIBER
  SUGAR
}

​
Example

query {
  filterOptions {
    diets {
      type
      displayName
      description
    }
    allergens {
      type
      displayName
      icon
    }
    nutrients {
      type
      displayName
      unit
      defaultMax
    }
  }
}
Pass user-selected preferences to the search query: 
query SearchWithPreferences {
  search(
    preferences: {
      diets: [VEGETARIAN]
      excludeAllergens: [DAIRY, PEANUT]
      calorieRange: { max: 600 }
      nutrientRanges: {
        protein: { min: 20 }
      }
    }
  ) {
    matches {
      dish { id, name }
    }
    counts { matches, almostMatches }
  }
}

​
UI Recommendations

​
Diet Selector

// Example React component
function DietSelector({ options, selected, onChange }) {
  return (
    <div className="diet-options">
      {options.map(diet => (
        <button
          key={diet.type}
          className={selected.includes(diet.type) ? 'active' : ''}
          onClick={() => onChange(diet.type)}
          title={diet.description}
        >
          {diet.displayName}
        </button>
      ))}
    </div>
  );
}

​
Allergen Exclusion

Display allergen exclusions prominently. This is a health and safety feature - make it easy for guests to exclude allergens.
function AllergenExcluder({ options, excluded, onChange }) {
  return (
    <div className="allergen-options">
      <h3>Exclude Allergens</h3>
      {options.map(allergen => (
        <label key={allergen.type}>
          <input
            type="checkbox"
            checked={excluded.includes(allergen.type)}
            onChange={() => onChange(allergen.type)}
          />
          <span className="icon">{allergen.icon}</span>
          {allergen.displayName}
        </label>
      ))}
    </div>
  );
}

​
Nutrient Range Sliders

function CalorieSlider({ max, value, onChange }) {
  return (
    <div className="calorie-slider">
      <label>Max Calories: {value} kcal</label>
      <input
        type="range"
        min={0}
        max={max}
        value={value}
        onChange={e => onChange(parseInt(e.target.value))}
      />
    </div>
  );
}

​
Caching Filter Options

Unlike search results, filter options change infrequently. You may cache this response for a short period (e.g., 5 minutes) to reduce API calls during a session. 
// Cache filter options per chain
const filterOptionsCache = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 minutes

async function getFilterOptions(chainId) {
  const cached = filterOptionsCache.get(chainId);
  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }

  const data = await fetchFilterOptions(chainId);
  filterOptionsCache.set(chainId, { data, timestamp: Date.now() });
  return data;
}

​
Best Practices

Load Early

Fetch filter options when the user opens the menu, not when they click “Filter”.

Remember Preferences

Store user’s preferred filters locally and pre-populate on return visits.

Show Counts

After filtering, show how many dishes match (e.g., “12 Vegetarian dishes”).

Clear All Button

Provide an easy way to reset all filters.