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);
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP