Clarification around needing a 'data' item at the start of the path array

[mattwilson1024]

First of all, thank you @lucasconstantino for this library - I'm new to Apollo and the cache invalidation options (or lack thereof) have been the biggest pain point for me so far - your library gives me the kind of capability that I would have expected Apollo to have out of the box.

I struggled to get it to work at first, but with a little debugging and experimentation, I found that in my case, I need each provided path array to start with an item called 'data'. This is a little confusing as I don't see 'data' mentioned in your examples, so I am thought it would be worth asking if I'm missing something and using it wrong, or if this is something that should be documented.

To give more context/detail, my project uses Apollo Angular and has a cache that looks like this:

I have a createTransaction mutation which, as well as adding a new transaction to the database, performs various business logic which affects other transactions and the account (to do with updating running balances etc). After the mutation, I need to invalidate various parts of the cache so that I can guarantee they'll be reloaded from the server next time another page/component tries to display the information. I need to invalidate:

• The balance of each account
• The transactions array inside each account
• The transactions themselves (because the running totals have updated)

Using your library, I've been able to do this using the following code:

const cacheInvalidations = invalidateFields(() => [
  ['data', /^Account.*/, 'balance'],
  ['data', /^Account.*/, 'transactions'],
  ['data', /^Transaction.*/]
]);

return this.createTransactionGQL.mutate({ data: mutationData }, { update: cacheInvalidations }).pipe(
  tap(() => this.apollo.getClient().reFetchObservableQueries())
);

For it to work correctly, it seems I have to:

1. Start each path array with a 'data' item - I can't see any mention of this in the documentation. Is this the expected approach and if so, should it be in the documented examples?
2. Call reFetchObservableQueries() to force the active queries to reload - invalidating the cache doesn't seem to have any effect on watched queries. This method doesn't seem to be mentioned in the Apollo documentation so I'm not sure if this is a sensible approach or not, but it does seem to work and causes watched queries on the page to reload.

[lucasconstantino]

Hey, @mattwilson1024, with what version of apollo-client are you using this lib? Keep in mind this lib was released over two years ago, and I haven't really updated it for a long time - a period in which the Apollo stack evolved quite a lot.

Perhaps I should place a warning about compatibility in the README, but honestly I don't know the exact compatibility anymore.

Sorry for the trouble!

[mattwilson1024]

I'm using apollo-angular 1.5.0 with apollo-client 2.4.12.

No need to apologise - I'm thankful for this library as it seems to be the only decent tool for working with the cache as things stand. I hadn't realised that apollo-cache-invalidation was created so long ago - it is very surprising to me (as someone quite new to Apollo and GraphQL in general) that Apollo Client itself still doesn't have a mechanism for invalidating part of the cache as part of the core capability. It feels like something that would be essential for any serious usage of a client-side cache. Still, until such a time as Apollo offers this kind of capability - apollo-cache-invalidation seems very valuable in filling that gap.

A rough glance at PR #5 Apollo 2 Support suggests that properties like data.id1 became data.data.id1 somewhere along the way, which would go some way to explaining why it only seems to work for me if I include data as the first item in the path, like this:

['data', /^Account.*/, 'balance']

As you say, this might be a bit of a version-compatibility thing (if the presence of that 2nd level of data varies depending on version of Apollo client), but I'm a bit too new to all of this to be able to give a sensible suggestion on whether the examples need to change or if it's specific to my setup. If nothing else, maybe this post will help others if they stumble into the same challenge getting it to work as expected.

Thanks