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

Question

我正在为我的应用程序使用 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
          }
        }
      }
    }
  }
`)

最后，这是 CreateVoteMutation 和 updater:

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') returns undefined，所以 newVote 实际上并没有被插入。

有人看到我做错了什么吗？

Answer 1

问题：

当您获得连接时：

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

您正在尝试在 ViewerProxy 上获取连接 'Link_votes'。但是，您想要做的是在 link.

上建立连接

解法：

首先，您需要获取您要投票的 link 的 ID。

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

然后你想得到 Link 代理，这样你就可以得到正确的连接。

const linkProxy = proxyStore.get(LinkId)

现在您已经拥有代表您想要连接的 link 的 Link 代理，您现在可以获得该连接。

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

太棒了，现在你已经连接上了。这解决了您遇到的问题。

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

首先我们需要创建一条边

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()` returns `undefined`

`updater` not working with Relay Modern because `ConnectionHandler.getConnection()` returns `undefined`

reactjs

graphql

relayjs

relaymodern