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

Question

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>
    )
}

Answer 1

Based on this thread inside the Apollo Community.

It is more just a friendly note to make extra sure you’re implementing pagination correctly. In this case since it’s already doing exactly what you want, it is totally safe to ignore the warning. Warnings get silenced when you build for production so it’s just noisy while developing. In my opinion it is a little too noisy, but it doesn’t hurt anything.