如何在React中使用GraphQL訂閱實現實時數據更新

在React中使用GraphQL訂閱實現實時數據更新的步驟如下：

1. 安裝所需的庫： 首先需要安裝相關的庫。可以使用apollo-client和@apollo/react-hooks來與GraphQL服務端通信，以及subscriptions-transport-ws用于訂閱實時更新。

npm install @apollo/client @apollo/react-hooks subscriptions-transport-ws

2. 配置Apollo Client： 在React應用的根組件中配置Apollo Client。包括設置GraphQL服務端的URL和WebSocket鏈接。

import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { ApolloProvider } from '@apollo/react-hooks';

const httpLink = createHttpLink({
  uri: 'http://your-graphql-server-url',
});

const wsLink = new WebSocketLink({
  uri: 'ws://your-graphql-server-url',
  options: {
    reconnect: true
  }
});

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

const App = () => (
  <ApolloProvider client={client}>
    <YourComponent />
  </ApolloProvider>
);

3. 訂閱數據更新： 在需要實時更新數據的組件中使用useSubscription鉤子來訂閱數據更新。

import { useSubscription } from '@apollo/react-hooks';
import { gql } from '@apollo/client';

const SUBSCRIPTION_QUERY = gql`
  subscription {
    yourSubscription {
      id
      data
    }
  }
`;

const YourComponent = () => {
  const { data, loading } = useSubscription(SUBSCRIPTION_QUERY);

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

  return (
    <div>
      <p>ID: {data.yourSubscription.id}</p>
      <p>Data: {data.yourSubscription.data}</p>
    </div>
  );
};

通過以上步驟，就可以在React中使用GraphQL訂閱實現實時數據更新了。當GraphQL服務端的數據發生變化時，React組件會自動更新顯示最新的數據。