`ConnectionHandler.getConnection（）`が `undefined`を返すため、` updater`はリレーモダンでは動作しません

Question

私は自分のアプリケーション用にRelay Modernを使用していて、updater and optimisticUpdaterを使用してキャッシュを更新しようとしていますかなり仕事。

基本的に、私はvotes接続でLinkタイプを持っている - ここに私のスキーマの関連部分です：

class Link extends Component { 

    render() { 
    const userId = localStorage.getItem(GC_USER_ID) 
    return (
     <div> 
     {userId && <div onClick={() => this._voteForLink()}>▲</div>} 
     <div>{this.props.link.description} ({this.props.link.url})</div> 
     <div>{this.props.link.votes.edges.length} votes | by {this.props.link.postedBy ? this.props.link.postedBy.name : 'Unknown'} {this.props.link.createdAt}</div> 
     </div> 
    ) 
    } 

    _voteForLink =() => { 
    const userId = localStorage.getItem(GC_USER_ID) 
    const linkId = this.props.link.id 
    CreateVoteMutation(userId, linkId, this.props.viewer.id) 
    } 

} 

export default createFragmentContainer(Link, graphql` 
    fragment Link_viewer on Viewer { 
    id 
    } 
    fragment Link_link on Link { 
    id 
    description 
    url 
    createdAt 
    postedBy { 
     id 
     name 
    } 
    votes(last: 1000, orderBy: createdAt_DESC) @connection(key: "Link_votes", filters: []) { 
     edges { 
     node { 
      id 
      user { 
      id 
      } 
     } 
     } 
    } 
    } 
`) 

：ここ

type Link implements Node { 
    createdAt: DateTime! 
    description: String! 
    id: ID! 
    postedBy(filter: UserFilter): User 
    url: String! 
    votes(filter: VoteFilter, orderBy: VoteOrderBy, skip: Int, after: String, before: String, first: Int, last: Int): VoteConnection 
} 

type Vote implements Node { 
    createdAt: DateTime! 
    id: ID! 
    link(filter: LinkFilter): Link! 
    updatedAt: DateTime! 
    user(filter: UserFilter): User! 
} 

# A connection to a list of items. 
type VoteConnection { 
    # Information to aid in pagination. 
    pageInfo: PageInfo 

    # A list of edges. 
    edges: [VoteEdge] 

    # Count of filtered result set without considering pagination arguments 
    count: Int! 
} 

# An edge in a connection. 
type VoteEdge { 
    # The item at the end of the edge. 
    node: Vote 

    # A cursor for use in pagination. 
    cursor: String 
} 

私Linkコンポーネント要求の断片でvotesためのコードをです

最後に、これは、updaterを持つCreateVoteMutationです。

const mutation = graphql` 
    mutation CreateVoteMutation($input: CreateVoteInput!) { 
    createVote(input: $input) { 
     vote { 
     id 
     link { 
      id 
     } 
     user { 
      id 
     } 
     } 
    } 
    } 
` 

export default (userId, linkId, viewerId) => { 
    const variables = { 
    input: { 
     userId, 
     linkId, 
     clientMutationId: "" 
    }, 
    } 

    commitMutation(
    environment, 
    { 
     mutation, 
     variables, 
     updater: (proxyStore) => { 
     const createVoteField = proxyStore.getRootField('createVote') 
     const newVote = createVoteField.getLinkedRecord('vote') 

     const viewerProxy = proxyStore.get(viewerId) 
     const connection = ConnectionHandler.getConnection(viewerProxy, 'Link_votes') 
     // `connection` is undefined, so the `newVote` doesn't get inserted 
     if (connection) { 
      ConnectionHandler.insertEdgeAfter(connection, newVote) 
     } 
     }, 
     onError: err => console.error(err), 
    }, 
) 
} 

ConnectionHandler.getConnection(viewerProxy, 'Link_votes')への呼び出しはundefinedを返すだけなので、newVoteは実際には挿入されません。

誰かが間違っているのを見ていますか？

Answer 1

問題：あなたはあなたの接続を取得している場合は

：

const connection = ConnectionHandler.getConnection(viewerProxy, 'Link_votes')

あなたはViewerProxyに接続 'Link_votes' を取得しようとしています。しかし、あなたがしたいことは、リンク上の接続を取得することです。

ソリューション：

まず、あなたがあなたのへの投票を追加するリンクのIDを取得する必要があります。

const linkId = newVote.getLinkedRecord('link').getValue('id');

次に、あなたが正しい接続を取得できるように、リンクのプロキシを取得したいです。

const linkProxy = proxyStore.get(LinkId)

は今、あなたはあなたのための接続を望んでいたリンクを表しリンクプロキシを持っていることを、あなたは今、その接続を得ることができます。

const connection = ConnectionHandler.getConnection(linkProxy, 'Link_votes')

甘いので、今、あなたは接続を持っています。これはあなたが抱えている問題を解決します。

しかし、別の問題があります。まず、投票を追加する方法が間違っています。最初にエッジを作成し、エッジを追加する必要があります。

まず我々は今、我々は、接続にそれを追加することができvoteEdgeを持っていることをエッジ

const voteEdge = createEdge(proxyStore, connection, newVote, 'VoteEdge');

を作成する必要があります。

ConnectionHandler.insertEdgeAfter(connection, voteEdge).

今ではすべて動作するはずです。しかし、おそらくこの種の操作にはアップデータ機能を使用すべきではありません。 RANGE_ADDコンフィグレーションhttps://facebook.github.io/relay/docs/mutations.html#range-addを使用して、サーバーがその突然変異にどのように応答するかを変更する必要があります。