Merge pull request #8782 from apollographql/useFragment-hook

Implement minimal `useFragment` hook

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Apollo Client 3.7.0 (in development)
 
+### New Features
+
+- Implement `useFragment` hook, which represents a lightweight live binding into the `ApolloCache`, and never triggers network requests of its own. <br/>
+  [@benjamn](https://github.com/benjamn) in [#8782](https://github.com/apollographql/apollo-client/pull/8782)
+
 - Replace `concast.cleanup` method with simpler `concast.beforeNext` API, which promises to call the given callback function just before the next result/error is delivered. In addition, `concast.removeObserver` no longer takes a `quietly?: boolean` parameter, since that parameter was partly responsible for cleanup callbacks sometimes not getting called. <br/>
   [@benjamn](https://github.com/benjamn) in [#9718](https://github.com/apollographql/apollo-client/pull/9718)
 

package.json

@@ -56,7 +56,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.min.cjs",
-      "maxSize": "29.5kB"
+      "maxSize": "29.8kB"
     }
   ],
   "engines": {

src/__tests__/__snapshots__/exports.ts.snap

@@ -53,6 +53,7 @@ Array [
   "throwServerError",
   "toPromise",
   "useApolloClient",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",
@@ -242,6 +243,7 @@ Array [
   "parser",
   "resetApolloContext",
   "useApolloClient",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",
@@ -280,6 +282,7 @@ Array [
 exports[`exports of public entry points @apollo/client/react/hooks 1`] = `
 Array [
   "useApolloClient",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",

src/cache/core/types/Cache.ts

@@ -28,7 +28,7 @@ export namespace Cache {
   export interface DiffOptions<
     TData = any,
     TVariables = any,
-  > extends ReadOptions<TVariables, TData> {
+  > extends Omit<ReadOptions<TVariables, TData>, "rootId"> {
     // The DiffOptions interface is currently just an alias for
     // ReadOptions, though DiffOptions used to be responsible for
     // declaring the returnPartialData option.
@@ -37,7 +37,7 @@ export namespace Cache {
   export interface WatchOptions<
     TData = any,
     TVariables = any,
-  > extends ReadOptions<TVariables, TData> {
+  > extends DiffOptions<TData, TVariables> {
     watcher?: object;
     immediate?: boolean;
     callback: WatchCallback<TData>;

src/cache/core/types/common.ts

@@ -28,7 +28,18 @@ export class MissingFieldError {
     public readonly path: MissingTree | Array<string | number>,
     public readonly query: DocumentNode,
     public readonly variables?: Record<string, any>,
-  ) {}
+  ) {
+    if (Array.isArray(this.path)) {
+      this.missing = this.message;
+      for (let i = this.path.length - 1; i >= 0; --i) {
+        this.missing = { [this.path[i]]: this.missing };
+      }
+    } else {
+      this.missing = this.path;
+    }
+  }
+
+  public readonly missing: MissingTree;
 }
 
 export interface FieldSpecifier {

src/cache/index.ts

@@ -4,6 +4,7 @@ export { Transaction, ApolloCache } from './core/cache';
 export { Cache } from './core/types/Cache';
 export { DataProxy } from './core/types/DataProxy';
 export {
+  MissingTree,
   MissingFieldError,
   ReadFieldOptions
 } from './core/types/common';

src/cache/inmemory/inMemoryCache.ts

@@ -120,7 +120,7 @@ export class InMemoryCache extends ApolloCache<NormalizedCacheObject> {
         // currently using a data store that can track cache dependencies.
         const store = c.optimistic ? this.optimisticData : this.data;
         if (supportsResultCaching(store)) {
-          const { optimistic, rootId, variables } = c;
+          const { optimistic, id, variables } = c;
           return store.makeCacheKey(
             c.query,
             // Different watches can have the same query, optimistic
@@ -130,7 +130,7 @@ export class InMemoryCache extends ApolloCache<NormalizedCacheObject> {
             // separation is to include c.callback in the cache key for
             // maybeBroadcastWatch calls. See issue #5733.
             c.callback,
-            canonicalStringify({ optimistic, rootId, variables }),
+            canonicalStringify({ optimistic, id, variables }),
           );
         }
       }