Improve parallel React Query handling

src/App.tsx

@@ -9,28 +9,33 @@ import { getSampleData } from "./lib/data";
 import { fetchCategoryMetadata } from "./lib/metadata";
 
 function App() {
-  const { data: categoryMetadata } = useQuery({
+  const metadataQuery = useQuery({
     queryKey: ["categoryMetadata"],
     queryFn: fetchCategoryMetadata,
   });
-  const { data, isPending, isError } = useQuery({
+  const responseQuery = useQuery({
     queryKey: ["responses"],
     queryFn: getSampleData,
     refetchInterval: 2 * 1000, // Refresh every 5 seconds
   });
 
-  if (isPending) return <div>Loading...</div>;
-  if (isError) return <div>Error loading data</div>;
+  if (metadataQuery.isPending || responseQuery.isPending)
+    return <div>Loading...</div>;
+  if (metadataQuery.isError || responseQuery.isError)
+    return <div>Error loading data</div>;
 
-  if (!data.length) return null;
+  const responses = responseQuery.data;
+  const categoryMetadata = metadataQuery.data;
+
+  if (!responses.length) return null;
 
   // Group data by question (outside the component)
   const questionGroups = Array.from(
-    d3.group(data, (d) => d.question).entries()
+    d3.group(responses, (d) => d.question).entries()
   );
 
   // Get unique response categories (sorted for consistent ordering)
-  const allResponses = [...new Set(data.map((d) => d.response))];
+  const allResponses = [...new Set(responses.map((d) => d.response))];
   const sortedResponses = allResponses.sort((a, b) => a - b);
 
   // Create scales