mirror of
https://github.com/xtr-dev/payload-feature-flags.git
synced 2025-12-10 02:43:25 +00:00
v0.0.14: Improve SSR support and fix race condition
Addresses critical issues identified in code review: 1. Server-Side Environment Handling: - Add warning when serverURL is not provided in SSR/SSG environments - Falls back to relative URLs with console warning - Prevents silent failures in server-side rendering 2. Race Condition Fix: - Use useRef for initialFlags to prevent re-creating fetchFlags on every render - Removes initialFlags from useCallback dependencies - Prevents excessive re-renders and potential infinite loops These improvements ensure better stability and reliability in both client-side and server-side environments. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@xtr-dev/payload-feature-flags",
|
||||
"version": "0.0.13",
|
||||
"version": "0.0.14",
|
||||
"description": "Feature flags plugin for Payload CMS - manage feature toggles, A/B tests, and gradual rollouts",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
'use client'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import React, { useCallback, useEffect, useState, useRef } from 'react'
|
||||
|
||||
export interface FeatureFlag {
|
||||
name: string
|
||||
@@ -21,9 +21,19 @@ export interface FeatureFlagOptions {
|
||||
|
||||
// Helper to get config from options or defaults
|
||||
function getConfig(options?: FeatureFlagOptions) {
|
||||
// In server-side environments, serverURL must be explicitly provided
|
||||
const serverURL = options?.serverURL ||
|
||||
(typeof window !== 'undefined' ? window.location.origin : '') ||
|
||||
''
|
||||
(typeof window !== 'undefined' ? window.location.origin : undefined)
|
||||
|
||||
if (!serverURL) {
|
||||
console.warn(
|
||||
'FeatureFlags: serverURL must be provided when using hooks in server-side environment. ' +
|
||||
'Falling back to relative URL which may not work correctly.'
|
||||
)
|
||||
// Use relative URL as fallback - will work if API is on same domain
|
||||
return { serverURL: '', apiPath: options?.apiPath || '/api', collectionSlug: options?.collectionSlug || 'feature-flags' }
|
||||
}
|
||||
|
||||
const apiPath = options?.apiPath || '/api'
|
||||
const collectionSlug = options?.collectionSlug || 'feature-flags'
|
||||
|
||||
@@ -47,13 +57,21 @@ export function useFeatureFlags(
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Use ref to store initialFlags to avoid re-creating fetchFlags on every render
|
||||
const initialFlagsRef = useRef(initialFlags)
|
||||
|
||||
// Update ref when initialFlags changes (but won't trigger re-fetch)
|
||||
useEffect(() => {
|
||||
initialFlagsRef.current = initialFlags
|
||||
}, [initialFlags])
|
||||
|
||||
const fetchFlags = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
// Use Payload's native collection API
|
||||
const names = initialFlags.map(f => f.name).filter(Boolean)
|
||||
const names = initialFlagsRef.current.map(f => f.name).filter(Boolean)
|
||||
const query = names.length > 0
|
||||
? `?where[name][in]=${names.join(',')}&limit=1000`
|
||||
: '?limit=1000'
|
||||
@@ -81,7 +99,7 @@ export function useFeatureFlags(
|
||||
}
|
||||
|
||||
// Sort flags based on the order of names in initialFlags
|
||||
const sortedFlags = initialFlags.map(initialFlag => {
|
||||
const sortedFlags = initialFlagsRef.current.map(initialFlag => {
|
||||
const fetchedFlag = fetchedFlagsMap.get(initialFlag.name!)
|
||||
// Use fetched flag if available, otherwise keep the initial flag
|
||||
return fetchedFlag || initialFlag
|
||||
@@ -94,7 +112,7 @@ export function useFeatureFlags(
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [serverURL, apiPath, collectionSlug, initialFlags])
|
||||
}, [serverURL, apiPath, collectionSlug]) // Remove initialFlags from dependencies
|
||||
|
||||
useEffect(() => {
|
||||
void fetchFlags()
|
||||
|
||||
Reference in New Issue
Block a user