Apollo client, merges objects when 'id' propery is empty

Question

Hi i m quering some data from apollo server with the below structure:

       hero {
        image {
          id
          name
          mimeType
          url
        }
        title
        description
      }
      welcome {
        image {
          id
          name
          mimeType
          url
        }
        title
        description
     }

The data that i receive in the 'response' (in browser dev tools) is like below:

---

     hero {
        image {
          "id": ''
          "name": ''
          "mimeType": ''
          "url": ''
          "__typename":"Asset"
        }
        title: 'some title'
        description: 'some description'
        "__typename":"Hero"
      }
      welcome {
        image {
          "id": ''
          "name": ''
          "mimeType": ''
          "url": 'intro/welcome.png'
          "__typename":"Asset"
        }
        title: 'another title'
        description: 'another description'
        "__typename":"Welcome"
     }

But when i console.log the returned data, into the code, i get merged 'image' object, like so:

       hero {
        image {
          "id": '',
          "name": '',
          "mimeType": '',
          "url": 'intro/welcome.png',        <-- welcome.image.url merged here as well.
        }
        title: 'some title',
        description: 'some description',
      }
      welcome {
        image {
          "id": '',
          "name": '',
          "mimeType": '',
          "url": 'intro/welcome.png',
        }
        title: 'another title',
        description: 'another description',
     }

Questions:

So, based on the above i want to understand what is the reason behind this happening. Is it a rule that i have to enable/disable ? is it a principle that states, 'when there is no id value, i merge the objects' ?

I read in the docs that Apollo client makes unique keys based on id + typename, so in this case, is it confused ? (I concluded that the 'id' must have value always.)

And on the other hand, what is gonna happen if the 'ids' have the same value ?

I attach the source that i consult, for reference: https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function

thanks.

Answer 1

'' is still a string, and as such a valid identifier, such as '5' or 'foo'.

Apollo Client assumes that if two elements have the same __typename and id, they are the same object and should be merged together.

"No id" would mean that either you don't request the id field, or it would come back as null - and in those cases, they would not get merged.

You can override this behaviour by providing your own dataIdFromObject function - but if you have control over your backend, it would probably better to have it return null in these cases.