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:

screen shot 2017-05-26 at 8 37 33 am

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)

Most upvoted comments

My guess is that you should do one of these:

@connection(key: "list_users", filters: [])

or:

const conn = ConnectionHandler.getConnection(
    viewerProxy,
    'list_users',
    {search: "a particular query"}
)

Just a note: @connection(key: "list_users", filters: []) means: store the data regardless of the value of search – this could cause a potential problem if there are two components/views sharing the same connection and when the second view fetches the connection with search: "foo", it will overwrite the data fetched with search: bar in 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