Relay was unable to reconcile edges on a connection

Question

I am trying to implement pagination using relay in application. Displaying data in react-bootstrap table and pagination to navigate pages. First time when I hit page it loads first page data (executes root Query). On click event of on pagination (1, 2, 3 ..) I request server for next page data. as expected root query executes and fetches data But data on UI is not getting updated.. and in browser console I can see following error

Warning: Relay was unable to reconcile edges on a connection. This most likely occurred while trying to handle a server response that includes connection edges with nodes that lack an id field.

After pagination click I can see changes in url with required parameters say pageNum=2 and on page refresh it shows new data.. but data should come without page refresh.

Answer 1

In your server-side GraphQL schema definition where you define the connections for your GraphQL types, did you define field :id, !types.ID or globalIdField .

Eg (in Javascript, but applicable to other languages)

var myObjectType = new GraphQLObjectType({
  name: 'MyObject',
  description: 'My Object',
  fields: () => ({
    id: globalIdField('MyObject'),
    ...
  })
})

var myObjectListType = new GraphQLObjectType({
  name: 'MyObjectList',
  description: 'List of My Objects',
  fields: () => ({
    id: globalIdField('MyObjectList'),
    denims: {
      type: myObjectConnection,
      ...
    }
  })
})

var {connectionType: myObjectConnection} =
  connectionDefinitions({name: 'MyObject', nodeType: myObjectType});

Possibly related to: Nested fragment data always the same in Relay