如何在 Vanilla JS 中使用 Apollo Client 创建 GraphQL 订阅 [英] How do I create a GraphQL subscription with Apollo Client in Vanilla JS

问题描述

最近 Apollo Client 发布了一个 websocket 订阅功能，但到目前为止我只看到它通过在 componentWillMount 生命周期钩子内使用 subscribeToMore 启动查询来使用.

Recently Apollo Client released a websocket subscription feature, but so far I've only seen it used by launching a query using subscribeToMore inside the componentWillMount lifecycle hook.

这里是从 https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-client-side-40e185e4be76#0a8f

const messagesSubscription = gql`
  subscription messageAdded($channelId: ID!) {
    messageAdded(channelId: $channelId) {
      id
      text
    }
  }
`

componentWillMount() {
  this.props.data.subscribeToMore({
    document: messagesSubscription,
    variables: {
      channelId: this.props.match.params.channelId,
    },
    updateQuery: (prev, {subscriptionData}) => {
      if (!subscriptionData.data) {
        return prev;
      }
      const newMessage = subscriptionData.data.messageAdded;
      // don't double add the message
      if (!prev.channel.messages.find((msg) => msg.id === newMessage.id)) {
        return Object.assign({}, prev, {
          channel: Object.assign({}, prev.channel, {
            messages: [...prev.channel.messages, newMessage],
          })
        });
      } else {
        return prev;
      }
    }
  });
}

但是 subscribeToMore 特定于 Apollo Client React 集成.在 VanillaJS 中有一个 watchQuery，但它是声明它不应该用于订阅.还有一个 订阅 这可能是我正在寻找的内容，但没有记录.

But subscribeToMore is specific to Apollo Client React integration. In VanillaJS there is a watchQuery, but it's stated it should not be used for subscriptions. There is also a subscribe that might be what I'm searching for, but is not documented.

有没有办法使用 Apollo GraphQL 客户端来处理订阅，而无需在 React 组件内部?

Is there any way using Apollo GraphQL client to handle subscriptions, without being inside a React Component?

推荐答案

原来是 subscribe 方法.我在这里找到了一个描述:https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#eeba

Turns out it is the subscribe method. I found a description here: https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#eeba

ApolloClient.subscribe 接受一个查询和变量，并返回一个 observable.然后我们在 observable 上调用 subscribe，并给它一个调用 updateQuery 的 next 函数.updateQuery 指定在给定订阅结果时我们希望如何更新查询结果.

ApolloClient.subscribe takes a query and variables, and returns an observable. We then call subscribe on the observable, and give it a next function which will call updateQuery. updateQuery specifies how we want our query result to be updated when given the subscription result.

subscribe(repoName, updateQuery){
  // call the "subscribe" method on Apollo Client
  this.subscriptionObserver = this.props.client.subscribe({
    query: SUBSCRIPTION_QUERY,
    variables: { repoFullName: repoName },
  }).subscribe({
    next(data) {
      // ... call updateQuery to integrate the new comment
      // into the existing list of comments
    },
    error(err) { console.error('err', err); },
  });
}

这篇关于如何在 Vanilla JS 中使用 Apollo Client 创建 GraphQL 订阅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！