在React中使用ApolloClient进行AppSync订阅

import React from 'react';
import { ApolloClient, InMemoryCache, gql, useSubscription } from '@apollo/client';

// 创建ApolloClient实例
const client = new ApolloClient({
  uri: 'YOUR_APPSYNC_API_URL',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'YOUR_APPSYNC_API_KEY',
  },
});

// 定义GraphQL订阅
const SUBSCRIBE_TO_UPDATES = gql`
  subscription OnUpdateData {
    onUpdateData {
      id
      name
      value
    }
  }
`;

// React组件
function App() {
  // 使用useSubscription hook订阅数据更新
  const { data, loading, error } = useSubscription(SUBSCRIBE_TO_UPDATES);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data && data.onUpdateData && (
        <div>
          <h2>{data.onUpdateData.name}</h2>
          <p>{data.onUpdateData.value}</p>
        </div>
      )}
    </div>
  );
}

export default App;