GraphQL突然変異がApolloクライアントで機能しなくなった後のupdateQuery

Question

createMessage突然変異をアプリケーションに送信した後、ローカルApolloStoreをupdateQueriesを使用して更新したいとします。

次のように私のセットアップが見えます：

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が実行されると、それは起こらないようです（ロギングステートメントは決して印刷されません）。

また

、それは私のJSコードで定義されていますどのようにこの：

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

誰が何を見つけたん参考のために、これはApolloStoreでallConversationクエリがどのように見えるか

です私は間違っている？

Answer 1

同じコンポーネントでクエリと突然変異を使用すると、突然変異とクエリを作成できます。ソリューション1と同様。

コンポーネントに突然変異が必要ない場合は、名前付きのクエリを追加することができます（バージョン0.11.1以降、関連するクエリは最低1回呼び出す必要があります。そのクエリ自体をupdateQueriesに追加することもできます）。

1突然変異およびクエリファイルで定義されたgraphqlクエリと

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)

を使用しています）コンポーネントは、あなただけ一度

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

をインスタンス化しているしたいので