GraphQL 돌연변이가 Apollo 클라이언트와 작동하지 않는 후 updateQueries가 발생했습니다.

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이 실행될 수는 있지만 발생하지 않는 것입니다 (로깅 문은 절대로 인쇄되지 않습니다).

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

사람이 무엇을 발견 하는가 :

또한

는, 이것이이 내 JS 코드에 정의 된 방법은 다음과 같습니다 참고로

,이 같은 ApolloStore의 allConversation 쿼리 모습입니다 내가 잘못하고있어?

Answer 1

같은 구성 요소에서 쿼리와 돌연변이를 사용하면 돌연변이와 쿼리를 작성할 수 있습니다. 솔루션 1에서와 마찬가지입니다.

구성 요소에 변이가 필요하지 않은 경우 명명 된 쿼리를 추가 할 수 있습니다 (버전 0.11.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

을 인스턴스화