subscriptions-transport-wsを使用してApolloサーバを設定しますか？

Question

アポロのドキュメントに従ってサーバーを設定しているようです（http://dev.apollodata.com/tools/apollo-server/setup.html）。自分のサーバー/ main.jsファイルで：

//SET UP APOLLO INCLUDING APOLLO PUBSUB 
const executableSchema = makeExecutableSchema({ 
    typeDefs: Schema, 
    resolvers: Resolvers, 
    connectors: Connectors, 
    logger: console, 
}); 

const GRAPHQL_PORT = 8080; 
const graphQLServer = express(); 

// `context` must be an object and can't be undefined when using connectors 
graphQLServer.use('/graphql', bodyParser.json(), apolloExpress({ 
    schema: executableSchema, 
    context: {}, //at least(!) an empty object 
})); 

graphQLServer.use('/graphiql', graphiqlExpress({ 
    endpointURL: '/graphql', 
})); 

graphQLServer.listen(GRAPHQL_PORT,() => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql` 
)); 
//SET UP APOLLO INCLUDING APOLLO PUBSUB 

これは、サーバーが正常に初期化されたことを示す端末のログに「GraphQL Serverは今http://localhost:8080/graphql上で実行されている」出力します。

しかし、私のmain_layoutコンポーネントの上部に、私はこのコードを実行すると：// localhostを：「WSへ

のWebSocket接続：

import { Client } from 'subscriptions-transport-ws'; 
const wsClient = new Client('ws://localhost:8080'); 

を...私はこのコンソールメッセージが表示されます：8080/'失敗：ハンドシェイク応答を受信する前に接続が閉じられました

何が欠けていますか？

Answer 1

専用のwebsocketサーバーを作成する必要があります。別のポートで実行され、設定するコードはsubscriptions-transport-wsパッケージに提供されています。

GitHunt-APIの例から、次のコードで見てみましょう： https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

はまた、あなたは、このコードはSubscriptionManagerというクラスに依存していることがわかります。これは、パッケージのクラスはアポロチームによってもgraphql-subscriptionsと呼ばれ、あなたはここでそれを使用する方法の例を見つけることができます：https://github.com/evolastech/todo-react：ここ https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js

Answer 2

は&ハピ反応し、アポロGraphQLの使用方法についてのデモです。それは

Answer 3

TL & GitHunt-APIをGitHuntが反応するよりも圧倒です; DR：あなたはすぐにサブスクリプションを持つGraphQLサーバが起動して準備をサポートして取得するためにgraphql-upを使用することができます。ここでは、これをApolloとwebsocketクライアントsubscriptions-transport-wsと組み合わせて使用​​するともっとdetailed tutorialです。

ワンクリックでGraphQLサーバーを取得

は、あなたがこのGraphQL Schema in IDL syntaxに基づいTwitterのクローンを構築したいとしましょう：

type Tweet { 
    id: ID! 
    title: String! 
    author: User! @relation(name: "Tweets") 
} 

type User { 
    id: ID! 
    name: String! 
    tweets: [Tweet!]! @relation(name: "Tweets") 
} 

独自のGraphQLのAPIを受信するには、このボタンをクリックしてくださいプレイグラウンドを開き、いくつかのつぶやきを追加したり、すべてのつぶやきをクエリしたり、購読をテストしたりすることができます。

API

ファーストを簡単に使用できる、のは、すべての来ツイートための著者となるユーザーを作成してみましょう。遊び場にこの変異を実行します。

mutation createUser { 
    createUser(name: "Tweety") { 
    id # copy this id for future mutations! 
    } 
} 

は、ここでは、あなたのGraphQLサーバーに保存されているすべてのツイートとその作者を問い合わせる方法は次のとおりです。WebSocketをに

を使用して

query allTweets { 
    allTweets { 
    id 
    title 
    createdAt 
    author { 
     id 
     name 
    } 
    } 
} 

サブスクリプションのサポートは、今度は新しいツイートをサブスクライブしてみましょう「Tweety」から。これは、構文は次のとおりです。

subscription createdTweets { 
    Message(filter: { 
    mutation_in: [CREATED] 
    node: { 
     author: { 
     name: "Tweety" 
     } 
    } 
    }) { 
    node { 
     id 
     text 
     createdAt 
     sentBy { 
     id 
     name 
     } 
    } 
    } 
} 

は今すぐプレイグラウンドで新しいタブを作成し、新しいツイートを作成します。

mutation createTweet { 
    createTweet(
    title: "#GraphQL Subscriptions are awesome!" 
    authorId: "<id-from-above>" 
) { 
    id 
    } 
} 

あなたは新しいイベントが以前に登録し、あなたの他のタブでポップアップ表示されるはずです。

Answer 4

実際にwebsocketサーバーを作っていないようです。 SubscriptionServerを使用します。 davidyahaが言うように、専用のwebsocketポート（私はこれも一度考えました）を持たなければならないことは絶対に真実ではありません。私は通常のクエリと同じポート上のsubsの両方を持っています。

import { createServer } from 'http'; 
import { SubscriptionServer } from 'subscriptions-transport-ws'; 
import { execute, subscribe } from 'graphql'; 
import { schema } from './my-schema'; 

// All your graphQLServer.use() etc setup goes here, MINUS the graphQLServer.listen(), 
// you'll do that with websocketServer: 

// Create WebSocket listener server 
const websocketServer = createServer(graphQLServer); 

// Bind it to port and start listening 
websocketServer.listen(3000,() => console.log(
    `Server is now running on http://localhost:3000` 
)); 

const subscriptionServer = SubscriptionServer.create(
    { 
    schema, 
    execute, 
    subscribe, 
    }, 
    { 
    server: websocketServer, 
    path: '/subscriptions', 
    }, 
);