时间戳

首页 > 解决方案 > Graphql订阅无法从反应本地主机客户端工作

reactjs - Graphql订阅无法从反应本地主机客户端工作

问题描述

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

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

标签： reactjsgraphqlsubscription

解决方案

我在与服务器的连接中发现了错误。

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

它应该是最后一个定义.操作而不是两个定义.种类

推荐阅读