`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`

Posted

技术标签:

【中文标题】`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`【英文标题】:`updater` not working with Relay Modern because `ConnectionHandler.getConnection()` returns `undefined` 【发布时间】:2017-11-27 23:30:23 【问题描述】:

我正在为我的应用程序使用 Relay Modern,并尝试在使用 updater and optimisticUpdater 进行突变后更新缓存,但它并不完全有效。

基本上,我有一个带有 votes 连接的 Link 类型 - 这是我架构的相关部分:

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 的代码:

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
          
        
      
    
  
`)

最后,这是CreateVoteMutationupdater

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 实际上并没有被插入。

有人看到我做错了吗?

【问题讨论】:

我认为这是因为无法访问“Link_votes”连接。 【参考方案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')

Sweet 所以现在你已经建立了联系。这解决了您遇到的问题。

但是还有一个问题,你继续添加投票的方式是错误的,首先你需要创建一个边缘,然后添加边缘。

首先我们需要创建一条边

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

现在我们有了 voteEdge,我们可以将它附加到连接中。

ConnectionHandler.insertEdgeAfter(connection, voteEdge).

现在应该一切正常了。但是,您可能不应该将更新程序功能用于此类操作。您应该使用 RANGE_ADD 配置 https://facebook.github.io/relay/docs/mutations.html#range-add 并更改您的服务器对该突变的响应方式。

【讨论】:

以上是关于`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`的主要内容,如果未能解决你的问题,请参考以下文章

MySQL 查询适用于 SELECT 但不适用于 UPDATE 语句

Oracle SQL UPDATE 不适用于 NVL

中继订阅不适用于 react-native

SQL UPDATE 命令不适用于 Command.Parameters.Add/AddWithValue [重复]

GROUP BY不适用于MySQL 5.7,因为5.7使用SQL_MODE的“ONLY_FULL_GROUP_BY”选项。

Ajax update=":#table.clientId" 似乎不适用于 <p:dataTable>