如何在第一次挂载时使用apollo客户端在react js中多次调用同一查询

npm install @apollo/client graphql

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

const client = new ApolloClient({
  uri: 'https://your-graphql-server.com/graphql', // 替换为你的GraphQL服务器URL
  cache: new InMemoryCache(),
});

const GET_DATA = gql`
  query GetData {
    // 在这里编写你的查询
  }
`;

function MyComponent() {
  const { loading, error, data } = useQuery(GET_DATA, {
    client: client,
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  // 处理查询结果
  return (
    <div>
      {/* 在这里使用查询结果 */}
    </div>
  );
}

function MyComponent() {
  const { loading, error, data, refetch } = useQuery(GET_DATA, {
    client: client,
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  // 处理查询结果
  return (
    <div>
      {/* 在这里使用查询结果 */}
      <button onClick={() => refetch()}>重新加载数据</button>
    </div>
  );
}