GraphQL 突变后的更新查询不适用于 Apollo 客户端 [英] updateQueries after GraphQL mutation not working with the Apollo client

问题描述

在我的应用程序中发送 createMessage 突变后，我想使用

此外，这是在我的 JS 代码中定义的方式:

const findConversations = gql`查询所有对话($customerId:ID！){所有对话(过滤器:{顾客: {id: $customerId}}){ID更新时间松弛频道名称代理人 {ID松弛用户名}消息(最后:1){ID文本创建于}}}`

有人发现我做错了吗?

解决方案

如果您在同一个组件中使用查询和变更，您可以组合变更和查询.就像在解决方案 1 中一样.

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

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

import { compose } from 'react-apollo';...从 './.../findConversationsQuery' 导入 findConversationsQuery；...const ChatWithAllMessages = 撰写(graphql(allMessages, {name: 'allMessagesQuery'}),查找对话查询，graphql(创建消息，{道具({ ownProps，变异}){返回 {createMessageMutation(文本，conversationId){返回变异({变量:{文本，对话ID},更新查询:{allConversations: (previousState, {变异结果}) =>{console.log('Chat - 确实为 allConversationsQuery 发送了突变:',previousState,mutationResult)返回 ...}}})}}}})(聊天)

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

import { graphql } from 'react-apollo';从'graphql-tag'导入gql；const findConversations = gql`查询所有对话($customerId:ID！){所有对话(过滤器:{顾客: {id: $customerId}}){ID更新时间松弛频道名称代理人 {ID松弛用户名}消息(最后:1){ID文本创建于}}}`const findConversationsQuery = graphql(findConversations, {名称:查找对话查询"});导出默认 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 突变后的更新查询不适用于 Apollo 客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！