pass along missing field errors to the user

CHANGELOG.md

@@ -67,6 +67,8 @@
 - Fully remove result cache entries from LRU dependency system when the corresponding entities are removed from `InMemoryCache` by eviction, or by any other means. <br/>
   [@sofianhn](https://github.com/sofianhn) and [@benjamn](https://github.com/benjamn) in [#8147](https://github.com/apollographql/apollo-client/pull/8147)
 
+- Expose missing field errors in results. <br/> [@brainkim](github.com/brainkim) in [#8262](https://github.com/apollographql/apollo-client/pull/8262)
+
 ### Documentation
 TBD
 

package.json

@@ -55,7 +55,7 @@
     {
       "name": "apollo-client",
       "path": "./dist/apollo-client.cjs.min.js",
-      "maxSize": "26.6 kB"
+      "maxSize": "26.62 kB"
     }
   ],
   "peerDependencies": {

src/cache/core/types/common.ts

@@ -18,14 +18,18 @@ import { StorageType } from '../../inmemory/policies';
 // Readonly<any>, somewhat surprisingly.
 export type SafeReadonly<T> = T extends object ? Readonly<T> : T;
 
-export class MissingFieldError {
+export class MissingFieldError extends Error {
   constructor(
     public readonly message: string,
     public readonly path: (string | number)[],
     public readonly query: import('graphql').DocumentNode,
-    public readonly clientOnly: boolean,
     public readonly variables?: Record<string, any>,
-  ) {}
+  ) {
+    super(message);
+    // We're not using `Object.setPrototypeOf` here as it isn't fully
+    // supported on Android (see issue #3236).
+    (this as any).__proto__ = MissingFieldError.prototype;
+  }
 }
 
 export interface FieldSpecifier {

src/cache/inmemory/__tests__/entityStore.ts

@@ -1213,14 +1213,12 @@ describe('EntityStore', () => {
           'Can\'t find field \'hobby\' on Author:{"name":"Ted Chiang"} object',
           ["authorOfBook", "hobby"],
           expect.anything(), // query
-          false, // clientOnly
           expect.anything(), // variables
         ),
         new MissingFieldError(
           'Can\'t find field \'publisherOfBook\' on ROOT_QUERY object',
           ["publisherOfBook"],
           expect.anything(), // query
-          false, // clientOnly
           expect.anything(), // variables
         ),
       ],
@@ -1814,7 +1812,6 @@ describe('EntityStore', () => {
         "Dangling reference to missing Author:2 object",
         ["book", "author"],
         expect.anything(), // query
-        false, // clientOnly
         expect.anything(), // variables
       ),
     ];
@@ -2084,7 +2081,6 @@ describe('EntityStore', () => {
           'Can\'t find field \'title\' on Book:{"isbn":"031648637X"} object',
           ["book", "title"],
           expect.anything(), // query
-          false, // clientOnly
           expect.anything(), // variables
         ),
       ],

src/cache/inmemory/__tests__/policies.ts

@@ -1352,7 +1352,6 @@ describe("type policies", function () {
           `Can't find field 'result' on Job:{"name":"Job #${jobNumber}"} object`,
           ["jobs", jobNumber - 1, "result"],
           expect.anything(), // query
-          false, // clientOnly
           expect.anything(), // variables
         );
       }

src/cache/inmemory/__tests__/readFromStore.ts

@@ -729,7 +729,6 @@ describe('reading from the store', () => {
 }`,
         ["normal", "missing"],
         query,
-        false, // clientOnly
         {}, // variables
       ),
       new MissingFieldError(
@@ -738,7 +737,6 @@ describe('reading from the store', () => {
 }`,
         ["clientOnly", "missing"],
         query,
-        true, // clientOnly
         {}, // variables
       ),
     ]);

src/cache/inmemory/readFromStore.ts

@@ -46,7 +46,6 @@ interface ReadContext extends ReadMergeModifyContext {
   canonizeResults: boolean;
   fragmentMap: FragmentMap;
   path: (string | number)[];
-  clientOnly: boolean;
 };
 
 export type ExecResult<R = any> = {
@@ -62,7 +61,6 @@ function missingFromInvariant(
     err.message,
     context.path.slice(),
     context.query,
-    context.clientOnly,
     context.variables,
   );
 }
@@ -241,7 +239,6 @@ export class StoreReader {
         canonizeResults,
         fragmentMap: createFragmentMap(getFragmentDefinitions(query)),
         path: [],
-        clientOnly: false,
       },
     });
 
