Apollo-client: Is it possible to use subscription without query?

[PetrSnobelt]

I try to create react component, which uses only one subscription, no query.
But If I do not add a query to component I do not have access to subscribeToMore fn.

Is there any way (sample) how to use subscription without query? All tutorials use a subscription with query.

As a workaround, I add dummy query to component and it looks like it works

Thanks

[goldo]

I'd also need this !

[jbaxleyiii]

@PetrSnobelt @goldo you can actually use a subscription directly with graphql and it will do this! I do agree we need to improve the docs on this! We are overhauling the docs and will work to add this

[PetrSnobelt]

@jbaxleyiii can you provide a sample, please?

[jbaxleyiii]

@PetrSnobelt I don't have one currently but if / when I come across one or we add it to the docs I'll update this issue!

[mgwidmann]

can you maybe explain more what you mean by "you can actually use a subscription directly with graphql"? I tried doing withApollo(MyComponent) and this.props.client doesnt have anything on it to subscribe with...

[mgwidmann]

I figured out what he meant here...

import { graphql } from 'react-apollo';
import SUBSCRIPTION_QUERY from './subscription.graphql';

export default graphql(SUBSCRIPTION_QUERY, {
   // Options here
   updateQuery: (prev, { subscriptionData }) => {
     // What to do when a broadcast occurs...
   }
});

[nascode]

Is subs with graphql like @mgwidmann example still working on v2?

We would love to use subs without query. Especially for global subs. Is there any example on this already? @jbaxleyiii

[goldo]

@jbaxleyiii @mgwidmann I haven't tried it on v1, but on v2 it doesn't seem to work. Have you got any hint for us ?
Thanks

[nascode]

Hi @goldo i used v2 and found the way to get subs directly without subscribeToMore. Make sure your apollo-link-ws and subscriptions-transport-ws is uptodate.

For example, here is one of my component:

const StreamAddedSubs = graphql(subsOnStreamAdded)(
  class extends Component {
    componentWillReceiveProps({
      data: { data: { onStreamAdded: newStream } }
    }) {
      console.log("STREAM ADDED SUBS", newStream);
    }

    render() {
      return null;
    }
  }
);

IMHO, using subs without subscribeToMore should be added to official doc to avoid confusion.

[kaanozcan]

Hello @jbaxleyiii @nascode Do you happen to know how to unsubscribe this way? I am currently querying fake data to be able to unsubscribe on demand using the returned method of subscribeToMore.

[mehmetnyarar]

I'm doing something like this but it doesn't work. What am I missing?

Prop item comes from the parent container and when there's a change on the item, I'd like update the parent container with new data.

PS: I don't use <Subscription /> component because of parent/child relation.

const withItemOnChanged = graphql<
  ItemProps, ItemChangedData, ItemChangedVars, ItemChangedProps>(
  ON_ITEM_CHANGED, {
    // shouldResubscribe: (props: ItemProps, nextProps: ItemProps) => {
    //   return true
    // },
    options: ({ item }) => ({
      variables: {
        itemId: item.id
      }
    }),
    props: ({ data, ownProps }) => {
      if (!data) return {}

      logger.loga('ON_ITEM_CHANGED', { data })
      const { itemChanged, loading, error } = data
      return { itemChanged, loading, error }
    }
  }
)

export default withItemOnChanged(Item)

[mehmetnyarar]

Above code actually works, I've just forgot to switch on my mock service 🙈.

In my case, it's also possible to use <Subscription /> component by defining onSubscriptionData={this.handleUpdate} prop:

handleUpdate = (options: OnSubscriptionDataOptions<ItemChangedProps>) => {
    console.log('handle update', { options })
 }