fix: inconsistent targeting key (#16)

* fix: tracking Signed-off-by: Todd Baert <[email protected]> * fixup: release tag Signed-off-by: Todd Baert <[email protected]> --------- Signed-off-by: Todd Baert <[email protected]>
open-feature · Nov 14, 2024 · 0d09d2e · 0d09d2e
1 parent f771eec
commit 0d09d2e
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 60 deletions.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -64,15 +64,9 @@ jobs:
         uses: docker/metadata-action@v5 
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=schedule
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha
+          tags: 
+            - ${{ needs.release-please.outputs.release_tag_name }}
+            - latest
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3

diff --git a/flags.json b/flags.json
@@ -17,7 +17,7 @@
       },
       "defaultVariant": "on",
       "targeting": {
-        "if": [{ "==": [{ "var": "size" }, "sm"]}, "on", "off" ]
+        "if": [{ "==": [{ "var": "size" }, "sm"]}, "on", null ]
       }
     },
     "use-distributed-db": {

diff --git a/kubernetes/toggle-shop.yaml b/kubernetes/toggle-shop.yaml
@@ -26,7 +26,7 @@ spec:
         #       - var: size
         #       - sm
         #     - 'on'
-        #     - 'off'
+        #     - 
 ---
 # Flags for our backend application
 apiVersion: core.openfeature.dev/v1beta1

diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
@@ -1,15 +1,16 @@
 "use client";
 
-import { useMemo, useReducer } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import Image from "next/image";
-import { ArrowLeft, ArrowRight, Minus, Plus, X } from "lucide-react";
-import { useCart } from "@/hooks/use-cart";
 import Header from "@/components/Header";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { tanstackMetaToHeader } from "@/libs/open-feature/evaluation-context";
+import { useCart } from "@/hooks/use-cart";
+import { setTargetingKeyHeader } from "@/libs/open-feature/evaluation-context";
+import { TARGETING_KEY } from "@/libs/targeting-key";
 import { useFlag, useTrack } from "@openfeature/react-sdk";
+import { useMutation } from "@tanstack/react-query";
+import { ArrowLeft, ArrowRight, Minus, Plus, X } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useReducer } from "react";
 
 export default function Checkout() {
   const { cartItems, removeFromCart, updateQuantity } = useCart();
@@ -169,16 +170,13 @@ function CheckoutForm() {
   const router = useRouter();
   const { cartItems, clearCart } = useCart();
 
-  const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: () => {
       return fetch("/api/orders", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          ...tanstackMetaToHeader(
-            queryClient.getDefaultOptions().mutations?.meta
-          ),
+          ...setTargetingKeyHeader(TARGETING_KEY),
         },
         body: JSON.stringify({
           items: cartItems,

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import { Inter } from "next/font/google";
 import { CartProvider } from "@/providers/cart";
 import { ReactQueryProvider } from "@/providers/react-query";
 import { OpenFeatureProvider } from "@/providers/open-feature";
-import { v4 } from "uuid";
+import { TARGETING_KEY } from "@/libs/targeting-key";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -12,8 +12,6 @@ export const metadata = {
   description: "If it can toggle, you'll find it here!",
 };
 
-const targetingKey = v4();
-
 export default function RootLayout({
   children,
 }: {
@@ -22,8 +20,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <ReactQueryProvider targetingKey={targetingKey}>
-          <OpenFeatureProvider context={{ targetingKey }}>
+        <ReactQueryProvider>
+          <OpenFeatureProvider context={{ targetingKey: TARGETING_KEY }}>
             <CartProvider>{children}</CartProvider>
           </OpenFeatureProvider>
         </ReactQueryProvider>

diff --git a/src/hooks/use-products.tsx b/src/hooks/use-products.tsx
@@ -3,7 +3,8 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { Product } from "@/types/product";
 import { getBaseUrl } from "@/libs/url";
-import { tanstackMetaToHeader } from "@/libs/open-feature/evaluation-context";
+import { setTargetingKeyHeader } from "@/libs/open-feature/evaluation-context";
+import { TARGETING_KEY } from "@/libs/targeting-key";
 
 export function useProducts() {
   const { data } = useSuspenseQuery({
@@ -12,7 +13,7 @@ export function useProducts() {
       console.log("fetching products");
       const res = await fetch(getBaseUrl() + "/api/products", {
         cache: "no-store",
-        headers: tanstackMetaToHeader(meta),
+        headers: setTargetingKeyHeader(TARGETING_KEY),
       });
       if (!res.ok) {
         throw new Error("Failed to fetch products");
@@ -30,7 +31,7 @@ export function useProduct(id: string) {
       console.log(`fetching product ${id}`);
       const res = await fetch(getBaseUrl() + `/api/products/${id}`, {
         cache: "no-store",
-        headers: tanstackMetaToHeader(meta),
+        headers: setTargetingKeyHeader(TARGETING_KEY),
       });
       if (!res.ok) {
         throw new Error("Failed to fetch products");

diff --git a/src/libs/open-feature/evaluation-context.ts b/src/libs/open-feature/evaluation-context.ts
@@ -2,16 +2,12 @@ import type { EvaluationContext } from "@openfeature/core";
 
 const TARGETING_KEY_HEADER = "x-targeting-key";
 
-export function tanstackMetaToHeader(
-  meta?: EvaluationContext
+export function setTargetingKeyHeader(
+  targetingKey: string
 ): Record<string, string> {
-  if (meta && meta.targetingKey) {
-    return {
-      [TARGETING_KEY_HEADER]: meta.targetingKey,
-    };
-  }
-
-  return {};
+  return {
+    [TARGETING_KEY_HEADER]: targetingKey,
+  };
 }
 
 export function headerToEvaluationContext(

diff --git a/src/libs/targeting-key.ts b/src/libs/targeting-key.ts
@@ -0,0 +1,5 @@
+'use client'
+
+import { v4 } from "uuid";
+
+export const TARGETING_KEY = v4();
diff --git a/src/providers/react-query.tsx b/src/providers/react-query.tsx
@@ -1,33 +1,14 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useMemo } from "react";
-import type { EvaluationContext } from "@openfeature/react-sdk";
-
-declare module "@tanstack/react-query" {
-  interface Register {
-    queryMeta: EvaluationContext;
-    mutationMeta: EvaluationContext;
-  }
-}
 
 export function ReactQueryProvider({
-  targetingKey,
   children,
 }: {
-  targetingKey: string;
   children: React.ReactNode;
 }) {
-  const queryClient = useMemo(() => {
-    return new QueryClient({
-      defaultOptions: {
-        queries: { meta: { targetingKey } },
-        mutations: { meta: { targetingKey } },
-      },
-    });
-  }, [targetingKey]);
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>
   );
 }