Update apollo client take 2 (#21361)

## Summary & Motivation Redo of #21292 with no changes
dagster-io · Apr 24, 2024 · 00971e2 · 00971e2 · github-actions · Apr 24, 2024
1 parent 4e50954
commit 00971e2
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 163 deletions.
diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -5,7 +5,7 @@
   "description": "Dagster UI OSS Application Shell",
   "license": "Apache-2.0",
   "dependencies": {
-    "@apollo/client": "3.7.13",
+    "@apollo/client": "3.9.11",
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/popover2": "1.13.12",
     "@blueprintjs/select": "^4.9.12",

diff --git a/js_modules/dagster-ui/packages/app-oss/src/App.tsx b/js_modules/dagster-ui/packages/app-oss/src/App.tsx
@@ -9,6 +9,7 @@ import {UserSettingsButton} from '@dagster-io/ui-core/app/UserSettingsButton';
 import {logLink, timeStartLink} from '@dagster-io/ui-core/app/apolloLinks';
 import {DeploymentStatusType} from '@dagster-io/ui-core/instance/DeploymentStatusProvider';
 import {LiveDataPollRateContext} from '@dagster-io/ui-core/live-data-provider/LiveDataProvider';
+import {Suspense} from 'react';
 
 import {InjectedComponents} from './InjectedComponents';
 import {CommunityNux} from './NUX/CommunityNux';
@@ -48,7 +49,9 @@ export default function AppPage() {
           </AppTopNav>
           <App>
             <ContentRoot />
-            <CommunityNux />
+            <Suspense>
+              <CommunityNux />
+            </Suspense>
           </App>
         </AppProvider>
       </LiveDataPollRateContext.Provider>

diff --git a/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx b/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx
@@ -1,4 +1,4 @@
-import {gql, useMutation, useQuery} from '@apollo/client';
+import {gql, useMutation, useSuspenseQuery} from '@apollo/client';
 import {
   Body,
   Box,
@@ -21,14 +21,18 @@ export const CommunityNux = () => {
     'communityNux',
     (data) => data,
   );
-  const {data, loading} = useQuery(GET_SHOULD_SHOW_NUX_QUERY);
+  const {data} = useSuspenseQuery(GET_SHOULD_SHOW_NUX_QUERY);
   const [dismissOnServer] = useMutation(SET_NUX_SEEN_MUTATION);
 
   if (!isLocalhost()) {
     // Yes, we only want to show this on localhost for now.
     return null;
   }
-  if (didDismissCommunityNux || loading || (data && !data.shouldShowNux)) {
+  if (
+    didDismissCommunityNux ||
+    !data ||
+    (typeof data === 'object' && 'shouldShowNux' in data && !data.shouldShowNux)
+  ) {
     return null;
   }
   return (

diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -12,12 +12,12 @@
   "sideEffects": false,
   "scripts": {
     "prepack": "yarn build",
-    "prepublish": "yarn lint && yarn ts && yarn jest",
+    "prepublish": "yarn lint && yarn ts && yarn jest --maxWorkers=50%",
     "build": "rm -rf lib && tsc -p ./tsconfig.build.json && yarn rollup -c rollup.config.js",
     "lint": "eslint src/ --ext=.tsx,.ts,.js --fix -c .eslintrc.js",
     "lint:ci": "eslint src/ --ext=.tsx,.ts,.js -c .eslintrc.js",
     "jest": "jest",
-    "jest-all-silent": "yarn jest --silent --watchAll=false",
+    "jest-all-silent": "yarn jest --silent --watchAll=false --maxWorkers=50%",
     "ts": "tsc -p .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -64,10 +64,10 @@
     "@storybook/icons": "^1.2.9",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.2.0",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/codemirror": "^5.60.5",

diff --git a/js_modules/dagster-ui/packages/ui-core/package.json b/js_modules/dagster-ui/packages/ui-core/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "find-dead-code": "yarn ts-prune --ignore 'types.ts|stories.ts|mocks.ts|__stories__|__fixtures__|__mocks__'",
     "jest": "jest",
-    "jest-all-silent": "yarn jest --silent --watchAll=false",
+    "jest-all-silent": "yarn jest --silent --watchAll=false --maxWorkers=50%",
     "jest:debug": "node --inspect-brk ./node_modules/.bin/jest --runInBand --no-cache",
     "lint": "eslint src/ --ext=.tsx,.ts,.js,.graphql --fix -c .eslintrc.js",
     "lint:ci": "eslint src/ --ext=.tsx,.ts,.js,.graphql -c .eslintrc.js",
@@ -18,7 +18,7 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "@apollo/client": "3.7.13",
+    "@apollo/client": "3.9.11",
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/popover2": "1.13.12",
     "@blueprintjs/select": "^4.9.12",
@@ -72,7 +72,7 @@
     "yaml": "2.4.0"
   },
   "devDependencies": {
-    "@apollo/client": "3.7.13",
+    "@apollo/client": "3.9.11",
     "@babel/cli": "^7.13.15",
     "@babel/core": "^7.13.15",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
@@ -104,10 +104,10 @@
     "@storybook/addon-themes": "^8.0.8",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.6.7",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/dagre": "^0.7.42",

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppError.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppError.tsx
@@ -1,6 +1,4 @@
-import {ServerError} from '@apollo/client';
-import {ErrorResponse, onError} from '@apollo/client/link/error';
-import {Observable} from '@apollo/client/utilities';
+import {onError} from '@apollo/client/link/error';
 import {Colors, FontFamily, Toaster} from '@dagster-io/ui-components';
 import {GraphQLError} from 'graphql';
 import memoize from 'lodash/memoize';
@@ -48,22 +46,13 @@ const showNetworkError = async (statusCode: number) => {
   }
 };
 
-export const errorLink = onError((response: ErrorResponse) => {
+export const errorLink = onError((response) => {
   if (response.graphQLErrors) {
     const {graphQLErrors, operation} = response;
     const {operationName} = operation;
     graphQLErrors.forEach((error) => showGraphQLError(error as DagsterGraphQLError, operationName));
   }
   if (response.networkError) {
-    // if we have a network error but there is still graphql data
-    // the payload should contain a meaningful error for the product to handle
-    const serverError = response.networkError as ServerError;
-    if (serverError.result && serverError.result.data) {
-      // we can return an observable here (normally used to perform retries)
-      // to flow the error payload to the product
-      return Observable.from([serverError.result]);
-    }
-
     if (response.networkError && 'statusCode' in response.networkError) {
       showNetworkError(response.networkError.statusCode);
     }

diff --git a/...er-ui/packages/ui-core/src/hooks/__tests__/useQueryAndLocalStoragePersistedState.test.tsx b/...er-ui/packages/ui-core/src/hooks/__tests__/useQueryAndLocalStoragePersistedState.test.tsx
@@ -62,7 +62,7 @@ describe('useQueryAndLocalStoragePersistedState', () => {
             </MemoryRouter>
           );
         },
-      },
+      } as any,
     );
 
     let state, setter: any;
@@ -122,7 +122,7 @@ describe('useQueryAndLocalStoragePersistedState', () => {
             </MemoryRouter>
           );
         },
-      },
+      } as any,
     );
 
     const [state] = hookResult.result.current;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/__tests__/BackfillPage.test.tsx
@@ -32,6 +32,7 @@ const mocks = [
       query: BACKFILL_DETAILS_QUERY,
       variables: {backfillId: mockBackfillId},
     },
+    delay: 10,
     result: {
       __typename: 'CloudQuery',
       data: {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/testing/mocking.ts b/js_modules/dagster-ui/packages/ui-core/src/testing/mocking.ts
@@ -17,7 +17,7 @@ export function buildQueryMock<
   variables?: TVariables;
   data?: Omit<TQuery, '__typename'>;
   errors?: ReadonlyArray<GraphQLError>;
-}): MockedResponse<TQuery> {
+}): Omit<MockedResponse<TQuery>, 'newData'> {
   return {
     request: {
       query,
@@ -50,7 +50,7 @@ export function buildMutationMock<
   variables: TVariables;
   data?: Omit<TMutation, '__typename'>;
   errors?: ReadonlyArray<GraphQLError>;
-}): MockedResponse<TMutation> {
+}): Omit<MockedResponse<TMutation>, 'newData'> {
   return {
     request: {
       query,
@@ -89,11 +89,14 @@ export function mergeMockQueries<T extends Record<string, any>>(
   defaultData: MockedResponse<T>,
   ...queries: Array<MockedResponse<T>>
 ): MockedResponse<T> {
-  let mergedResult = resultData(queries[0]!.result);
+  let mergedResult = resultData(queries[0]!.result, queries[0]!.request.variables);
   for (let i = 1; i < queries.length; i++) {
     mergedResult = deepmerge(
       mergedResult,
-      removeDefaultValues(resultData(defaultData.result!), resultData(queries[i]!.result!)),
+      removeDefaultValues(
+        resultData(defaultData.result!),
+        resultData(queries[i]!.result!, queries[i]?.request.variables),
+      ),
     );
   }
   return {
@@ -102,9 +105,9 @@ export function mergeMockQueries<T extends Record<string, any>>(
   };
 }
 
-function resultData<T>(result: MockedResponse<T>['result']) {
+function resultData<T>(result: MockedResponse<T>['result'], variables: Record<string, any> = {}) {
   if (result instanceof Function) {
-    return result()!;
+    return result(variables)!;
   } else {
     return result!;
   }