Feature: show warning if optimistic update does not match returned data

[alex-e-leon]

Over the course of building a large web app with apollo client, I’ve found that the most challenging part of using apollo client and the cache properly to be debugging cache issues and figuring out that I’ve done something wrong. In total I’ve spent at least a week driving into apollo internals thinking that apollo has a bug only to discover that in fact the bug was with my code the entire time.

i really believe that improving the error reporting in apollo client will not only massively improve its ease of use but also reduce the amount of bug reports submitted to the project.

To start with, one simple idea is to show a warning when an optimistic response is different from the actual returned data while in development mode.

This would make a subclass of bugs much easier to spot and debug.

If someone else can think of valid use cases where the returned data and optimistic response should be different, maybe the warnings could be toggled on/off with an option.

[gastonmorixe]

We spent countless hours on the same. It's useful to add a logger here:

https://github.com/apollographql/apollo-client/blob/1cef86dd2ac5a0b35a2a705e7ee41fbbad3468f3/src/cache/inmemory/readFromStore.ts?plain=1#L254-L275

  public diffQueryAgainstStore(/* ... */ ){ 
  // ...
    let missing: MissingFieldError[] | undefined;
    if (execResult.missing) {
      // For backwards compatibility we still report an array of
      // MissingFieldError objects, even though there will only ever be at most
      // one of them, now that all missing field error messages are grouped
      // together in the execResult.missing tree.
      missing = [new MissingFieldError(
        firstMissing(execResult.missing)!,
        execResult.missing,
        query,
        variables,
      )];
      if (!returnPartialData) {
        throw missing[0];
      }
    }

    if(missing) { console.warn(missing) } // <<<< This may help

    return {
      result: execResult.result,
      complete: !missing,
      missing,
    };
  }