ReactでaddGraphQLSubscriptionsを使用できません。 "オブジェクト（...）が定義されていません"

Question

私は現在、graphqlとreactJSアプリケーションでサブスクリプションクライアントに'subscriptions-transport-ws'を使用しています。しかし、このコード行がObject(...) is not a function

を返すコードは次のとおりです。

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(); 

コードブレークで：

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
     networkInterface, 
     wsClient 
    ) 

私はこれをどのように修正すればよいですか？ 関連記事：https://github.com/apollographql/subscriptions-transport-ws/issues/169 https://github.com/apollographql/subscriptions-transport-ws/pull/272

Answer 1

彼らは今のようにそれを修正していないが、それで機能addGraphQLSubscriptionsが、推奨されません、あなたは

npm i --save add-graphql-subscriptions

を使用して、あなたのindex.jsアプリにインポートすることができます

import { addGraphQLSubscriptions } from 'add-graphql-subscriptions';

また、私が使用していたsubscriptions-transport-wsバージョン0.7も同様に動作します。

Answer 2

networkInterfaceとaddGraphQLSubscriptionsのサポートは、アポロの新しいapollo-linkのために削除されました。

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 
}); 

出典：

How to get Apollo 2.0 working with GraphQL + subscriptions

Apollo 2.0 w/subscriptions example app

（免責事項：私はこれらを書いた）

を

新しいクライアントコードは次のようになります