2017-03-06 101 views
3

我在我的應用程序發送createMessage突變後,我想更新本地ApolloStore使用updateQueries更新GraphQL變異後不能與Apollo客戶端工作

我的設置如下所示:

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) 

我打電話createMessageMutation在我的代碼如下所示:

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

有了這個設置我希望我在值中指定的功能爲updateQueries被執行,但是,似乎並沒有發生(日誌記錄從未打印)。

以供參考,這是什麼allConversation查詢在ApolloStore樣子:

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

有誰發現了什麼:

enter image description here

而且,這究竟是怎麼在我的JS代碼中定義我做錯了?

回答

1

如果您在同一個組件中使用查詢和突變,則可以組成突變和查詢。就像在解決方案1中一樣。

如果您不需要組件中的突變,您可以添加指定的查詢(因爲版本0.11.1 /因此相關查詢必須至少調用一次,否則apollo商店不知道關於查詢),或者您可以將查詢本身添加到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

+0

> updateQuery功能僅在突變的視圖持有對查詢的引用時纔會調用。 你有沒有參考該聲明? – marktani

+0

它不是直接寫在阿波羅的文檔中。當您閱讀[updateQueries定義](http://dev.apollodata.com/react/cache-updates.html#updateQueries)時,有兩條語句「我們通過CommentsPage組件可調用的函數prop暴露此突變」和「評論頁面本身是通過以下查詢呈現的」。所以我認爲查詢必須在組件的道具上。 –

+0

指的是[此評論](https://github.com/apollographql/apollo-client/issues/1129#issuecomment-270677147)聽起來這種行爲是一個錯誤。儘管我並不清楚目前的協議。 – marktani