Как создать подписку ApolloClient в vanilla js - PullRequest
Новая
       12

Как создать подписку ApolloClient в vanilla js

0 голосов
/ 20 апреля 2020

Похоже, что по этому вопросу очень мало информации ... Я нашел статью ниже, и она мне близко, но она не работает:

Как создать подписку GraphQL с помощью клиента Apollo в ванили 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); }
              )

Я вижу данные в журнале в консоли (пусто, как я предполагаю, как ожидается) сразу после вызова подписки, но она никогда не запускается снова, когда срабатывает фактическая подписка, так что я что-то упустил здесь?

[Мутация, чтобы добавить элемент и вызвать publi sh сделано в другом месте, но этот (и мой сервер) работают нормально, так как я проверил подписку при тестировании с другого клиента (React), поэтому я почти уверен, что проблема в приведенном выше коде.]

1 Ответ

0 голосов
/ 21 апреля 2020

Я нашел проблему здесь, опечатка в 'ссылке' ApolloClient означала, что она была настроена только для 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()
})
...