如何在React中为上传和订阅设置Apollo客户端？

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, HttpLink, split } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';

// 创建HTTP链接
const httpLink = new HttpLink({
  uri: 'https://your-graphql-endpoint.com/graphql',
});

// 创建WebSocket链接
const wsLink = new WebSocketLink({
  uri: 'wss://your-graphql-endpoint.com/graphql',
  options: {
    reconnect: true,
  },
});

// 使用split函数根据操作类型选择链接
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

// 创建Apollo客户端实例
const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

npm install apollo-upload-client

import { createUploadLink } from 'apollo-upload-client';

const uploadLink = createUploadLink({
  uri: 'https://your-graphql-endpoint.com/graphql',
});

const client = new ApolloClient({
  link: splitLink, // 使用之前的splitLink
  cache: new InMemoryCache(),
});

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import App from './App';

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

import React from 'react';
import { useQuery, useMutation, useSubscription } from '@apollo/client';
import { gql } from 'graphql-tag';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, name: $name) {
      id
      name
    }
  }
`;

const USER_UPDATED = gql`
  subscription UserUpdated($id: ID!) {
    userUpdated(id: $id) {
      id
      name
    }
  }
`;

function UserProfile({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  const [updateUser] = useMutation(UPDATE_USER);

  useSubscription(USER_UPDATED, {
    variables: { id: userId },
    onSubscriptionData: ({ subscriptionData }) => {
      console.log('User updated:', subscriptionData.data.userUpdated);
    },
  });

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

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
      <button onClick={() => updateUser({ variables: { id: userId, name: 'New Name' } })}>
        Update Name
      </button>
    </div>
  );
}

export default UserProfile;