import { ConvexReactClient } from "convex/react";

const clientA = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_A);
const clientB = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_B);

import { ConvexReactClient } from "convex/react";

const clientA = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_A);
const clientB = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_B);

import { ConvexProvider } from "convex/react";

function App() {
  return (
    <ConvexProvider client={clientA}>
      <ConvexProvider client={clientB}>
        {/* Your app components */}
      </ConvexProvider>
    </ConvexProvider>
  );
}

import { ConvexProvider } from "convex/react";

function App() {
  return (
    <ConvexProvider client={clientA}>
      <ConvexProvider client={clientB}>
        {/* Your app components */}
      </ConvexProvider>
    </ConvexProvider>
  );
}

import { useQuery } from "convex/react";
import { api as apiA } from "./convex_a/_generated/api";
import { api as apiB } from "./convex_b/_generated/api";

function MyComponent() {
  const resultA = useQuery(apiA.myQueryA, { arg1: "value1" });
  const resultB = useQuery(apiB.myQueryB, { arg2: "value2" });

  return (
    // Render your component using resultA and resultB
  );
}

import { useQuery } from "convex/react";
import { api as apiA } from "./convex_a/_generated/api";
import { api as apiB } from "./convex_b/_generated/api";

function MyComponent() {
  const resultA = useQuery(apiA.myQueryA, { arg1: "value1" });
  const resultB = useQuery(apiB.myQueryB, { arg2: "value2" });

  return (
    // Render your component using resultA and resultB
  );
}