@terreno/rtk 0.18.0 → 0.20.0

package/src/useFeatureFlags.test.ts

@@ -1,19 +1,31 @@
 import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
-import {renderHook} from "@testing-library/react-native";
+import {NOOP_PROVIDER, OpenFeature} from "@openfeature/web-sdk";
+import {renderHook, waitFor} from "@testing-library/react-native";
 
 import {resolveFeatureFlagsOptions, useFeatureFlags} from "./useFeatureFlags";
 
-type FlagValues = Record<string, boolean | string | null>;
+type TerrenoFlagConfiguration = Record<
+  string,
+  {
+    defaultVariant: string;
+    disabled: boolean;
+    variants: Record<string, boolean | string>;
+  }
+>;
+
 type QueryResult = {
-  data?: FlagValues;
+  data?: TerrenoFlagConfiguration;
   error?: unknown;
+  isFetching?: boolean;
   isLoading?: boolean;
+  isSuccess?: boolean;
 };
 
 describe("resolveFeatureFlagsOptions", () => {
   it("applies defaults when no argument is provided", () => {
     expect(resolveFeatureFlagsOptions()).toEqual({
       basePath: "/feature-flags",
+      domain: "feature-flags",
       skip: false,
     });
   });
@@ -21,6 +33,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("applies defaults when an empty options object is provided", () => {
     expect(resolveFeatureFlagsOptions({})).toEqual({
       basePath: "/feature-flags",
+      domain: "feature-flags",
       skip: false,
     });
   });
@@ -28,6 +41,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("treats a string argument as a legacy basePath with skip=false", () => {
     expect(resolveFeatureFlagsOptions("/custom-path")).toEqual({
       basePath: "/custom-path",
+      domain: "feature-flags",
       skip: false,
     });
   });
@@ -35,6 +49,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("preserves an empty string basePath when passed as a legacy string argument", () => {
     expect(resolveFeatureFlagsOptions("")).toEqual({
       basePath: "",
+      domain: "feature-flags",
       skip: false,
     });
   });
@@ -42,6 +57,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("uses options.basePath when provided", () => {
     expect(resolveFeatureFlagsOptions({basePath: "/flags"})).toEqual({
       basePath: "/flags",
+      domain: "feature-flags",
       skip: false,
     });
   });
@@ -49,6 +65,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("uses options.skip when provided", () => {
     expect(resolveFeatureFlagsOptions({skip: true})).toEqual({
       basePath: "/feature-flags",
+      domain: "feature-flags",
       skip: true,
     });
   });
@@ -56,6 +73,7 @@ describe("resolveFeatureFlagsOptions", () => {
   it("uses both options.basePath and options.skip when provided together", () => {
     expect(resolveFeatureFlagsOptions({basePath: "/flags", skip: true})).toEqual({
       basePath: "/flags",
+      domain: "feature-flags",
       skip: true,
     });
   });
@@ -65,69 +83,120 @@ describe("resolveFeatureFlagsOptions", () => {
   });
 });
 
+const boolDef = (variant: "on" | "off") => ({
+  defaultVariant: variant,
+  disabled: false,
+  variants: {off: false, on: true},
+});
+
 const buildApi = (queryResult: QueryResult) => {
   const refetch = mock(() => {});
   const capturedQueryBuilder: Array<{method: string; url: string}> = [];
-  const useEvaluateFeatureFlagsQuery = mock(() => ({
-    data: queryResult.data,
-    error: queryResult.error,
-    isLoading: queryResult.isLoading ?? false,
-    refetch,
-  }));
+  const useTerrenoFlagConfigurationQuery = mock(() => {
+    const hasData = Boolean(queryResult.data);
+    return {
+      data: queryResult.data,
+      error: queryResult.error,
+      isFetching: queryResult.isFetching ?? false,
+      isLoading: queryResult.isLoading ?? false,
+      isSuccess: queryResult.isSuccess ?? hasData,
+      refetch,
+    };
+  });
   const api = {
     injectEndpoints: mock((opts: {endpoints: (builder: unknown) => void}) => {
       const builder = {
         query: (def: {query: () => {method: string; url: string}}) => {
           capturedQueryBuilder.push(def.query());
-          return {useQuery: useEvaluateFeatureFlagsQuery};
+          return {useQuery: useTerrenoFlagConfigurationQuery};
         },
       };
       opts.endpoints(builder);
-      return {useEvaluateFeatureFlagsQuery};
+      return {useTerrenoFlagConfigurationQuery};
     }),
   };
-  return {api, capturedQueryBuilder, refetch, useEvaluateFeatureFlagsQuery};
+  return {api, capturedQueryBuilder, refetch, useTerrenoFlagConfigurationQuery};
 };
 
 describe("useFeatureFlags hook", () => {
   const debugCalls: unknown[][] = [];
   const originalDebug = console.debug;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     debugCalls.length = 0;
     console.debug = (...args: unknown[]): void => {
       debugCalls.push(args);
     };
+    await OpenFeature.setProviderAndWait("feature-flags", NOOP_PROVIDER);
   });
 
-  afterEach(() => {
+  afterEach(async () => {
     console.debug = originalDebug;
+    await OpenFeature.setProviderAndWait("feature-flags", NOOP_PROVIDER);
   });
 
-  it("builds the evaluate endpoint with the default basePath", () => {
-    const {api, capturedQueryBuilder} = buildApi({data: {foo: true}});
-    renderHook(() => useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0]));
+  it("builds the flagConfiguration endpoint with the default basePath", () => {
+    const {api, capturedQueryBuilder} = buildApi({data: {foo: boolDef("on")}});
+    renderHook(() =>
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {
+        userId: "u1",
+      })
+    );
     expect(capturedQueryBuilder[0]).toEqual({
       method: "GET",
-      url: "/feature-flags/evaluate",
+      url: "/feature-flags/flagConfiguration",
     });
   });
 
-  it("builds the evaluate endpoint with a custom basePath from legacy string argument", () => {
-    const {api, capturedQueryBuilder} = buildApi({data: {foo: true}});
+  it("builds the flagConfiguration endpoint with a custom basePath from legacy string argument", () => {
+    const {api, capturedQueryBuilder} = buildApi({data: {foo: boolDef("on")}});
     renderHook(() =>
       useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], "/flags")
     );
-    expect(capturedQueryBuilder[0]).toEqual({method: "GET", url: "/flags/evaluate"});
+    expect(capturedQueryBuilder[0]).toEqual({method: "GET", url: "/flags/flagConfiguration"});
   });
 
-  it("returns flag accessors that read boolean and string values", () => {
+  it("projects FlagConfiguration to flat flags like the legacy /evaluate map", async () => {
     const {api} = buildApi({
-      data: {booleanOff: false, booleanOn: true, variantFlag: "variant-a"},
+      data: {
+        b1: boolDef("on"),
+        v1: {
+          defaultVariant: "compact",
+          disabled: false,
+          variants: {compact: "compact", detailed: "detailed"},
+        },
+      },
     });
     const {result} = renderHook(() =>
-      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0])
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
     );
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+    expect(result.current.flags).toEqual({
+      b1: true,
+      v1: "compact",
+    });
+  });
+
+  it("returns flag accessors that read boolean and string values", async () => {
+    const {api} = buildApi({
+      data: {
+        booleanOff: boolDef("off"),
+        booleanOn: boolDef("on"),
+        variantFlag: {
+          defaultVariant: "variant-a",
+          disabled: false,
+          variants: {compact: "compact", detailed: "detailed", "variant-a": "variant-a"},
+        },
+      },
+    });
+    const {result} = renderHook(() =>
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
+    );
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
     expect(result.current.getFlag("booleanOn")).toBe(true);
     expect(result.current.getFlag("booleanOff")).toBe(false);
     expect(result.current.getFlag("variantFlag")).toBe(false);
@@ -137,98 +206,115 @@ describe("useFeatureFlags hook", () => {
   });
 
   it("returns an empty flags map when no data is available", () => {
-    const {api} = buildApi({isLoading: true});
+    const {api} = buildApi({isLoading: true, isSuccess: false});
     const {result} = renderHook(() =>
-      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0])
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
     );
     expect(result.current.flags).toEqual({});
     expect(result.current.isLoading).toBe(true);
   });
 
-  it("exposes refetch from the underlying query hook", () => {
-    const {api, refetch} = buildApi({data: {foo: true}});
+  it("exposes refetch from the underlying query hook", async () => {
+    const {api, refetch} = buildApi({data: {foo: boolDef("on")}});
     const {result} = renderHook(() =>
-      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0])
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
     );
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
     result.current.refetch();
     expect(refetch).toHaveBeenCalled();
   });
 
-  it("logs evaluate request started when loading begins without prior data", () => {
-    const {api} = buildApi({isLoading: true});
-    renderHook(() => useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0]));
+  it("logs flagConfiguration request started when loading begins without prior data", () => {
+    const {api} = buildApi({isLoading: true, isSuccess: false});
+    renderHook(() =>
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
+    );
     const started = debugCalls.find(
-      (args) => args[0] === "[feature-flags] evaluate request started"
+      (args) => args[0] === "[feature-flags] flagConfiguration request started"
     );
     expect(started).toBeDefined();
   });
 
-  it("logs evaluate request completed when data resolves after a loading phase", () => {
-    const api = buildApi({isLoading: true});
+  it("logs flagConfiguration request completed when data resolves after a loading phase", async () => {
+    const api = buildApi({isLoading: true, isSuccess: false});
     const {rerender} = renderHook(
       ({queryResult}: {queryResult: QueryResult}) => {
-        api.useEvaluateFeatureFlagsQuery.mockImplementationOnce(() => ({
+        api.useTerrenoFlagConfigurationQuery.mockImplementationOnce(() => ({
           data: queryResult.data,
           error: queryResult.error,
+          isFetching: queryResult.isFetching ?? false,
           isLoading: queryResult.isLoading ?? false,
+          isSuccess: queryResult.isSuccess ?? Boolean(queryResult.data),
           refetch: api.refetch,
         }));
-        return useFeatureFlags(api.api as unknown as Parameters<typeof useFeatureFlags>[0]);
+        return useFeatureFlags(api.api as unknown as Parameters<typeof useFeatureFlags>[0], {
+          userId: "u1",
+        });
       },
-      {initialProps: {queryResult: {isLoading: true}}}
-    );
-    rerender({queryResult: {data: {alpha: true}, isLoading: false}});
-    const completed = debugCalls.find(
-      (args) => args[0] === "[feature-flags] evaluate request completed"
+      {initialProps: {queryResult: {isLoading: true, isSuccess: false}}}
     );
+    rerender({queryResult: {data: {alpha: boolDef("on")}, isLoading: false, isSuccess: true}});
+    await waitFor(() => {
+      const completed = debugCalls.find(
+        (args) => args[0] === "[feature-flags] flagConfiguration request completed"
+      );
+      expect(completed).toBeDefined();
+    });
     const started = debugCalls.find(
-      (args) => args[0] === "[feature-flags] evaluate request started"
+      (args) => args[0] === "[feature-flags] flagConfiguration request started"
     );
     expect(started).toBeDefined();
-    expect(completed).toBeDefined();
   });
 
-  it("injects the evaluate endpoint only once per (api, basePath)", () => {
+  it("injects the flagConfiguration endpoint only once per (api, basePath)", () => {
     let injectCallCount = 0;
     const refetch = mock(() => {});
-    const useEvaluateFeatureFlagsQuery = mock(() => ({
+    const useTerrenoFlagConfigurationQuery = mock(() => ({
       data: {},
       error: undefined,
+      isFetching: false,
       isLoading: false,
+      isSuccess: true,
       refetch,
     }));
     const api = {
       injectEndpoints: () => {
         injectCallCount += 1;
-        return {useEvaluateFeatureFlagsQuery};
+        return {useTerrenoFlagConfigurationQuery};
       },
     };
     const {rerender} = renderHook(() =>
-      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0])
+      useFeatureFlags(api as unknown as Parameters<typeof useFeatureFlags>[0], {userId: "u1"})
     );
     rerender(undefined);
     rerender(undefined);
-    // The hook reuses the cached enhanced api after the first render so the
-    // dev-mode RTK warning about re-injecting endpoints never fires.
     expect(injectCallCount).toBe(1);
   });
 
-  it("logs evaluate request failed when error is returned after loading", () => {
-    const api = buildApi({isLoading: true});
+  it("logs flagConfiguration request failed when error is returned after loading", () => {
+    const api = buildApi({isLoading: true, isSuccess: false});
     const {rerender} = renderHook(
       ({queryResult}: {queryResult: QueryResult}) => {
-        api.useEvaluateFeatureFlagsQuery.mockImplementationOnce(() => ({
+        api.useTerrenoFlagConfigurationQuery.mockImplementationOnce(() => ({
           data: queryResult.data,
           error: queryResult.error,
+          isFetching: queryResult.isFetching ?? false,
           isLoading: queryResult.isLoading ?? false,
+          isSuccess: queryResult.isSuccess ?? false,
           refetch: api.refetch,
         }));
-        return useFeatureFlags(api.api as unknown as Parameters<typeof useFeatureFlags>[0]);
+        return useFeatureFlags(api.api as unknown as Parameters<typeof useFeatureFlags>[0], {
+          userId: "u1",
+        });
       },
-      {initialProps: {queryResult: {isLoading: true}}}
+      {initialProps: {queryResult: {isLoading: true, isSuccess: false}}}
+    );
+    rerender({queryResult: {error: new Error("boom"), isLoading: false, isSuccess: false}});
+    const failed = debugCalls.find(
+      (args) => args[0] === "[feature-flags] flagConfiguration request failed"
     );
-    rerender({queryResult: {error: new Error("boom"), isLoading: false}});
-    const failed = debugCalls.find((args) => args[0] === "[feature-flags] evaluate request failed");
     expect(failed).toBeDefined();
   });
 });

package/src/useFeatureFlags.ts

@@ -1,5 +1,6 @@
 import type {Api} from "@reduxjs/toolkit/query/react";
-import {useCallback, useEffect, useRef} from "react";
+import {useCallback, useEffect, useMemo, useRef} from "react";
+import {useTerrenoFeatureFlags} from "./useTerrenoFeatureFlags";
 
 interface FlagValues {
   [key: string]: boolean | string | null;
@@ -8,56 +9,19 @@ interface FlagValues {
 // biome-ignore lint/suspicious/noExplicitAny: RTK Query API generic typing is intentionally flexible here.
 type FlagsApi = Api<any, any, any, any>;
 
-// biome-ignore lint/suspicious/noExplicitAny: Endpoint hook is injected dynamically by RTK Query.
-type EnhancedFlagsApi = FlagsApi & {useEvaluateFeatureFlagsQuery: any};
-
-/**
- * Cache the enhanced api per (api, basePath). `injectEndpoints` logs a console
- * error in development whenever an endpoint with the same name is re-injected
- * with `overrideExisting: false`, so calling it on every render of every
- * consumer would flood the console. WeakMap-by-api lets the GC reclaim entries
- * when the api object is unreachable.
- */
-const enhancedApiCache = new WeakMap<FlagsApi, Map<string, EnhancedFlagsApi>>();
-
-const getEnhancedApi = (api: FlagsApi, basePath: string): EnhancedFlagsApi => {
-  let byBase = enhancedApiCache.get(api);
-  if (!byBase) {
-    byBase = new Map();
-    enhancedApiCache.set(api, byBase);
-  }
-  const cached = byBase.get(basePath);
-  if (cached) {
-    return cached;
-  }
-  const enhanced = api.injectEndpoints({
-    endpoints: (builder) => ({
-      evaluateFeatureFlags: builder.query<FlagValues, void>({
-        query: () => ({
-          method: "GET",
-          url: `${basePath}/evaluate`,
-        }),
-      }),
-    }),
-    overrideExisting: false,
-  }) as EnhancedFlagsApi;
-  byBase.set(basePath, enhanced);
-  return enhanced;
-};
-
 interface UseFeatureFlagsResult {
+  error: unknown;
   flags: FlagValues;
   getFlag: (key: string) => boolean;
   getVariant: (key: string) => string | null;
   isLoading: boolean;
-  error: unknown;
   refetch: () => void;
 }
 
 /**
  * Creates feature flag accessors from an RTK Query API instance.
  *
- * Injects a `GET {basePath}/evaluate` endpoint into the API and returns
+ * Injects a `GET {basePath}/flagConfiguration` endpoint into the API and returns
  * accessors for reading flag values. Fetches once on mount and caches via
  * RTK Query. Both `api` and `basePath` should be stable references.
  *
@@ -70,116 +34,148 @@ interface UseFeatureFlagsResult {
  * ```
  */
 export interface UseFeatureFlagsOptions {
-  /**
-   * Base path for the feature-flags endpoint. Defaults to "/feature-flags".
-   */
   basePath?: string;
-  /**
-   * When true, the underlying evaluate query is not fired. Use this to avoid
-   * fetching before the user is authenticated.
-   */
+  domain?: string;
   skip?: boolean;
+  socket?: {
+    off: (event: string, handler: (...args: unknown[]) => void) => void;
+    on: (event: string, handler: (...args: unknown[]) => void) => void;
+  } | null;
+  socketEventName?: string;
+  userId?: string | null;
 }
 
 interface ResolvedFeatureFlagsOptions {
   basePath: string;
+  domain: string;
   skip: boolean;
+  socket?: UseFeatureFlagsOptions["socket"];
+  socketEventName?: string;
+  userId?: string | null;
 }
 
 /**
  * Normalizes the legacy-compatible `basePathOrOptions` argument into a
- * `{basePath, skip}` pair with defaults applied.
- *
- * - `undefined` -> `{basePath: "/feature-flags", skip: false}`
- * - `string`    -> `{basePath: <string>, skip: false}` (legacy form)
- * - `object`    -> `{basePath: opts.basePath ?? "/feature-flags", skip: opts.skip ?? false}`
+ * `{basePath, skip, ...}` pair with defaults applied.
  */
 export const resolveFeatureFlagsOptions = (
   basePathOrOptions?: string | UseFeatureFlagsOptions
 ): ResolvedFeatureFlagsOptions => {
-  const {basePath = "/feature-flags", skip = false} =
+  const raw =
     typeof basePathOrOptions === "string"
       ? {basePath: basePathOrOptions, skip: false}
       : (basePathOrOptions ?? {});
-  return {basePath, skip};
+  return {
+    basePath: raw.basePath ?? "/feature-flags",
+    domain: raw.domain ?? "feature-flags",
+    skip: raw.skip ?? false,
+    socket: raw.socket,
+    socketEventName: raw.socketEventName,
+    userId: raw.userId,
+  };
 };
 
-// Overloaded signature preserves backwards compatibility with callers that
-// pass a string basePath as the second argument.
-export function useFeatureFlags(
+export const useFeatureFlags = (
   api: FlagsApi,
   basePathOrOptions?: string | UseFeatureFlagsOptions
-): UseFeatureFlagsResult {
-  const {basePath, skip} = resolveFeatureFlagsOptions(basePathOrOptions);
-
-  const enhancedApi = getEnhancedApi(api, basePath);
-  const useEvaluateQuery = enhancedApi.useEvaluateFeatureFlagsQuery;
-  const {data, isLoading, error, refetch} = useEvaluateQuery(undefined, {skip});
-  const evaluateStartedAtRef = useRef<number | null>(null);
+): UseFeatureFlagsResult => {
+  const {basePath, domain, skip, socket, socketEventName, userId} =
+    resolveFeatureFlagsOptions(basePathOrOptions);
+
+  const {
+    client,
+    error,
+    flags: rawFlags,
+    isLoading,
+    refetch,
+  } = useTerrenoFeatureFlags(api, {
+    basePath,
+    domain,
+    skip,
+    socket,
+    socketEventName,
+    userId,
+  });
+
+  const fetchStartedAtRef = useRef<number | null>(null);
 
-  const flags: FlagValues = data ?? {};
-
-  // Log when evaluate request enters loading state so client timing can be measured.
   useEffect((): void => {
-    if (!isLoading || evaluateStartedAtRef.current !== null) {
+    if (!isLoading || fetchStartedAtRef.current !== null) {
       return;
     }
 
-    evaluateStartedAtRef.current = Date.now();
-    console.debug("[feature-flags] evaluate request started", {
+    fetchStartedAtRef.current = Date.now();
+    console.debug("[feature-flags] flagConfiguration request started", {
       basePath,
     });
   }, [basePath, isLoading]);
 
-  // Log evaluate success with duration and number of resolved flag values.
   useEffect((): void => {
-    if (!data || evaluateStartedAtRef.current === null) {
+    if (!error || fetchStartedAtRef.current === null) {
       return;
     }
 
-    const durationMs = Date.now() - evaluateStartedAtRef.current;
-    evaluateStartedAtRef.current = null;
-    console.debug("[feature-flags] evaluate request completed", {
+    const durationMs = Date.now() - fetchStartedAtRef.current;
+    fetchStartedAtRef.current = null;
+    console.debug("[feature-flags] flagConfiguration request failed", {
       basePath,
       durationMs,
-      evaluatedFlagCount: Object.keys(flags).length,
-      evaluatedFlags: flags,
+      error,
     });
-  }, [basePath, data, flags]);
+  }, [basePath, error]);
+
+  const flatFlags = useMemo((): FlagValues => {
+    const out: FlagValues = {};
+    for (const [key, def] of Object.entries(rawFlags)) {
+      const value = def.variants[def.defaultVariant];
+      out[key] = value ?? null;
+    }
+    return out;
+  }, [rawFlags]);
 
-  // Log evaluate failures with duration so request issues can be correlated.
   useEffect((): void => {
-    if (!error || evaluateStartedAtRef.current === null) {
+    if (Object.keys(flatFlags).length === 0 || fetchStartedAtRef.current === null) {
+      return;
+    }
+
+    if (isLoading) {
       return;
     }
 
-    const durationMs = Date.now() - evaluateStartedAtRef.current;
-    evaluateStartedAtRef.current = null;
-    console.debug("[feature-flags] evaluate request failed", {
+    const durationMs = Date.now() - fetchStartedAtRef.current;
+    fetchStartedAtRef.current = null;
+    console.debug("[feature-flags] flagConfiguration request completed", {
       basePath,
       durationMs,
-      error,
+      evaluatedFlagCount: Object.keys(flatFlags).length,
+      evaluatedFlags: flatFlags,
     });
-  }, [basePath, error]);
+  }, [basePath, flatFlags, isLoading]);
 
   const getFlag = useCallback(
     (key: string): boolean => {
-      const value = flags[key];
-      return value === true;
+      return client.getBooleanValue(key, false);
     },
-    [flags]
+    [client]
   );
 
   const getVariant = useCallback(
     (key: string): string | null => {
-      const value = flags[key];
-      if (typeof value === "string") {
-        return value;
+      if (!rawFlags[key]) {
+        return null;
+      }
+      const value = client.getStringValue(key, "");
+      if (value === "") {
+        return null;
       }
-      return null;
+      return value;
     },
-    [flags]
+    [client, rawFlags]
   );
 
-  return {error, flags, getFlag, getVariant, isLoading, refetch};
-}
+  const stableRefetch = useCallback((): void => {
+    void refetch();
+  }, [refetch]);
+
+  return {error, flags: flatFlags, getFlag, getVariant, isLoading, refetch: stableRefetch};
+};