[howtographql/content/frontend/react-apollo/6-more-mutations-and-updating-the-store.md] - Link's index is undefined in lesson

[sirartemis]

Hello. The problem is such that it does not particularly require attention to correction, but still some very beginners may be upset why following the lessons they do not end up with numbered links.

I looked at the completed sources in https://github.com/howtographql/react-apollo/blob/master/src/components/LinkList.js and realized that indexing links will be carried out later, most likely in a lesson with paginations.

I haven't reached there myself yet, but I assume that this lesson takes functionality that has not yet been defined. Therefore, when I followed the step-by-step instructions from the lesson and looked at the result in the application, I saw this
:

As you can see, NaN is observed instead of the ordinal numbers of the links.
I completely checked everything, and realized what the problem was.
To satisfy my perfectionism and do as expected in the lesson, I did this:

src/components/LinkList.js

const LinkList = () => {
  const { data, loading } = useQuery(FEED_QUERY);

  return (
    <div>
      {data && (
        <>
        {data.feed.links.map((link, index) => (                         // added an index parameter to the loop
        <Link key={link.id} link={link} index={index} />             // added an index prop to the Link component
      ))}

        </>
      )}
      {loading && 'loading'}
          </div>
  );
};

And that's it, now the links are numbered

In order for beginners to have a normal passage of lessons on the topic, and they do not feel guilty that it does not work for them, I suggest including this change in the lesson.
If you have another better solution or there are still no mistakes in the lesson and I missed something, please let me know about it, since I myself am not quite an experienced programmer yet.

in general, I want to express my gratitude for this course,
the author explains very clearly, I had no problems with mastering up to this point

Thank you for this course Nicholas Burk and everyone who participated.

And yet!))))))

I found another problem. I decided not to open it as a separate one, but to add it to this one.

The problem concerns updating votes when clicking on the voting button. When describing the Mutation hook, namely when calculating upadtedLinks, the result turns out, as it seems to me, not quite expected.
After following all the instructions, I check the application, and when I click on the vote, an update occurs, and instead of one vote shows two votes.
If I refresh the page, it shows one vote.
It seems to me that the problem is that:
src/components/Link.js

const updatedLinks = feed.links.map((feedLink) => {
        if (feedLink.id === link.id) {
          return {
            ...feedLink,
            votes: [...feedLink.votes, vote]    // in my opinion, vote is superfluous here
          };
        }
        return feedLink;
      });

apparently, feedLink.votes for some reason, already contains up-to-date information about votes.
I rewrote the code like this:
src/components/Link.js

const updatedLinks = feed.links.map((feedLink) => {
        if (feedLink.id === link.id) {
          return {
            ...feedLink,
            votes: [...feedLink.votes]    // deleted "vote"
          };
        }
        return feedLink;
      });

After that, when you click on the voice, the expected automatic update occurs, and the link contains one "new" voice. One click - one vote.
As expected.

But I'm not satisfied with that. I would like to understand why this is happening.

Could this be the author's mistake, or is it a new functionality of the latest version of apollo (I have @apollo/client^3.6.2). I also get such a warning in DevTools:

Cache data may be lost when replacing the feed field of a Query object.

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

  existing: {"__typename":"Feed","links":[{"__ref":"Link:ff1060c0-e898-4830-bfcd-cf75ca3a416f"},{"__ref":"Link:84c14a48-5224-4b2d-aec1-3a740467820b"},{"__ref":"Link:3337754b-13b4-48c8-abc7-f4a9f6b56c9a"},{"__ref":"Link:aa9e648a-a918-4f11-86f3-c8c6cda21834"},{"__ref":"Link:98a9bdf8-9cc7-4a74-8a15-5f6229958dfd"},{"__ref":"Link:1163eb24-5c34-4c1e-9b45-066c175f4382"},{"__ref":"Link:76556eac-e474-4451-add8-1d967c3d47e5"},{"__ref":"Link:2c1c93d4-4f65-4feb-8033-d35a2838e8c6"},{"__ref":"Link:d9abeca5-7bc3-4b01-bb0f-57707c2f9473"},{"__ref":"Link:35572f01-ca80-4970-b332-2d6b782c8a6b"}]}
  incoming: {"links":[{"__ref":"Link:ff1060c0-e898-4830-bfcd-cf75ca3a416f"},{"__ref":"Link:84c14a48-5224-4b2d-aec1-3a740467820b"},{"__ref":"Link:3337754b-13b4-48c8-abc7-f4a9f6b56c9a"},{"__ref":"Link:aa9e648a-a918-4f11-86f3-c8c6cda21834"},{"__ref":"Link:98a9bdf8-9cc7-4a74-8a15-5f6229958dfd"},{"__ref":"Link:1163eb24-5c34-4c1e-9b45-066c175f4382"},{"__ref":"Link:76556eac-e474-4451-add8-1d967c3d47e5"},{"__ref":"Link:2c1c93d4-4f65-4feb-8033-d35a2838e8c6"},{"__ref":"Link:d9abeca5-7bc3-4b01-bb0f-57707c2f9473"},{"__ref":"Link:35572f01-ca80-4970-b332-2d6b782c8a6b"}]}

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

In general, I don't fully understand what exactly the problem is, I intuitively removed what seemed superfluous to me, and the program seems to work correctly.

thank you in advance for your help :)