updateQueries after GraphQL mutation not working with the Apollo client

Question

After I'm sending a createMessage mutation in my app, I want to update the local ApolloStore using updateQueries .

My setup looks as follows:

const ChatWithAllMessages = graphql(allMessages, {name: 'allMessagesQuery'})(Chat)
export default graphql(createMessage, {
   props({ownProps, mutate}) {
    return {
      createMessageMutation(text, conversationId) {
        return mutate({
          variables: { text, conversationId },
          updateQueries: {
            allConversations: (previousState, {mutationResult}) => {
              console.log('Chat - did send mutation for allConversationsQuery: ', previousState, mutationResult)
              return ...
            }
          }
        })
      }
    }
  }
})(ChatWithAllMessages)

I'm calling the createMessageMutation in my code like so:

_onSend = () => {
  this.props.createMessageMutation(this.state.message, this.props.conversationId)
}

With this setup I would expect the function that I specified in the value for updateQueries to be executed, however, that doesn't seem to happen (the logging statement is never printed).

For reference, this is what the allConversation query in the ApolloStore looks like:

Also, this how it's defined in my JS code:

const findConversations = gql`
    query allConversations($customerId: ID!) {
        allConversations(filter: {
          customer: {
            id: $customerId
          }
        }){
            id
            updatedAt
            slackChannelName
            agent {
                id
                slackUserName
            }
            messages(last: 1) {
                id
                text
                createdAt
            }
        }
    }
`

Does anyone spot what I'm doing wrong?

Answer 1

If you use the query and the mutation in the same component you could compose the mutation and the query. Like in solution 1.

If you do not need the mutation in the component you could add the named query (Since version 0.11.1 / hereby the related query has to be called at least once else the apollo store does not know about the query) or you could add the query itself to updateQueries.

1) Component which uses mutation and query

 import { compose } from 'react-apollo'; ... import findConversationsQuery from './.../findConversationsQuery'; ... const ChatWithAllMessages = compose( graphql(allMessages, {name: 'allMessagesQuery'}), findConversationsQuery, graphql(createMessage, { props({ ownProps, mutate }) { return { createMessageMutation(text, conversationId) { return mutate({ variables: { text, conversationId }, updateQueries: { allConversations: (previousState, { mutationResult }) => { console.log('Chat - did send mutation for allConversationsQuery: ', previousState, mutationResult) return ... } } }) } } } })(Chat) 

with the graphql query defined in the file, because you only want to have it instantiated once

 import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; const findConversations = gql` query allConversations($customerId: ID!) { allConversations(filter: { customer: { id: $customerId } }){ id updatedAt slackChannelName agent { id slackUserName } messages(last: 1) { id text createdAt } } } ` const findConversationsQuery = graphql(findConversations, { name: "findConversationsQuery" }); export default findConversationsQuery