Когда я подключаю больше клиентов в Apollo React, только последний клиент получает обновления подписок GraphQL - PullRequest
Новая
       52

Когда я подключаю больше клиентов в Apollo React, только последний клиент получает обновления подписок GraphQL

1 голос
/ 03 апреля 2020

Обычно, когда подключено более одного клиента, только последний подключенный клиент получает данные подписок GraphQL через веб-сокет.

Это не происходит со старыми классами React, это происходит только тогда, когда я использую функции без сохранения состояния через Apollo Hooks Provider. Я уже пробовал несколько методов, таких как subscribeToMore (который отлично работал с классами) или useSubscription и вообще все, что предлагается на этой странице https://www.apollographql.com/docs/react/data/subscriptions/.

Эти являются релевантными частями кода компонента, часть 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,
  ),
);
...