Question

每个人我都希望你做得很好。我运行订阅时遇到问题，实际上是我的订阅

subscription ($id: Int!) {
    notify_invite(id: $id) {
            id,
            from { id, fullname, email, phone, special, email, admin, viewer },
            to   { id, fullname, email, phone, special, email, admin, viewer },
            accepted,
            deleted
    }
}

从redis-pubsub检索邀请通知，在使用http：// localhost：4000 / graphql时可以完美地工作，但是直到使用localhost：3000时，它才不再可用。

Subscription: {
    notify_invite: { subscribe: () => pubsub.asyncIterator(['notify_invite']), resolve: (payload, variables) => { if(payload && payload.notify_invite) { return payload.notify_invite; } } },
},

我的客户就这样设置

const httpLink    = createHttpLink    ({ uri: config.host.graphql, fetch: fetch });
const middleware  = new ApolloLink  ((operation, forward) => { operation.setContext({ headers: { Authorization: `Bearer ${token}` }}); operation.token = token; return forward(operation); });
const websocket   = new WebSocketLink ({ uri: `ws://${config.host.ws}`, options: { reconnect: true, connectionParams: { Authorization: `Bearer ${token}` } } });
const splitlink   = split(({ query }) => { const definition = getMainDefinition(query); return(definition.kind === 'OperationDefinition' && definition.kind === 'subscription'); }, websocket, httpLink);
const link        = new ApolloClient({ connectToDevTools: true, link: concat(middleware, splitlink), cache: new InMemoryCache() });

我的Redis pubsub配置如下：

const options = {
    host: host.redis.host,
    port: host.redis.port,
    retryStrategy: times => { return Math.min(times * 50, 2000); },
}

const redis_client = new Redis(options); 
const redis_subscriber = new Redis(options);

export const pubsub = new RedisPubSub({
    publisher:  redis_client,
    subscriber: redis_subscriber
});

在我的屏幕上，我这样使用subscribeToMore：

subscribeToMore({
        document:  notify_invite,
        variables: { id: this.props.account.account.id },
        updateQuery: (prev, { subscriptionData }) => { console.log(subscriptionData.data);
            if(!subscriptionData.data) return prev;
            if(!subscriptionData.data.notify_invite) return prev;
                const { invite } = subscriptionData.data.notify_invite;
                return Object.assign({}, prev, { data: { invites: [invite, ...prev.invites] } });
        }
    })

并且我使用像这样的查询组件。

<Query query={account} variables={{ id: this.props.account.account.id }}>
{ (result) => { this.notification(result.subscribeToMore);

Answer 1

我发现与服务器的连接有误。

const splitlink   = split(({ query }) => { const definition = getMainDefinition(query); return(definition.kind === 'OperationDefinition' && definition.operation === 'subscription'); }, websocket, httpLink);

应该是最后一个definition.operation，而不是两个definition.kind

Graphql订阅无法在React localhost客户端上运行

1 个答案: