2017-06-29 55 views
0

我的組件正在調用訂閱查詢,但由於某種原因訂閱解析器未被訪問:其中的斷點永遠不會被激活。但在客戶端上,我收到GraphQL訂閱錯誤:阿波羅訂閱解析器永不激活?

"Subscription must return Async Iterable. Received: undefined"

什麼可能導致這種情況?

在此先感謝所有的任何信息。

認購QUERY

const IM_SUBSCRIPTION_QUERY = gql` 
     subscription getIMsViaSubscription($fromID: String!, $toID: String!){ 
      IMAdded(fromID:$fromID, toID: $toID){ 
      id, 
      fromID, 
      toID, 
      msgText, 
      myUserData{ 
       id, 
       name_first, 
       name_last, 
       picture_large, 
       picture_medium, 
       picture_thumbnail 
       my_category 
      } 
      } 
     } 
`; 

RESOLVER

Subscription: { 
    IMAdded(IMThatWasAdded) { 
     debugger; <== IS NEVER ACTIVATED 
     subscribe: withFilter(() => SubscriptionServer.pubsub.asyncIterator(IM_ADDED_CHANNEL), (newIM, args) => { 
      const callIsFromMsgFoldersComponent = args.toID == 0; 
      var result; 
      if (callIsFromMsgFoldersComponent){ 
       result = (newIM.fromID === args.fromID || newIM.toID === args.fromID); 
      } else { 
       result = ((newIM.fromID === args.fromID && newIM.toID === args.toID) || (newIM.fromID === args.toID && newIM.toID === args.fromID)); 
      } 
      return result; 
     }) 

COMPONENT

const withDataAndSubscription = graphql(GETIMS_QUERY, { 
    options({toID}) { 
     console.log(GETIMS_QUERY); 
     const fromID = Meteor.userId(); 
     return { 
      fetchPolicy: 'cache-and-network', 
      variables: {fromID: `${fromID}`, toID: `${toID}`} 
     }; 
    } 
    , 
    props: props => { 
     debugger; 
     return { 
      loading: props.data.loading, 
      instant_message: props.data.instant_message, 
      subscribeToMore: props.data.subscribeToMore, 
      subscribeToNewIMs: params => { 
       debugger; <==IS ACTIVATED AS EXPECTED 
       console.log(IM_SUBSCRIPTION_QUERY); <==IS OKAY 
       const fromID = Meteor.userId(); 
       const toID = params.toID; 
       return props.data.subscribeToMore({ 
        document: IM_SUBSCRIPTION_QUERY, 
        variables: {fromID: `${fromID}`, toID: `${toID}`}, 
        updateQuery: (previousResult, {subscriptionData}) => { 
         if (!subscriptionData.data) { 
          return previousResult; 
         } 
         const newMsg = subscriptionData.data.createIM; 
         return update(previousResult, { 
          instant_message: { 
           $push: [newMsg], 
          }, 
         }); 
        } 
       }); 
      } 
     }; 
    }, 
}) 
; 
+0

你是否初始化'pubsub'服務的一個實例? 您是否在服務器訂閱功能中嘗試使用console.log? –

+0

感謝您的輸入。事實上,它變成了需要改變的服務器設置。我將發佈修復它的服務器端代碼。 – VikR

回答

0

服務器-SID e設置和突變/訂閱解析器已經發生了很大的變化,因爲我的帖子中的代碼是基於去年年底Apollo libs的。下面是代碼,與當前的阿波羅庫工作,通過this tutorial

服務器設置

import express from 'express'; 
import { graphqlExpress, graphiqlExpress } from 'graphql-server-express'; 
import bodyParser from 'body-parser'; 
import cors from 'cors'; 
import { execute, subscribe } from 'graphql'; 
import { createServer } from 'http'; 
import { SubscriptionServer } from 'subscriptions-transport-ws'; 

import schema from '/imports/api/schema'; 

//SET UP APOLLO QUERY/MUTATIONS/PUBSUB 
const METEOR_PORT = 3000; 
const GRAPHQL_PORT = 4000; 
const server = express(); 

server.use('*', cors({ origin: 'http://localhost:${METEOR_PORT}' })); 

server.use('/graphql', bodyParser.json(), graphqlExpress({ 
    schema 
})); 

server.use('/graphiql', graphiqlExpress({ 
    endpointURL: '/graphql', 
    subscriptionsEndpoint: `ws://localhost:${GRAPHQL_PORT}/subscriptions` 
})); 

// Wrap the Express server 
const ws = createServer(server); 
ws.listen(GRAPHQL_PORT,() => { 
    console.log(`GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`); 
    // Set up the WebSocket for handling GraphQL subscriptions 
    new SubscriptionServer({ 
     execute, 
     subscribe, 
     schema 
    }, { 
     server: ws, 
     path: '/subscriptions', 
    }); 
}); 
//END OF SET UP APOLLO PUBSUB 

突變RESOLVER

Mutation: { 
     createIM(root, args, context) { 
      var associatedUsers = []; 
      associatedUsers.push(args.fromID); 
      associatedUsers.push(args.toID); 
      var IDofNewIM; 

      return Promise.resolve() 
       .then(() => { 
        const newIM = connectors.IMs.create(args); 
        return newIM; 
       }) 
       .then(IMAdded => { 
        // publish subscription notification 
        pubsub.publish(IM_ADDED_CHANNEL, { IMAdded, args}); 
        return IMAdded; 
       }) 
       .catch((err)=> { 
        console.log(err); 
       }); 
     }, 

認購RESOLVER

IMAdded: { 
    subscribe: withFilter(
     () => pubsub.asyncIterator(IM_ADDED_CHANNEL), 
     (IMAdded, args) => { 
      IMAdded = IMAdded.IMAdded; 
      var result = ((IMAdded.fromID === args.fromID && IMAdded.toID === args.toID) || (IMAdded.fromID === args.toID && IMAdded.toID === args.fromID)); 
      return result; 
     } 
    ) 
},