Apollo 2.x graphIQL无法达到订阅?

时间:2018-04-21 19:49:28

标签: graphql apollo apollo-server graphiql

我的Apollo查询和突变工作正常。现在我添加了订阅,出于某种原因,graphIql(请注意图中的I I ql)无法触发订阅。订阅中的断点不会激活,数据会以null的形式返回到graphIql。 graphIql中没有控制台日志错误。

以下是相关代码:

类型

type Resolution {
  _id: String!
  name: String!
  goals: [Goal]
  completed: Boolean
}

type Query {
  resolutions: [Resolution]
  getResolutionViaId(resolutionId: String!): Resolution
}

type Mutation {
  createResolution(name: String!): Resolution
}

type Subscription {
  resolutionWasAdded: Resolution
}

解析器

Subscription: {
    resolutionWasAdded: {
        subscribe: () => pubsub.asyncIterator(RESOLUTION_SUBSCRIPTION_TOPIC)
    }
}

在GRAPHIQL中查询

subscription resolutionWasAdded {
  resolutionWasAdded {
    __typename
    _id
    name

    completed
  }
}

GRAPHIQL响应

{
  "data": {
    "resolutionWasAdded": null
  }
}

我能错过什么?

更新

我看到我需要设置graphIql以了解我的订阅端点。我已经搜索了相当多的内容但是还没有看到如何使用此客户端设置:

import React from "react";
import {Meteor} from "meteor/meteor";
import {render} from "react-dom";
import {ApolloProvider} from "react-apollo";
import {ApolloLink, from} from "apollo-link";
import {ApolloClient} from "apollo-client";
import {HttpLink} from "apollo-link-http";
import {InMemoryCache} from "apollo-cache-inmemory";
import {onError} from 'apollo-link-error';
import {split} from 'apollo-link';
import {WebSocketLink} from 'apollo-link-ws';
import {getMainDefinition} from 'apollo-utilities';
import {toIdValue} from 'apollo-utilities';

import App from "../../ui/App";

// Create an http link:
const httpLink = new HttpLink({
    uri: Meteor.absoluteUrl("graphql"),
    credentials: 'same-origin'
})

// Create a WebSocket link:
const wsLink = new WebSocketLink({
    uri: `ws://localhost:3200/subscriptions`,
    options: {
        reconnect: true
    }
});

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const splitLink = split(
    // split based on operation type
    ({query}) => {
        const {kind, operation} = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLink,
);

const authLink = new ApolloLink((operation, forward) => {
    const token = Accounts._storedLoginToken();
    operation.setContext(() => ({
        headers: {
            "meteor-login-token": token
        }
    }));
    return forward(operation);
});


const client = new ApolloClient({
    link: ApolloLink.from([
        onError(({graphQLErrors, networkError}) => {
            if (graphQLErrors)
                graphQLErrors.map(({message, locations, path}) =>
                    console.log(
                        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
                    ),
                );
            if (networkError) console.log(`[Network error]: ${networkError}`);
        }),
        authLink,
        splitLink,
     ]),
    cache: new InMemoryCache({})
});

const ApolloApp = () => (
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>
);

Meteor.startup(() => {
    render(<ApolloApp/>, document.getElementById("app"));
});

修改此设置的正确方法是什么,以便告诉graphIql有关订阅端点的信息?

0 个答案:

没有答案