Skip to main content

Facebook Pages Cache Optimization

Summary​

Removed live Facebook API calls for fetching pages during social post creation. Now exclusively uses cached data stored during OAuth callback.

Changes Made​

1. Frontend Component (create-social-post-steps.tsx)​

Before:

  • Used useFacebookPages hook to fetch pages from API
  • Cache-first strategy with fallback to live API
  • Made unnecessary API calls when cache was empty

After:

  • Removed useFacebookPages import and usage
  • Uses only cached data from platform.api_config.metadata.pages
  • Simpler, faster, more reliable
// Old approach (cache-first with API fallback)
const cachedPages = socialPlatform?.api_config?.metadata?.pages || []
const useCache = Array.isArray(cachedPages) && cachedPages.length > 0
const { pages: livePages } = useFacebookPages(!useCache ? platformId : undefined)
const pages = useCache ? cachedPages : livePages

// New approach (cache-only)
const pages = socialPlatform?.api_config?.metadata?.pages || []
const igAccounts = socialPlatform?.api_config?.metadata?.ig_accounts || []
const userProfile = socialPlatform?.api_config?.metadata?.user_profile

2. Backend API Route (/admin/socials/facebook/pages)​

Status: Deprecated but kept for backward compatibility

Changes:

  • Added deprecation warning in console
  • Fixed token issue (now uses user_access_token instead of access_token)
  • Added _deprecated field in response
  • Will be removed in future version

Issue Fixed:

  • Page Access Tokens don't have permission to access /me/accounts endpoint
  • Now correctly uses User Access Token for the API call

Benefits​

✅ Performance​

  • No API calls during post creation
  • Instant page selection - no loading delays
  • Reduced latency - one less network request

✅ Reliability​

  • No token permission issues - avoids OAuth scope problems
  • No rate limiting - Facebook API limits don't apply
  • Offline-capable - works even if Facebook API is down

✅ Code Quality​

  • Simpler code - removed unnecessary hook and logic
  • Fewer dependencies - one less API endpoint to maintain
  • Better separation - OAuth handles data fetching, UI uses cached data

Data Flow​

OAuth Callback (One-time)​

User authenticates with Facebook
    ↓
OAuth callback workflow runs
    ↓
fetch-platform-metadata step
    ↓
Fetches pages, IG accounts, user profile
    ↓
Stores in platform.api_config.metadata
    ↓
{
  pages: [...],
  ig_accounts: [...],
  user_profile: {...}
}

Post Creation (Every time)​

User creates social post
    ↓
Selects Facebook platform
    ↓
useSocialPlatform() fetches platform data
    ↓
Extract metadata.pages from cache
    ↓
Display pages in dropdown
    ↓
No API call needed! ✅

Cache Freshness​

When Cache is Updated​

  • During OAuth callback (initial authentication)
  • When user re-authenticates the platform
  • When platform tokens are refreshed

When Cache Becomes Stale​

  • User adds/removes Facebook pages
  • User changes page permissions
  • Page names or details change

Solution for Stale Cache​

Users must re-authenticate the platform to refresh cached data. This is acceptable because:

  1. Page changes are infrequent
  2. Re-authentication is quick and easy
  3. Most users don't frequently modify their Facebook pages

Migration Notes​

For Developers​

  • Remove any references to useFacebookPages hook
  • Use platform.api_config.metadata.pages directly
  • The hook file can be deleted in a future cleanup

For Users​

  • No action required
  • Existing cached data will continue to work
  • New OAuth flows will populate cache automatically

Future Improvements​

Optional Enhancements​

  1. Manual Refresh Button - Let users refresh cache without full re-auth
  2. Cache Timestamp - Show when data was last updated
  3. TTL-based Refresh - Auto-refresh cache after X days
  4. Partial Refresh - Refresh only pages without full re-auth

Cleanup Tasks​

  1. Remove /admin/socials/facebook/pages GET endpoint
  2. Delete useFacebookPages hook file
  3. Remove social-facebook.ts if no other hooks remain

Testing Checklist​

  • Create post with Facebook platform (cached pages)
  • Create post with FBINSTA platform (cached pages + IG accounts)
  • Verify no API calls to /admin/socials/facebook/pages
  • Verify pages display correctly from cache
  • Verify auto-selection of single page works
  • Verify Instagram accounts display correctly
  • Test with empty cache (should show empty dropdown)
  • Test re-authentication updates cache

Modified​

  • /src/admin/components/creates/create-social-post-steps.tsx
  • /src/api/admin/socials/facebook/pages/route.ts

Can Be Removed (Future)​

  • /src/admin/hooks/api/social-facebook.ts
  • /src/api/admin/socials/facebook/pages/route.ts (GET endpoint)
  • /src/workflows/socials/oauth-callback.ts
  • /src/workflows/socials/steps/fetch-platform-metadata.ts
  • /src/workflows/socials/steps/encrypt-and-store-platform-tokens.ts

Conclusion​

This optimization significantly improves the social post creation experience by:

  • Eliminating unnecessary API calls
  • Reducing complexity
  • Improving reliability
  • Maintaining the same user experience

The cache-only approach is the right architectural decision for this use case.

Last updated on