如何在React中使用GraphQL訂閱實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)更新

在React中使用GraphQL訂閱實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)更新的步驟如下：

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

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

2. 配置Apollo Client： 在React應(yīng)用的根組件中配置Apollo Client。包括設(shè)置GraphQL服務(wù)端的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. 訂閱數(shù)據(jù)更新： 在需要實(shí)時(shí)更新數(shù)據(jù)的組件中使用useSubscription鉤子來訂閱數(shù)據(jù)更新。

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訂閱實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)更新了。當(dāng)GraphQL服務(wù)端的數(shù)據(jù)發(fā)生變化時(shí)，React組件會(huì)自動(dòng)更新顯示最新的數(shù)據(jù)。