fix(#2200): handle NotFound GraphQL errors in async renderer (#2204)

* fix(#2200): handle NotFound GraphQL errors in async renderer

* fix(#2200): data provider filter apollo graphQL not found error

* fix(#2200): update apollo-client to not report not found error link

* fix(#2200): fix log on not found error link

* fix(#2200): fix set error in data provider

* fix(#2200): extensions type access via index signature

* fix(#2200): log gql errors that are not NotFound and still throw error in data provider

* fix: remove unused import

libs/apollo-client/src/lib/apollo-client.ts

@@ -1,4 +1,4 @@
-import type { InMemoryCacheConfig } from '@apollo/client';
+import type { ApolloError, InMemoryCacheConfig } from '@apollo/client';
 import {
   ApolloClient,
   from,
@@ -13,9 +13,12 @@ import { createClient as createWSClient } from 'graphql-ws';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
 import ApolloLinkTimeout from 'apollo-link-timeout';
+import type { GraphQLErrors } from '@apollo/client/errors';
 
 const isBrowser = typeof window !== 'undefined';
 
+const NOT_FOUND = 'NotFound';
+
 export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
   if (!base) {
     throw new Error('Base must be passed into createClient!');
@@ -61,8 +64,16 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
     : httpLink;
 
   const errorLink = onError(({ graphQLErrors, networkError }) => {
-    if (graphQLErrors) console.log(graphQLErrors);
+    if (graphQLErrors) {
-    if (networkError) console.log(networkError);
+      graphQLErrors.forEach((e) => {
+        if (e.extensions && e.extensions['type'] !== NOT_FOUND) {
+          console.log(e);
+        }
+      });
+    }
+    if (networkError) {
+      console.log(networkError);
+    }
   });
 
   return new ApolloClient({
@@ -70,3 +81,21 @@ export function createClient(base?: string, cacheConfig?: InMemoryCacheConfig) {
     cache: new InMemoryCache(cacheConfig),
   });
 }
+
+const isApolloGraphQLError = (
+  error: ApolloError | Error | undefined
+): error is ApolloError => {
+  return !!error && !!(error as ApolloError).graphQLErrors;
+};
+
+const hasNotFoundGraphQLErrors = (errors: GraphQLErrors) => {
+  return errors.some((e) => e.extensions && e.extensions['type'] === NOT_FOUND);
+};
+
+export const isNotFoundGraphQLError = (
+  error: Error | ApolloError | undefined
+) => {
+  return (
+    isApolloGraphQLError(error) && hasNotFoundGraphQLErrors(error.graphQLErrors)
+  );
+};

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -46,7 +46,7 @@ export const DealTicketMarketAmount = ({
       <div className="flex items-end gap-4 mb-2">
         <div className="flex-1 text-sm">Size</div>
         <div />
-        <div className="flex-1 text-sm text-right">
+        <div className="flex-2 text-sm text-right">
           {isMarketInAuction(market) && (
             <Tooltip
               description={t(

libs/fills/src/lib/fills-manager.tsx

@@ -29,7 +29,12 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
   };
 
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data}
+      noDataCondition={() => false}
+    >
       <FillsTable
         ref={gridRef}
         partyId={partyId}

libs/positions/src/lib/positions-manager.tsx

@@ -25,7 +25,13 @@ export const PositionsManager = ({ partyId }: PositionsManagerProps) => {
 
   return (
     <>
-      <AsyncRenderer loading={loading} error={error} data={data}>
+      <AsyncRenderer
+        loading={loading}
+        error={error}
+        data={data}
+        noDataMessage={t('No positions')}
+        noDataCondition={(data) => !(data && data.length)}
+      >
         <PositionsTable
           ref={gridRef}
           rowData={data}

libs/react-helpers/src/hooks/use-data-provider.ts

@@ -136,7 +136,15 @@ export const useDataProvider = <
       return unsubscribe();
     };
   }, [client, initialized, dataProvider, callback, variables, skip, update]);
-  return { data, loading, error, flush, reload, load, totalCount };
+  return {
+    data,
+    loading,
+    error,
+    flush,
+    reload,
+    load,
+    totalCount,
+  };
 };
 
 export const useThrottledDataProvider = <Data, Delta>(

libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx

@@ -1,6 +1,7 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
+import { isNotFoundGraphQLError } from '@vegaprotocol/apollo-client';
 
 interface AsyncRendererProps<T> {
   loading: boolean;
@@ -25,7 +26,7 @@ export function AsyncRenderer<T = object>({
   children,
   render,
 }: AsyncRendererProps<T>) {
-  if (error) {
+  if (error && !isNotFoundGraphQLError(error)) {
     return (
       <Splash>
         {errorMessage

libs/ui-toolkit/src/components/splash/splash.tsx

@@ -7,7 +7,7 @@ export interface SplashProps {
 
 export const Splash = ({ children }: SplashProps) => {
   const splashClasses = classNames(
-    'w-full h-full',
+    'w-full h-full text-xs text-center text-gray-200',
     'flex items-center justify-center'
   );
   return <div className={splashClasses}>{children}</div>;