Cache data may be lost when replacing the attributes field of a CategoryEntity object

I have read the old related post from StackOveflow, but seems that the API has changed. I am using React with GraphQL and Strapi. My graphql query has ID parameters in it. Despite I checked the documentation and I am not able to see where this warning comes from.

The ID of all the backend data collections is managed by Strapi.

If you could help, I would owe you a lot!

The warning I received is this:

Cache data may be lost when replacing the attributes field of a CategoryEntity object.

To address this problem (which is not a bug in Apollo Client), either ensure all objects of type Category have an ID or a custom merge function, or define a custom merge function for the CategoryEntity.attributes field, so InMemoryCache can safely merge these objects:

  existing: {"__typename":"Category","name":"Worms","reviews({\"sort\":\"createdAt:desc\"})":{"__typename":"ReviewRelationResponseCollection","data":[{"__ref":"ReviewEntity:5"}]}}
  incoming: {"__typename":"Category","name":"Worms"}

For more information about these options, please refer to the documentation:

  * Ensuring entity objects have IDs: https://go.apollo.dev/c/generating-unique-identifiers
  * Defining custom merge functions: https://go.apollo.dev/c/merging-non-normalized-objects

Please find bellow my full code:

import React from 'react'
import { useQuery, gql } from '@apollo/client'
import { useParams, Link } from 'react-router-dom'

const CATEGORY= gql`
  query GetCategory($id: ID!) {
    category(id: $id) {
      data
        {
          id
          attributes
          {
            name
            reviews (sort: "createdAt:desc") {
              data
              {
                id
                attributes
                {
                  title
                  body
                  rating
                  createdAt
                  categories{
                    data
                    {
                      id
                      attributes{
                        name
                      }
                    }
                  }
                }
              }
            }
          }
        }
    }
  }
`

export default function Category() {
    const { id } = useParams()
    const { loading, error, data } = useQuery(CATEGORY, {
        variables: { id: id }
    })

    if (loading) return <p>Loading...</p>
    if (error) return <p>`Error! ${error}`</p>

    console.log(data)

    return (
        <div>
            <h2>{ data.category.data.attributes.name } Games</h2>

            {data.category.data.attributes.reviews.data.map(review => (
                <div key={review.id} className="review-card">
                    <div className="rating">{review.attributes.rating}</div>
                    <h2>{review.attributes.title}</h2>
                    <h5>{review.attributes.createdAt.substring(0, 10)}</h5>

                    {review.attributes.categories.data.map(c => (
                        <small key={c.id}>{c.attributes.name}</small>
                    ))}

                    <p>{review.attributes.body.substring(0, 200)}...</p>
                    <Link to={`/details/${review.id}`}>Read more</Link>
                </div>
            ))}
        </div>
    )
}