feat(fe2): greatly improved DX for apollo cache modification

[fabis94]

(Built this when I had some downtime about a week ago, hope you like it :) )

There's 2 big parts to this:

1. A fully & automatically type-checked modifyObjectField() function. You no longer need to specify any generic arguments, it will figure out what part of the cache you're updating based on the cache reference and field name you pass into the function.
2. Improved and simplified helpers for common activities in modifyObjectFIeld(), most importantly introduced createUpdatedValue that updates the cached value at specific paths (e.g. items.[0].name) ONLY if such a value exists in the cache. This makes it easier to ensure we only update cached values, not introduce new ones (and get an invalid state that way - e.g. a totalCount of 0, when it was undefined before)

Demo of all of the TS auto typing you get out of the box in type name, field name, field value, variable value resolution

getCacheId() blocks invalid type names:

readField() allows reading fields of Reference objects, and its now fully typed - meaning it will understand what kind of reference are you specifying and only support fields that exist on that type

Reference objects are typed - you can no longer mismatch references, e.g. put a User reference where a Project reference is expected:

[fabis94]

Return evict() replaces return DELETE

[fabis94]

Had to introduce a custom GQL codegen plugin to get this to work

[fabis94]

Access all of the helpers you need from the helpers object in the modifyObjectField() callback

[fabis94]

Simplifies this:

     modifyObjectField(
                cache,
                workspaceCacheId,
                'projects',
                ({ value, helpers: { ref } }) => {
                  const newItems = isUndefined(value?.items)
                    ? undefined
                    : [ref('Project', newProject.id), ...value.items]

                  const newTotalCount = isUndefined(value?.totalCount)
                    ? undefined
                    : (value.totalCount || 0) + 1

                  return {
                    ...value,
                    ...(isUndefined(newItems) ? {} : { items: newItems }),
                    ...(isUndefined(newTotalCount) ? {} : { totalCount: newTotalCount })
                  }
                }
              )

Into this:

modifyObjectField(
                cache,
                workspaceCacheId,
                'projects',
                ({ helpers: { ref, createUpdatedValue } }) => {
                  return createUpdatedValue(({ update }) => {
                    update('items', (items) => [
                      ref('Project', newProject.id),
                      ...items
                    ])
                    update('totalCount', (count) => count + 1)
                  })
                }
              )

update() calls are properly typed as well, and will only allow you to specify property paths that actually exist in value, and the property value in the callback is gonna be properly typed too

[fabis94]

Option that automatically evicts all fields that have variables w/ filters in them. You usually want to do this when adding a new item to a list - it may be hard to tell if the item fits the filtered query, and it'll just be easier to evict that version of the query and refetch it

cc @cdriesler

[Mikehrn]

Nice 😄 Thanks for the visuals and clear explanations as well!