如何在react钩子中使用graphql钩子集成多个客户端

npm install @apollo/client react-apollo

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client1 = new ApolloClient({
  uri: 'http://example.com/graphql1', // GraphQL服务端地址
  cache: new InMemoryCache(),
});

const client2 = new ApolloClient({
  uri: 'http://example.com/graphql2', // 另一个GraphQL服务端地址
  cache: new InMemoryCache(),
});

export { client1, client2 };

import { useQuery } from '@apollo/client';
import { client1, client2 } from './client';

const MyComponent = () => {
  // 使用client1的GraphQL钩子
  const { loading: loading1, data: data1 } = useQuery(query1, { client: client1 });
  
  // 使用client2的GraphQL钩子
  const { loading: loading2, data: data2 } = useQuery(query2, { client: client2 });

  if (loading1 || loading2) {
    return <div>Loading...</div>;
  }

  // 使用data1和data2进行渲染
  return (
    <div>
      <h1>Data from Client 1:</h1>
      <pre>{JSON.stringify(data1, null, 2)}</pre>

      <h1>Data from Client 2:</h1>
      <pre>{JSON.stringify(data2, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;