@@ -344,20 +341,6 @@ export class StoreReader {
         const resultName = resultKeyNameFromField(selection);
         context.path.push(resultName);
 
-        // If this field has an @client directive, then the field and
-        // everything beneath it is client-only, meaning it will never be
-        // sent to the server.
-        const wasClientOnly = context.clientOnly;
-        // Once we enter a client-only subtree of the query, we can avoid
-        // repeatedly checking selection.directives.
-        context.clientOnly = wasClientOnly || !!(
-          // We don't use the hasDirectives helper here, because it looks
-          // for directives anywhere inside the AST node, whereas we only
-          // care about directives directly attached to this field.
-          selection.directives &&
-          selection.directives.some(d => d.name.value === "client")
-        );
-
         if (fieldValue === void 0) {
           if (!addTypenameToDocument.added(selection)) {
             getMissing().push(
@@ -407,8 +390,6 @@ export class StoreReader {
           objectsToMerge.push({ [resultName]: fieldValue });
         }
 
-        context.clientOnly = wasClientOnly;
-
         invariant(context.path.pop() === resultName);
 
       } else {

src/core/ObservableQuery.ts

@@ -162,6 +162,7 @@ export class ObservableQuery<
       !this.queryManager.transform(this.options.query).hasForcedResolvers
     ) {
       const diff = this.queryInfo.getDiff();
+      // XXX the only reason this typechecks is that diff.result is inferred as any
       result.data = (
         diff.complete ||
         this.options.returnPartialData
@@ -180,6 +181,16 @@ export class ObservableQuery<
       } else {
         result.partial = true;
       }
+
+      if (
+        !diff.complete &&
+        !this.options.partialRefetch &&
+        !result.loading &&
+        !result.data &&
+        !result.error
+      ) {
+        result.error = new ApolloError({ clientErrors: diff.missing });
+      }
     }
 
     if (saveAsLastResult) {

src/errors/index.ts

@@ -15,10 +15,12 @@ export function isApolloError(err: Error): err is ApolloError {
 const generateErrorMessage = (err: ApolloError) => {
   let message = '';
   // If we have GraphQL errors present, add that to the error message.
-  if (isNonEmptyArray(err.graphQLErrors)) {
-    err.graphQLErrors.forEach((graphQLError: GraphQLError) => {
-      const errorMessage = graphQLError
-        ? graphQLError.message
+  if (isNonEmptyArray(err.graphQLErrors) || isNonEmptyArray(err.clientErrors)) {
+    const errors = ((err.graphQLErrors || []) as readonly Error[])
+      .concat(err.clientErrors || []);
+    errors.forEach((error: Error) => {
+      const errorMessage = error
+        ? error.message
         : 'Error message not found.';
       message += `${errorMessage}\n`;
     });
@@ -36,6 +38,7 @@ const generateErrorMessage = (err: ApolloError) => {
 export class ApolloError extends Error {
   public message: string;
   public graphQLErrors: ReadonlyArray<GraphQLError>;
+  public clientErrors: ReadonlyArray<Error>;
   public networkError: Error | ServerParseError | ServerError | null;
 
   // An object that can be used to provide some additional information
@@ -48,17 +51,20 @@ export class ApolloError extends Error {
   // value or the constructed error will be meaningless.
   constructor({
     graphQLErrors,
+    clientErrors,
     networkError,
     errorMessage,
     extraInfo,
   }: {
     graphQLErrors?: ReadonlyArray<GraphQLError>;
+    clientErrors?: ReadonlyArray<Error>;
     networkError?: Error | ServerParseError | ServerError | null;
     errorMessage?: string;
     extraInfo?: any;
   }) {
     super(errorMessage);
     this.graphQLErrors = graphQLErrors || [];
+    this.clientErrors = clientErrors || [];
     this.networkError = networkError || null;
     this.message = errorMessage || generateErrorMessage(this);
     this.extraInfo = extraInfo;

src/react/hooks/__tests__/useQuery.test.tsx

@@ -2645,6 +2645,83 @@ describe('useQuery Hook', () => {
     });
   });
 
+  describe('Missing Fields', () => {
+    itAsync(
+      'should have errors populated with missing field errors from the cache',
+      (resolve, reject) => {
+        const carQuery: DocumentNode = gql`
+          query cars($id: Int) {
+            cars(id: $id) {
+              id
+              make
+              model
+              vin
+              __typename
+            }
+          }
+        `;
+
+        const carData = {
+          cars: [
+            {
+              id: 1,
+              make: 'Audi',
+              model: 'RS8',
+              vine: 'DOLLADOLLABILL',
+              __typename: 'Car'
+            }
+          ]
+        };
+
+        const mocks = [
+          {
+            request: { query: carQuery, variables: { id: 1 } },
+            result: { data: carData }
+          },
+        ];
+
+        let renderCount = 0;
+        function App() {
+          const { loading, data, error } = useQuery(carQuery, {
+            variables: { id: 1 },
+          });
+
+          switch (renderCount) {
+            case 0:
+              expect(loading).toBeTruthy();
+              expect(data).toBeUndefined();
+              expect(error).toBeUndefined();
+              break;
+            case 1:
+              expect(loading).toBeFalsy();
+              expect(data).toBeUndefined();
+              expect(error).toBeDefined();
+              // TODO: ApolloError.name is Error for some reason
+              // expect(error!.name).toBe(ApolloError);
+              expect(error!.clientErrors.length).toEqual(1);
+              expect(error!.message).toMatch(/Can't find field 'vin' on Car:1/);
+              break;
+            default:
+              throw new Error("Unexpected render");
+          }
+
+          renderCount += 1;
+          return null;
+        }
+
+        render(
+          <MockedProvider mocks={mocks}>
+            <App />
+          </MockedProvider>
+        );
+
+        return wait(() => {
+          expect(renderCount).toBe(2);
+        }).then(resolve, reject);
+      },
+    );
+  });
+
   describe('Previous data', () => {
     itAsync('should persist previous data when a query is re-run', (resolve, reject) => {
       const query = gql`