cacheExchange doesn't work properly

[albertcito]

I created a code and is working perfect with base urql. But when installed cacheExchange it's stopped to work properly. I followed the instructions in the documentation but in any case it doesn't work. I created a demo live from the a branch. This is file with the cacheExchange configuration.

I have two problems:
a) The cache pagination return empty values. If I click in the same page number the second time, it doesn't load anything
b) When I deleted a translation the and try to updated the TranslationsDocument it's return null.

I've been reading the documentation and try to fix it, but unfortunately I've been no able to make it's work. Please help me with that, I really want to understand this library!

import { cacheExchange as cacheExchangeURQL } from '@urql/exchange-graphcache';

import { TranslationsDocument } from 'graphql/generated';

const cacheExchange = cacheExchangeURQL({
  keys: {
    Pagination: () => 'Pagination',
    TranslationPaginationResponse: () => 'TranslationPaginationResponse',
    UserPaginationResponse: () => 'UserPaginationResponse',
  },
  updates: {
    Mutation: {
      translationDelete: (_result, { id }, cache) => {
        console.log(cache.readQuery({ query: TranslationsDocument }));
        cache.updateQuery({ query: TranslationsDocument }, (data) => {
          // 'data' always is null :(
          console.log(data, id);
          return data;
        });
      },
    },
  },
});

export default cacheExchange;

[kitten]

Hiya 👋 sorry, I currently don't quite have the time to go into a full detailed investigation and explanation, so let's start slow.

The first thing that stands out to me with the configuration you've posted is that the keys configuration you've created returns static strings. This will start sharing entities, hence potentially overwriting results from two separate entities. Now, this can be valid in some cases but those should be rare.

Specifically, there are unkeyable entities (ones that don't have any id or ID-like fields) and ones that do have a key. Either of these are unique by a key. Unkeyable entities will however be unique to their location on the parent entity. Shared entities with a static key like you're creating will be rare, so that's probably a mistake.

Generally as for the update, updateQuery and similar methods will give you null when the query is partially uncached, meaning that data is missing.

I don't have time unfortunately to look through all your code 😅 it'd take some substantial time to look at all of it; however, if you're struggling with thinking about what a normalised cache does, how it resolves your query, and which parts of the configuration matter this may help: https://kitten.sh/graphql-normalized-caching

It's also worth mentioning that your updates that you pass to updateQuery don't have to be the same queries that your UI use. They can be vastly simplified to avoid cases where one view has used a pagination query that fetches less data than another, which would make the "longer" query become a cache miss, for instance.

[JoviDeCroock]

I made a PR where we can discuss some of this stuff and maybe pain-points that we currently have in the docs. albertcito/react-graphql-urql#3

[albertcito]

Wow, thank you for the changes. It works very well. I already published the code in live demo and it's working perfect!.

My problem was that I was doing:

• Delete translation.
• In cacheExchange I tried to remove the translation deleted from the translations array. And this array was empty.

The solution right way was:

• Delete translation.
• In cacheExchange remove the translation deleted from the cache, and it automatically updated the translations array and doing a new call to the server, to get the right values.

Thank you a lot.

[JoviDeCroock]

Glad we could help @albertcito if you run into any more issues feel free to discuss 😄