nuxt-apollo issues while pulling array of objects

Question

I have been working with apollo-nuxt to query my graphql, but run into some weird issues while doing so. First of all this is my query:

{
  getOrder(quantity: 2) {
    id
    createdAt
    content {
      amount
      productId
    }
  }
}

which returns the following at /graphqli:

{
  "data": {
    "getOrder": [
      {
        "id": null,
        "createdAt": 1592224281,
        "content": [
          {
            "amount": 5,
            "productId": "Salad"
          },
          {
            "amount": 2,
            "productId": "Water"
          }
        ]
      },
      {
        "id": null,
        "createdAt": 1592224264,
        "content": [
          {
            "amount": 5,
            "productId": "Whine"
          },
          {
            "amount": 3,
            "productId": "Water"
          }
        ]
      }
    ]
  }
}

this is as expected. Now using the same query in apollo (nuxt code):

<script>
import gql from 'graphql-tag'
export default {
  apollo: {
    orders: gql` query order {
    orders: getOrder(quantity: 2) {
    id
    createdAt
    content {
      amount
      productId
    }
  }
 }`
  },
...

will produce this result:

I cannot explain why the same query produces two different results. One with the two different objects in the array and the apollo one with two times the same object in an array. When adding more (by increasing the quantity) I just get more of the same object in the array. What am I missing here?

Answer 1

Your id for both orders is the same value (null) so Apollo ends up using the cache key for both orders (Order:null) and the orders field ends up referring to the same key twice. You need to fix your backend so that id is resolved correctly to a unique value for each Order.