如何在 vanilla js 中创建 ApolloClient 订阅

Posted 2023-03-10

【中文标题】如何在 vanilla js 中创建 ApolloClient 订阅

【英文标题】：How to create an ApolloClient subscription in vanilla js

【发布时间】：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）测试时验证了订阅，所以我很确定问题出在上面的代码上。]

【参考方案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()
)