将ApolloClient ()移动到React组件的正确方法？

npm install @apollo/client react-apollo graphql

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

const client = new ApolloClient({
  uri: 'https://your-graphql-api-endpoint',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

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

const GET_DATA = gql`
  query {
    // Your GraphQL query here
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);

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

  // Render your component with the data
  return (
    <div>
      {/* Render your component */}
    </div>
  );
};