Updating cache - Arrays of object in store - after removing array item an empty object remains

[ojczeo]

I'm updating query of parent component after removing an item. The problem I'm facing is with updating store: removed item is deleted, but the index in array remains (screenshots below). This causes a lot of problems with rerendering components (Chrome dev-console also attached).

After all deleted component stays rendered.

Code:

          // inside component method
          const parentDirQuery = {
            query: directoryQuery,
            variables: {
              id: this.file.parentId
            }
          };
          this.$apollo.mutate({
            mutation: removeFileMutation,
            variables: {
              input: {
                id: fileId
              }
            },
            update(store, { data: { removeFile }}) {
              try {
                const storeData = store.readQuery(parentDirQuery);
                const newAssets = storeData.getDirById.assetsPage.assets.filter((file) => {
                  return file.id !== removeFile.id;
                });
                storeData.getDirById.assetsPage.assets = newAssets;
                storeData.getDirById.assetsPage.totalCount = storeData.getDirById.assetsPage.totalCount - 1;
                parentDirQuery.data = storeData;
                store.writeQuery(parentDirQuery);
              } catch (err) {
                console.log('err', err);
              }
            },
            optimisticResponse: {
              removeFile: {
                id: fileId,
                __typename: 'RemoveFilePayload'
              }
            }
          }).then((response) => {
            console.log(response, 'res');
          }).catch((error) => {
            console.error(error, 'error');
          });

Screenshots:

Before removing 16:

After removing 16:

[ojczeo]

Probably related to: apollographql/apollo-client#899

[ojczeo]

I think it could be related to fetchMore feature. When I'm trying to update query data I'm using this:

 const omit = function (obj, omitKeys) {
  return Object.keys(obj).reduce((result, key) => {
    if (!omitKeys.find((omitKey) => { return key === omitKey; })) {
      result[key] = obj[key];
    }
    return result;
  }, {});
};

//----
this.$apollo.queries.directory.fetchMore({
        variables,
        updateQuery: (previousResult, { fetchMoreResult: { getDirById: { assetsPage } } }) => {
          const udpatedResult = {
            getDirById: omit(previousResult.getDirById, ['assetsPage'])
          };
          udpatedResult.getDirById.assetsPage = {
            totalCount: assetsPage.totalCount,
            __typename: 'AssetPage'
          };
          udpatedResult.getDirById.assetsPage.assets =
            [...previousResult.getDirById.assetsPage.assets, ... assetsPage.assets];
          return udpatedResult;
        }
      });

i think overwriting array nested in udpatedResult.getDirById.assetsPage.assets as well as rewriting previousResult cache object can breaks results bindings with Vue. What do you think? Maybe update flow should read cache in way as it done in update() for mutations - it's not breaking anything.