Vue Apollo subscription not updating the query

Question

It's my first time implementing a GraphQL subscription, so excuse me if it's an obvious question.

I have a subscription which is working with Simple Subscription approach, but doesn't work with SubscribeToMore Here are both calls.

Simple Subscription:

    $subscribe: {
      onTransactionChanged: {
        query: ON_TRANSACTION_CHANGED,
        variables() {
          return {
            profileId: this.profile.profileId,
          };
        },
        skip() {
          return !this.profile?.profileId;
        },
        result({ data }: any) {
          console.log(data.onTransactionChanged);
        },
      },
    },

In this case, I see a new transaction in the console.

SubscribeToMore:

    cartProducts: {
      query: GET_CART_PRODUCTS,
      loadingKey: "loading",
      subscribeToMore: {
        document: ON_TRANSACTION_CHANGED,
      },
      updateQuery: (previousResult: any, { subscriptionData }: any) => {
        console.log("previousResult:", previousResult);
        console.log("subscriptionData:", subscriptionData);
      },
      variables() {
        return {
          profileId: this.profile.profileId,
        };
      },
      skip() {
        return !this.profile?.profileId;
      },
    }

In this case, there is nothing in the console. What am I doing wrong? Thank you in advance.

Answer 1

I just missed the curly braces scope. It's working

cartProducts: {
  query: GET_CART_PRODUCTS,
  loadingKey: "loading",
  subscribeToMore: {
        document: ON_TRANSACTION_CHANGED,
        updateQuery(previousResult: any, { subscriptionData }: any) {
          console.log("previousResult:", previousResult);
        },
        variables() {
          return {
            profileId: this.profile.profileId,
          };
        },
        skip() {
          return !this.profile?.profileId;
        },
      }
}