如何在 vanilla js 中创建 ApolloClient 订阅答案

【问题标题】：How to create an ApolloClient subscription in vanilla js如何在 vanilla js 中创建 ApolloClient 订阅
【发布时间】：2020-08-02 21:57:10
【问题描述】：

这方面的可用信息似乎很少......我找到了下面的文章，它让我很接近但它不起作用：

How do I create a GraphQL subscription with Apollo Client in Vanilla JS

那个帖子有点老了，我正在使用 apollo 客户端 v2.6.8，这是我的代码：

           const subs = gql`
           subscription onItemAdded 
           {
              itemAdded {
               ItemName
              }
           }`

           var subscriptionObserver = apolloClient.subscribe({
                 query: subs
              })
              .subscribe(
                 data => {
                    console.log('Data', data);
                    //See comment below ********
                 },
                 err => { console.error('Error', err); }
              )

我在调用 subscribe 后立即看到控制台中记录的数据（如预期的那样是空的），但是当实际订阅触发时它永远不会再次触发，所以我在这里遗漏了什么？

[添加项目并触发发布的突变在其他地方完成，但是这个（和我的服务器）工作正常，因为我在从另一个客户端（React）测试时验证了订阅，所以我很确定问题出在上面的代码上。]

【问题讨论】：

标签： javascript graphql apollo-client

【解决方案1】：

我在这里发现了问题，ApolloClient 'link' 中的一个错字意味着它只为 http 设置，我可以确认上面的代码与下面的配置配合得很好：

const httpLink = createHttpLink({
    uri: "http://zzzzzzzzzzzz"
})

const wsLink = new WebSocketLink({
    uri: "ws://zzzzzzzzzzzzz",
    timeout: 5000,
    options: {
      reconnect: true
    }
});

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

const apolloClient = new ApolloClient({
    link: link,
    cache: new InMemoryCache()
})

【讨论】：