2

I'm studying Apollo pub-sub in GitHunt-React and GitHunt-API. When I run those apps and enter a new comment, the comment is saved by the call to submit, and then the updateQueries codeblock runs here:

const CommentsPageWithMutations = graphql(SUBMIT_COMMENT_MUTATION, {
  props({ ownProps, mutate }) {
    console.log('in CommentsPageWithMutations');
    return {
      submit({ repoFullName, commentContent }) { <==RUNS THE MUTATION
        debugger;
        return mutate({
          variables: { repoFullName, commentContent },
          optimisticResponse: {
            __typename: 'Mutation',
            submitComment: {
              __typename: 'Comment',
              id: null,
              postedBy: ownProps.currentUser,
              createdAt: +new Date,
              content: commentContent,
            },
          },
          updateQueries: {
            Comment: (prev, { mutationResult }) => {
              debugger; // <== RUNS AFTER THE MUTATION IS SENT TO SERVER
              const newComment = mutationResult.data.submitComment;
              if (isDuplicateComment(newComment, prev.entry.comments)) {
                return prev;
              }
              return update(prev, {
                entry: {
                  comments: {
                    $unshift: [newComment],
                  },
                },
              });
            },
          },
        });
      },
    };
  },
})(CommentsPage);

I have duplicated this code to my app. The mutation is saved correctly, but the updateQueries code block does not run:

const CreateIMPageWithMutations = graphql(CREATE_IM_MUTATION, {
    props({ ownProps, mutate }) {
        debugger;
        return {
            submit({ fromID, toID, msgText }) { <==SAVES SUCCESSFULLY
                debugger;
                return mutate({
                    variables: {
                        "fromID": fromID,
                        "toID": toID,
                        "msgText": msgText
                    },
                    optimisticResponse: {
                        __typename: 'Mutation',
                        createIM: {
                            __typename: 'createIM',
                            fromID: fromID,
                            toID: toID,
                            createdAt: +new Date,
                            msgText: msgText,
                        },
                    },
                    updateQueries: {
                        createIM: (prev, { mutationResult }) => {
                            debugger; <== THIS CODE BLOCK IS NEVER CALLED
                            const newMsg = mutationResult.data.createIM;

                            return update(prev, {
                                entry: {
                                    IMs: {
                                        $unshift: [newMsg],
                                    },
                                },
                            });
                        },
                    },
                });
            },
        };
    },
})(CreateIM);

Why doesn't my updateQueries call run? Thanks in advance to all for any info.

Update: per request, here is the code of CREATE_IM_MUTATION:

const CREATE_IM_MUTATION = gql`
                mutation createIM ($fromID: String!, $toID: String!, $msgText: String!){
                    createIM(fromID: $fromID, toID: $toID, msgText: $msgText){
                        fromID
                        toID
                        msgText
                    }
                }
`;

Update: Per request of @fabio_oliveira on Slack, here is the query I am updating:

const GETIMS_QUERY = gql`
query getIMs($fromID: String!, $toID: String!){
  instant_message(fromID:$fromID, toID: $toID){
    id,
    fromID,
    toID,
    msgText
  }
}  `;
VikR
  • 4,818
  • 8
  • 51
  • 96
  • Is it definitely the case that the data.error in the mutation result is not set? Can you share the code the defined the query called "createIM"? – GreenAsJade Oct 21 '16 at 00:55
  • ... and... what version of react-apollo? – GreenAsJade Oct 21 '16 at 00:58
  • React-Apollo v3.10.8. Where can I set a breakpoint to see the result of the mutation? The mutation is successfully updating the database, but I would be very happy to have a look at data.error to see if there's anything there. – VikR Oct 21 '16 at 05:20
  • I found data.error in ownProps. Loading is set to false, the expected records have been returned in an array, and data.error is `undefined.` – VikR Oct 21 '16 at 05:23
  • 1
    Is there an active query named `createIM` on the page? – stubailo Oct 21 '16 at 05:50
  • Yes, I believe so. I have updated the original post to show the code of CREATE_IM_MUTATION. – VikR Oct 21 '16 at 06:30
  • Looks like as you said the mutation returned properly. That is an old version of react-apollo. Are you able to upgrade to 0.4.x? Note that 0.5.x is available but considered "preview" – GreenAsJade Oct 21 '16 at 08:53
  • FYI someone else found that 0.5.0 had a bug in updateQueries. https://apollostack.slack.com/archives/general/p1477048327007067 . Quite possible your version does too. – GreenAsJade Oct 21 '16 at 11:16
  • What's the latest 0.4.x version number of react-apollo? With the DDOS attack going on at the moment I can't reach GitHub to check. – VikR Oct 21 '16 at 16:49
  • I think I found it -- 0.4.7 – VikR Oct 21 '16 at 17:15
  • I upgraded to 0.4.7, but updateQueries is still not firing. – VikR Oct 21 '16 at 18:14
  • Should I update to 0.5.13? or 1.0.0-rc2? – VikR Oct 21 '16 at 18:22
  • I just installed the latest GitHunt-API and GitHunt-React, and they are using react-apollo v3.8.6, so that does not seem to be the obstacle. – VikR Oct 22 '16 at 06:01

1 Answers1

2

@fabio_oliveira on Slack provided the answer. In updateQueries I had to change the name of the key to getIMS, that is, the name of the original data-gathering query-- not the name of the Mutation query:

                updateQueries: {
                     getIMs: (prev, { mutationResult }) => {
                        debugger;
                        [.....]
VikR
  • 4,818
  • 8
  • 51
  • 96