Reputation: 5196
I'm currently using 'subscriptions-transport-ws'
for a subscription client on my graphql and reactJS app. However this line of code returns Object(...) is not a function
The code is:
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { ApolloProvider, createNetworkInterface, ApolloClient } from 'react-apollo'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
const networkInterface = createNetworkInterface({
uri: '_GRAPHQL_END_POINT_'
})
const wsClient = new SubscriptionClient('_SUBSCRIPTION_END_POINT', {
reconnect: true,
})
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient
)
const client = new ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
})
ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</BrowserRouter>
, document.getElementById('root')
)
registerServiceWorker();
Where the code breaks at:
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient
)
How do I fix this? Relevant articles:https://github.com/apollographql/subscriptions-transport-ws/issues/169 https://github.com/apollographql/subscriptions-transport-ws/pull/272
Upvotes: 0
Views: 426
Reputation: 380
Support for networkInterface
and addGraphQLSubscriptions
has been dropped in favor of Apollo's new apollo-link
.
Your new client code will look something like this:
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import WebSocketLink from 'apollo-link-ws';
import Cache from 'apollo-cache-inmemory';
import { getOperationAST } from 'graphql';
const httpUri = '_GRAPHQL_END_POINT_';
const wsUri = '_SUBSCRIPTION_END_POINT';
const link = ApolloLink.split(
operation => {
const operationAST = getOperationAST(operation.query, operation.operationName);
return !!operationAST && operationAST.operation === 'subscription';
},
new WebSocketLink({
uri: wsUri,
options: {
reconnect: true, //auto-reconnect
// // carry login state (should use secure websockets (wss) when using this)
// connectionParams: {
// authToken: localStorage.getItem("authToken")
// }
}
}),
new HttpLink({ uri: httpUri })
);
const cache = new Cache(window.__APOLLO_STATE);
const client = new ApolloClient({
link,
cache
});
Sources:
How to get Apollo 2.0 working with GraphQL + subscriptions
Apollo 2.0 w/subscriptions example app
(Disclaimer: I wrote these)
Upvotes: 3
Reputation: 5196
So the function addGraphQLSubscriptions
is deprecated, although they haven't fixed it as of now, you can use
npm i --save add-graphql-subscriptions
and import it into your index.js app
import { addGraphQLSubscriptions } from 'add-graphql-subscriptions';
Also, I had to use subscriptions-transport-ws
version 0.7 as well to get it working.
Upvotes: 1