Dylan/s3en 2331 update langtrace querykeys to be multiple args

app/(protected)/project/[project_id]/evaluate/page-client.tsx

@@ -36,7 +36,7 @@ export default function PageClient({ email }: { email: string }) {
   const [totalPages, setTotalPages] = useState<number>(1);
 
   const { data: testAverages, isLoading: testAveragesLoading } = useQuery({
-    queryKey: [`fetch-test-averages-${projectId}-query`],
+    queryKey: ["fetch-test-averages-query", projectId],
     queryFn: async () => {
       const response = await fetch(`/api/metrics/tests?projectId=${projectId}`);
       if (!response.ok) {
@@ -58,7 +58,7 @@ export default function PageClient({ email }: { email: string }) {
     isLoading: testsLoading,
     error: testsError,
   } = useQuery({
-    queryKey: [`fetch-tests-${projectId}-query`],
+    queryKey: ["fetch-tests-query", projectId],
     queryFn: async () => {
       const response = await fetch(`/api/test?projectId=${projectId}`);
       if (!response.ok) {

app/(protected)/project/[project_id]/prompts/page-client.tsx

@@ -37,7 +37,7 @@ export default function PageClient({ email }: { email: string }) {
   };
 
   const fetchPrompts = useQuery({
-    queryKey: [`fetch-prompts-${projectId}-query`],
+    queryKey: ["fetch-prompts-query", projectId],
     queryFn: async () => {
       const response = await fetch(
         `/api/span-prompt?projectId=${projectId}&page=${page}&pageSize=${PAGE_SIZE}`
@@ -188,7 +188,7 @@ const PromptRow = ({
   const promptContent = extractSystemPromptFromLlmInputs(prompts);
 
   const fetchEvaluation = useQuery({
-    queryKey: [`fetch-evaluation-query-${prompt.span_id}`],
+    queryKey: ["fetch-evaluation-query", prompt.span_id],
     queryFn: async () => {
       const response = await fetch(`/api/evaluation?prompt=${promptContent}`);
 

app/(protected)/projects/page-client.tsx

@@ -143,7 +143,7 @@ function ProjectCard({
   teamId: string;
 }) {
   const { data: projectStats, isLoading: projectStatsLoading } = useQuery({
-    queryKey: [`fetch-project-stats-${project.id}`],
+    queryKey: ["fetch-project-stats", project.id],
     queryFn: async () => {
       const response = await fetch(
         `/api/stats/project?projectId=${project.id}`

components/evaluate/evaluation-table.tsx

@@ -49,7 +49,7 @@ export default function EvaluationTable({
   };
 
   const fetchLlmPromptSpans = useQuery({
-    queryKey: [`fetch-llm-prompt-spans-${test.id}-query`],
+    queryKey: ["fetch-llm-prompt-spans-query", test.id],
     queryFn: async () => {
       const filters = [
         {

components/shared/add-to-dataset.tsx

@@ -100,7 +100,7 @@ export function AddtoDataset({
                 });
                 selectedData!.forEach((data) => {
                   queryClient.invalidateQueries({
-                    queryKey: [`fetch-data-query-${data.spanId}`],
+                    queryKey: ["fetch-data-query", data.spanId],
                   });
                 });
                 setBusy(false);
@@ -130,7 +130,7 @@ export default function DatasetCombobox({
   const [datasetId, setDatasetId] = React.useState("");
 
   const fetchDatasets = useQuery({
-    queryKey: ["fetch-datasets-query"],
+    queryKey: ["fetch-datasets-query", projectId],
     queryFn: async () => {
       const response = await fetch(`/api/dataset?id=${projectId}`);
       const result = await response.json();

components/shared/header.tsx

@@ -24,7 +24,7 @@ import { ProjectSwitcher } from "./project-switcher";
 export function Header({ email }: { email: string }) {
   const pathname = usePathname();
   const fetchAccountStats = useQuery({
-    queryKey: ["fetch-account-stats"],
+    queryKey: ["fetch-account-stats", email],
     queryFn: async () => {
       const response = await fetch(`/api/stats/account?email=${email}`);
       const result = await response.json();
@@ -45,13 +45,13 @@ export function Header({ email }: { email: string }) {
     <header className="flex flex-col gap-2 w-full px-12 z-30 sticky top-0 bg-primary-foreground">
       <div className="flex justify-between items-center w-full pt-3">
         <div className="flex items-center gap-3">
-        <Link
-          href="/projects"
-          className="text-xl font-bold flex items-center gap-0"
-        >
-          Langtrace AI
-        </Link>
-        {pathname.includes("/project/") && <ProjectSwitcher email={email} />}
+          <Link
+            href="/projects"
+            className="text-xl font-bold flex items-center gap-0"
+          >
+            Langtrace AI
+          </Link>
+          {pathname.includes("/project/") && <ProjectSwitcher email={email} />}
         </div>
         <div className="flex items-center gap-3">
           <div className="flex flex-col">

components/shared/project-switcher.tsx

@@ -1,11 +1,21 @@
 import { Button } from "@/components/ui/button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React from 'react';
+import React from "react";
 import { useQuery } from "react-query";
 import { toast } from "sonner";
 
@@ -16,9 +26,9 @@ export function ProjectSwitcher({ email }: { email: string }) {
   const {
     data: projects,
     isLoading: projectsLoading,
-    error: projectsError
+    error: projectsError,
   } = useQuery({
-    queryKey: ["fetch-projects-query"],
+    queryKey: ["fetch-projects-query", email],
     queryFn: async () => {
       const response = await fetch(`/api/projects?email=${email}`);
       if (!response.ok) {
@@ -43,7 +53,11 @@ export function ProjectSwitcher({ email }: { email: string }) {
           aria-expanded={open}
           className="w-[200px] justify-between"
         >
-          {projects?.projects.filter((project : any) => project.id === pathname.split("/")[2])[0]?.name}
+          {
+            projects?.projects.filter(
+              (project: any) => project.id === pathname.split("/")[2]
+            )[0]?.name
+          }
           <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -52,8 +66,12 @@ export function ProjectSwitcher({ email }: { email: string }) {
           <CommandInput placeholder="Search Project..." className="h-9" />
           <CommandEmpty>No project found.</CommandEmpty>
           <CommandGroup>
-            {projects?.projects.map((project : any) => (
-              <Link key={project.id} href={`/project/${project.id}/${pathname.split("/")[3]}`} legacyBehavior>
+            {projects?.projects.map((project: any) => (
+              <Link
+                key={project.id}
+                href={`/project/${project.id}/${pathname.split("/")[3]}`}
+                legacyBehavior
+              >
                 <a>
                   <CommandItem
                     value={project.id}
@@ -62,7 +80,12 @@ export function ProjectSwitcher({ email }: { email: string }) {
                     <div className="flex justify-between w-full cursor-pointer">
                       {project.name}
                       <CheckIcon
-                        className={cn("ml-auto h-4 w-4", pathname.split("/")[2] === project.id ? "opacity-100" : "opacity-0")}
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          pathname.split("/")[2] === project.id
+                            ? "opacity-100"
+                            : "opacity-0"
+                        )}
                       />
                     </div>
                   </CommandItem>
@@ -74,4 +97,4 @@ export function ProjectSwitcher({ email }: { email: string }) {
       </PopoverContent>
     </Popover>
   );
-}
+}