Apollo-client: WriteQuery doesn't update the last item in the cache.

Created on 25 Jun 2018 · 5Comments · Source: apollographql/apollo-client

Intended outcome:
Updating the last item the Apollo cache.

Actual outcome:
The following works for every item in the query cache except the last item.

How to reproduce the issue:
Our app creates Posts that have many images tied to them. We don't want to wait for the uploads to complete before we show the next screen to the user but we don't have all the response data back for up to 20 seconds. With this challenge we built our own "optimistic response" that lets us upsert into the Apollo cache many times as database responses happen.

In a nutshell, we

Update Apollo cache with an entry containing a tempId and local image uri's,
Run a CREATE_POST query and get a response with a real Id.
Replace our tempId in the cache with the real id.
Run our uploadImages code and wait responses.
Update the Apollo cache with image uri's from the responses.
Then, finally, send an UPDATE_POST query with all the real data so the server and the cache are on the same page.

This works GREAT!!

The user happily goes about their business while all the uploading of images goes on in the background.

However, we seem to have run into a bug. If the postIndex in the code below happens to be the last item in the Apollo cache array then the writeQuery runs, doesn't throw an error, but never actually updates the cache.

Here's the upsert code we use for writing to the cache. upsertParams is the collection of data being written to the cache and the server.

const upsertIntoApolloCache = (upsertParams) => {
    const data = client.readQuery({
      query: USER_POSTS_QUERY,
    });
    const currentUserPosts = data.currentUser.posts;

    const postIndex = currentUserPosts.findIndex(
      post => post.id === upsertParams.tempId || post.id === upsertParams.id
    );
    if (postIndex === -1) {
      currentUserPosts.push(upsertParams);
    } else {
      currentUserPosts[postIndex] = upsertParams;
    }

    client.writeQuery({
      query: USER_POSTS_QUERY,
      data,
    });
};

Why would this work for every item except the last one? Thanks!

Versions
System:
OS: Windows 10
Binaries:
Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.5.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
apollo-cache-inmemory: ^1.2.1 => 1.2.4
apollo-cache-redux: ^0.1.0 => 0.1.0
apollo-client: 2.3.2 => 2.3.2
apollo-link-context: ^1.0.8 => 1.0.8
apollo-link-error: ^1.0.9 => 1.1.0
apollo-link-http: ^1.5.4 => 1.5.4
react-apollo: ^2.1.4 => 2.1.5