TransWikia.com

TypeError: subscribeToMore is not a function

Stack Overflow en español Asked by ricardo leiva sikic on October 19, 2020

estoy teniendo problemas con una aplicacion en rails y react + graphql. En el lado del cliente estoy haciendo las configuraciones necesarias para poder empezar a usar action cable en una app react. pero cuando configuro la funcion subscribeToNewLinks que pasa como parametro subscribeToMore me aparece el error:

TypeError: subscribeToMore is not a function

esta funcion se llama desde render() y le pasa un prop es que subscribeToMore (reisando data me trae props aparece la funcion), pero aun asi me lanza el error. Mi codigo es el siguiente

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 1
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

import * as ActionCable from '@rails/actioncable'
import {ActionCableLink} from 'graphql-ruby-client'
import { ApolloLink } from 'apollo-link'



// 2
const httpLink = createHttpLink({
  uri: 'http://localhost:3000/graphql'
});

const cable = ActionCable.createConsumer()


const hasSubscriptionOperation = ({ query: { definitions } }) => {
  return definitions.some(
    ({ kind, operation }) => kind === 'OperationDefinition' && operation === 'subscription'
  )
}

const link = ApolloLink.split(
  hasSubscriptionOperation,
  new ActionCableLink({cable}),
  httpLink
);

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

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

serviceWorker.unregister();

En la vista que renderiza los users que estan en la tabla:

import React from 'react';

import { graphql } from 'react-apollo';
import * as compose from 'lodash.flowright';

import NEW_LINKS from './queries'

import queries from './queries';

class UserView extends React.Component {
  constructor(props) {
    console.log(props)
    super(props)
    this.state={}
  }

  
  _subscribeToNewLinks = subscribeToMore => {
    console.log('hello')

    subscribeToMore({
      document: NEW_LINKS,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev

        const newLink = subscriptionData.data.newLink

        return Object.assign({}, prev, {
          links: [newLink, ...prev.links],
          __typename: prev.links.__typename
        })
      }
    })
  }

  render() {
    const { allUsers: { allUsers }, subscribeToMore } = this.props;
    console.log(subscribeToMore)
    this._subscribeToNewLinks(subscribeToMore);

    return (
      <div className='link-container'>
          <div>
            <h1>renderer</h1>
            {allUsers && (
              allUsers.map((item, ix) => {
                return(
                  <h4 key={ix}>{item.name}</h4>
                )
              })
            )}
          </div>
        
      </div>
    )
  } 
}

export default compose(
  graphql(queries.allUsers, { name: 'allUsers' }),
  graphql(queries.newUsers, { name: 'newUsers' }),
)(UserView);

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP