@sorenbs commented on @theom’s file : Hi @theom Can you try to start the same subscription from the Playground on console.graph.cool to verify that the query is correct?

@riconegri @bouncetribe @hardys @jt9001 @sfteague hello there and welcome to graphcool thanks for joining us! 🙇 🙂

Just created my first schema ^^ pretty cool

Hey cool guys ! 😄

guys and girls 😉 hey @samuell 👋 welcome to graphcool and our slack! 🎉

https://demo.graph.cool/worldchat/ is broken ? 😄

@theom commented on @theom’s file : @sorenbs Yes. The subscription activates successfully from playground when the mutation is triggered from my app.

@theom commented on @theom’s file : The subscription in question is:

export const Subscription_Add_Delete_Comment_Query = gql`
  subscription CreateDeleteComment {
    Comments(
      filter: {
        mutation_in: [CREATED, DELETED]
      }
    ) {
      node {
        id
        text
        user
        deleted
        posts {
          id
        }
      }
    }
  }
`;

@rtowarek commented on @rtowarek’s file : @sorenbs Yup. Here it is: https://github.com/graphcool/console/issues/868

@sorenbs commented on @theom’s file : Maybe @tim can spot the issue? (the query works in the playground)

Hi, I remember people having problems in the past when naming their fields ending with Id. For e.g CustomerId, OrderId and trying to map the relation with other models. Is that still an issue?

Wave @dunghd.it @pettanko @danielvdm welcome!

Hi there, thanks for the invite.

hi

@tim2 commented on @theom’s file : @theom I can’t see the issue in the code on the first sight. It’s obvious that the issue is the code and not the subscription query itself. 2 things that you can do to gain more insight: 1. in the chrome devtools it’s great that you’re already in the WS tab. From there please click on the one request to our api. you will see all ws messages that have been sent. Please post us a screenshot of that so we can see if that part works correctly. 2. option: provide us a link to reproducible example, so we can test it (you can send me that per PM)

hi @richashby great to see you here! hello @vitaliiznak as well 🙌 graphcool

@tim2 As requested, and please excuse me starting a new thread as I can't figure out how to attach an image to an ongoing thread?, I have attached the websocket image you requested. I obtained the code to establish a websocket from https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/#setting-up-the-apollo-client-to-use-subscriptions

@tim2 commented on @theom’s file : @theom awesome! One last wish: Please click on

Frames

and screenshot that one

@tim2 As requested I have attached the frames screenshot.

@tim2 commented on @theom’s file : @theom perfect! As you can see there comes a

data

event, so the subscription works 🙂 Now we need to find out why the callback in apollo is not called

Hi! I'm trying to create a new permission without any custom Permission Query (just a basic read for everyone) but the UI seems to prevent this?

@tim2 commented on @theom’s file : @theom Ok so the most important point why you don’t see any change is because in

updateQuery

you currently return the

previousState

. Actually you need to merge the new data into the previous state and return that new merged object.

@tim2 commented on @sdubois’s file : Oops, thats a responsiveness issue, we should make it possible for smaller screen sizes. **cmd**+ - to make the site smaller in chrome should be a quick fix

@theom commented on @theom’s file : @tim2 Ok, So I have made a minor adjustment to my code, but I thought, and as previousState is already correctly reflecting changes made by the mutations, all I needed to do was to return previousState as is? My currecnt code is as follows:

isDuplicateComment(newComment, existingComments) {
    let duplicateComment = false;
    existingComments.forEach((comment) => {
      if (newComment.id !== null && newComment.id === comment.id) {
        duplicateComment = true;
      }
    });
    console.log('duplicateComment = ', duplicateComment);
    return duplicateComment;
  },
  subscribe() {
    const postIndexID = this.props.postIndexID;

    return this.subscriptionObserver = this.props.data.subscribeToMore({
      document: Subscription_Add_Delete_Comment_Query,
      updateQuery: (previousState, {subscriptionData}) => {
        // The mutations allways update the Root_Tree, so the newComment will already exist in previousState.
        // So you just need to return the previousState as is
        console.log('previousState = ', previousState);
        console.log('subscriptionData = ', subscriptionData);

        // Ascertain whether the mutation fired was created or deleted 
        if (subscriptionData.data.Comments.mutation === 'CREATED') {
          // Ascertain whether the current record has already been added to the ROOT_TREE.
          // If so, just return previousState as is.
          const newComment = subscriptionData.data.Comments.node;
          if (this.isDuplicateComment(newComment, previousState.allPostses[postIndexID].comments)) {
            return previousState;
          }else {
            // const Comments = previousState.allPostses[postIndexID].comments.concat([newComment]); // If adding a new comment to Root_Query
            // return Comments;
          }
        } else if (subscriptionData.data.Comments.mutation === 'DELETED') {
          return {
            allPostses: previousState.allPostses
          }
        }
      },
      onError: (err) => console.error(err),
    });
  },

My mutations are as follows:

export const Add_Comment_Mutation = gql`
  mutation createComment ($id: ID, $textVal: String!, $userVal: String!) {
    createComments (postsId: $id, text: $textVal, user: $userVal){
      __typename
      id
      text
      user
      deleted
      posts {
        __typename
        id
      }
    }
  }
`;

export const Remove_Comment_Mutation = gql`
  mutation removeComment ($id: ID!, $cid: ID!) {
    removeFromPostsOnComments (postsPostsId: $id, commentsCommentsId: $cid) {
      postsPosts {
        __typename
        id
        comments {
          __typename
          id
          text
          user
          deleted
          posts {
            __typename
            id
          }
        }
      }
    }

    deleteComments(id: $cid) {
      id
    }
  }
`;

@tim2 commented on @theom’s file : @theom yes, if the mutation has been executed on the same client, returning previousState in the subscription is fine (in other words: ignoring the result of the subscription in the client where the mutation happend). however, other clients need to apply the changes to the previousState as they didn’t execute the mutation. I like to think of a subscription as a mutation that didn’t happen here. That means: You have to check if THIS client executed the mutation, if not, apply the changes that come through the subscription

@theom commented on @theom’s file :

That means: You have to check if THIS client executed the mutation, if not, apply the changes that come through the subscription

Ok, so this is the part that I'm confused about. Can you show me how this is done?

@tim2 commented on @theom’s file : Yeah I described that more complicated than necessary. The easiest approach is to make sure that the mutation is not updating the apollo store. Then you always take the change of the subscription.

@tim2 commented on @theom’s file : That means, just remove the updateQuery of your mutation but update the state in updateQuery of your subscription