Как создать подписку GraphQL с Apollo Client на Vanilla JS

Недавно Apollo Client выпустил функцию подписки на веб-сокеты, но до сих пор я видел ее использование только при запуске запроса с помощью subscribeToMore внутри ловушки жизненного цикла componentWillMount.

Вот пример из 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, но это заявил, что он не должен использоваться для подписок. Также существует подписка Это может быть то, что я ищу, но это не задокументировано.

Есть ли способ использовать клиент Apollo GraphQL для обработки подписок, не находясь внутри компонента React?


javascript graphql apollo apollo-client
person xabitrigo    schedule 15.07.2017    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Оказывается, это метод подписки. Я нашел здесь описание: https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#eeba.

ApolloClient.subscribe принимает запрос и переменные и возвращает наблюдаемое. Затем мы вызываем subscribe для наблюдаемого и даем ему следующую функцию, которая вызовет updateQuery. updateQuery указывает, как мы хотим обновлять результат нашего запроса при получении результата подписки.

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); },
  });
}
person xabitrigo    schedule 20.07.2017
comment
API для клиентских подписок действительно сложно найти. Я использую response-apollo 2.5.5, и кажется, что теперь синтаксис изменился на next({ data }). Однако вы не получаете никакого состояния загрузки, как в случае с компонентом Subscription. - person Paul Razvan Berg; 26.05.2019
comment
Что здесь data? - person Amanda; 16.04.2020