relay: [Modern] ConnectionHandler can't get connection
Hi folks, yesterday I noticed a strange behavior in my project: somehow my removal mutations stopped working. I couldn’t identify the reason of this, neither did any changes in this part of the project.
Here’s my mutation:
import { commitMutation, graphql } from 'react-relay'
import { ConnectionHandler } from 'relay-runtime'
const mutation = graphql`
  mutation UserRemoveMutation($input: UserRemoveInput!) {
    UserRemove(input: $input) {
      deletedID
      error
    }
  }
`
function sharedUpdater (store, viewer, deletedID) {
  const viewerProxy = store.get(viewer.id)
  const conn = ConnectionHandler.getConnection(
    viewerProxy,
    'list_users'
  )
  ConnectionHandler.deleteNode(
    conn,
    deletedID
  )
}
function commit (environment, user, viewer, config) {
  return commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {
          id: user.id
        }
      },
      updater: (store) => {
        const payload = store.getRootField('UserRemove')
        const deletedID = payload.getValue('deletedID')
        sharedUpdater(store, viewer, deletedID)
      },
      optimisticUpdater: (store) => {
        sharedUpdater(store, viewer, user.id)
      },
      onCompleted: config.onCompleted,
      onError: config.onError
    }
  )
}
export default {commit}
And here’s the error:
 
If I console.log the const conn, it returns me null. I’ve checked my fragment and the @connection is correct:
viewer: graphql`
  fragment users_list_datatalist_viewer on Viewer {
    id
    users(first: $first, search: $search) @connection(key: "list_users") {
      edges {
        node {
          id
          name
          email
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
`
Am I doing something wrong?
Thanks!
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 2
- Comments: 20 (8 by maintainers)
My guess is that you should do one of these:
or:
Just a note:
@connection(key: "list_users", filters: [])means: store the data regardless of the value ofsearch– this could cause a potential problem if there are two components/views sharing the same connection and when the second view fetches the connection withsearch: "foo", it will overwrite the data fetched withsearch: barin the first view.const storeRoot = store.getRoot(); const connection = ConnectionHandler.getConnection(storeRoot, ‘Comments_results’);
I think you need to use your storeRoot, instead of this.props.viewerId