1

基本上，当连接了多个客户端时，只有最后一个连接的客户端通过 Web 套接字接收 GraphQL 订阅数据。

旧的 React 类不会发生这种情况，只有当我通过 Apollo Hooks Provider 使用无状态函数时才会发生这种情况。我已经尝试了几种方法，例如subscribeToMore（与类完美配合），或者一般来说，此页面https://www.apollographql.com/docs/react/data/subscriptions/useSubscription上建议的所有方法。

这些是组件代码的相关部分，subscribeToMore 部分基本上是从旧的 React 类复制粘贴的，它在同一个项目中完美地工作。

（如果缺少函数或变量，那只是因为我避免发布很多混乱，代码已经过测试并且运行时没有错误，除了订阅问题）

import React, { useEffect, useState } from 'react';
import { compose } from 'redux';
// other imports

function CommentsPanel(props) {
  const { loading, documentComments: comments } = commentsQuery;
  const [subscribed, setSubscribed] = useState(false);
  useEffect(() => {
    if (loading || comments == null || subscribed) return;
    console.log(commentsQuery);
    commentsQuery.subscribeToMore({
      document: ON_COMMENT_ADDED,
      variables: {
        documentId: projectId,
        userId: Meteor.userId(),
      },
      updateQuery: (previousResult, { subscriptionData }) => {
        console.log('On comment added subscription');
        return {
          ...previousResult,
          documentComments: [
            subscriptionData.data.commentAdded,
            ...previousResult.documentComments,
          ],
        };
      },
    });
    // other similar subscriptions
    setSubscribed(true);
  }, [loading, comments, subscribed, commentsQuery, projectId]);


     //render and a bunch of other stuff

export default compose(
  graphql(DOCUMENT_COMMENTS, {
    name: 'commentsQuery',
    options: ({ projectId }) => ({
      variables: {
        documentId: projectId,
      },
    }),
  }),
  withStyles(styles),
)(CommentsPanel);

这是客户

import React from 'react';
import 'babel-polyfill';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { hydrate } from 'react-dom';
import { BrowserRouter, Switch } from 'react-router-dom';
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import { ApolloProvider } from 'react-apollo';
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import { Accounts } from 'meteor/accounts-base';
import { Meteor } from 'meteor/meteor';
import { Bert } from 'meteor/themeteorchef:bert';
import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
import reducerApp from '../../reducers';
import apolloClient from './apollo';
import App from '../../ui/layouts/App';
import theme from '../theme';

Bert.defaults.style = 'growl-bottom-right';

Accounts.onLogout(() => apolloClient.resetStore());

const store = createStore(reducerApp);

const rootElement = document.getElementById('react-root');

Meteor.startup(() =>
  hydrate(
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <ApolloProvider client={apolloClient}>
        <ApolloHooksProvider client={apolloClient}>
          <Provider store={store}>
            <BrowserRouter>
              <Switch>
                <App />
              </Switch>
            </BrowserRouter>
          </Provider>
        </ApolloHooksProvider>
      </ApolloProvider>
    </MuiThemeProvider>,
    rootElement,
  ),
);
4

0 回答 0