GraphQL突变后的updateQueries无法与Apollo客户端一起使用 [英] updateQueries after GraphQL mutation not working with the Apollo client

问题描述

在我的应用中发送createMessage突变后，我想使用解决方案

如果在同一组件中使用查询和突变，则可以组成突变和查询.就像在解决方案1中一样.

如果您不需要组件中的突变，则可以添加命名查询(自版本0.11.1开始，因此必须至少调用一次相关查询，否则阿波罗商店不知道该查询)或可以将查询本身添加到updateQueries.

1)使用变异和查询的组件

 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) 

使用文件中定义的graphql查询，因为您只想实例化一次

 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 

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?

解决方案

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

这篇关于GraphQL突变后的updateQueries无法与Apollo客户端一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！