Relay Modern updater ConnectionHandler.getConnection() returns undefined when parent record is root

Question

Debugging update:

So, we went a bit further in debugging this and it seems like 'client:root' cannot access the connection at all by itself.

To debug the complete store, we added this line in the updater function after exporting the store variable from the relay/environment.

console.log(relayEnvStore.getSource().toJSON())

If I use .get() with the specific string client:root:__ItemList_items_connection, I can access the records I have been looking for but it's definitely not pretty.

const testStore = store.get('client:root:__ItemList_items_connection')

console.log(testStore.getLinkedRecords('edges'))

Original:

I'm using Relay Modern and trying to update the cache after the updateItem mutation is completed with the updater. The call to ConnectionHandler.getConnection('client:root', 'ItemList_items') returns undefined.

I'm not sure if it's because I'm trying to use 'client:root' as my parent record or if there's a problem with my code. Has anyone found themselves with a similar issue?

Here's the paginationContainer:

const ItemListPaginationContainer = createPaginationContainer(
  ItemList,
  {
    node: graphql`
      fragment ItemList_node on Query
        @argumentDefinitions(count: { type: "Int", defaultValue: 3 }, cursor: { type: "String" }) {
        items(first: $count, after: $cursor) @connection(key: "ItemList_items") {
          edges {
            cursor
            node {
              id
              name
            }
          }
          pageInfo {
            hasNextPage
            hasPreviousPage
            startCursor
            endCursor
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps: props => props.node && props.node.items,
    getVariables(props, { count, cursor }) {
      return {
        count,
        cursor
      }
    },
    query: graphql`
      query ItemListQuery($count: Int!, $cursor: String) {
        ...ItemList_node @arguments(count: $count, cursor: $cursor)
      }
    `
  }
)

Here's the mutation:

const mutation = graphql`
  mutation UpdateItemMutation($id: ID!, $name: String) {
    updateItem(id: $id, name: $name) {
      id
      name
    }
  }
`

Here's the updater:

updater: (store) => {
  const root = store.getRoot()
  const conn = ConnectionHandler.getConnection(
    root, // parent record
    'ItemList_items' // connection key
    )

  console.log(conn)
},

score 0 · Answer 1 · answered Mar 27 '20 at 20:32

Turns out that I was setting my environment incorrectly. The store would reset itself every time I would make a query or a mutation, hence why I couldn't access any of the connections. I initially had the following:

export default server => {
  return new Environment({
    network: network(server),
    store: new Store(new RecordSource())
  })
}

All connections are accessible with this change:

const storeObject = new Store(new RecordSource())

export default server => {
  return new Environment({
    network: network(server),
    store: storeObject
  })
}

Relay Modern updater ConnectionHandler.getConnection() returns undefined when parent record is root

1 Answers1