Kevin Danikowski
Kevin Danikowski

Reputation: 5196

Can't use addGraphQLSubscriptions in React, states "Object(...) not defined)"

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

Answers (2)

Michael Brook
Michael Brook

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

Kevin Danikowski
Kevin Danikowski

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

Related Questions