HP-894: Apollo client update

package.json

@@ -1,10 +1,10 @@
 {
   "name": "open-city-profile-ui",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.3.11",
+    "@apollo/client": "^3.5.6",
     "@datapunt/matomo-tracker-react": "^0.1.2",
     "@react-aria/visually-hidden": "^3.2.1",
     "@sentry/browser": "^5.15.4",

src/auth/__tests__/authService.test.js

@@ -237,7 +237,7 @@ describe('authService', () => {
           "https://api.hel.fi/sso/openid/api-tokens/",
           Object {
             "headers": Object {
-              "Authorization": "bearer db237bc3-e197-43de-8c86-3feea4c5f886",
+              "authorization": "bearer db237bc3-e197-43de-8c86-3feea4c5f886",
             },
           },
         ]

src/auth/authService.ts

@@ -61,7 +61,7 @@ export class AuthService {
         return Promise.reject(new Error('Access token not set'));
       }
       const headers = new Headers();
-      headers.append('Authorization', `Bearer ${accessToken}`);
+      headers.append('authorization', `Bearer ${accessToken}`);
 
       return fetch(uri, {
         method: 'GET',
@@ -174,7 +174,7 @@ export class AuthService {
     const url = `${window._env_.REACT_APP_OIDC_AUTHORITY}api-tokens/`;
     const response = await fetch(url, {
       headers: {
-        Authorization: `bearer ${user.access_token}`,
+        authorization: `bearer ${user.access_token}`,
       },
     });
     const result = await response.json();

src/common/test/ProfileContextFetcher.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { ProfileContext } from '../../profile/context/ProfileContext';
 
@@ -7,12 +7,11 @@ function ProfileContextFetcher({
 }: {
   children: React.ReactElement | React.ReactNodeArray;
 }): React.ReactElement {
-  const [fetchStarted, setFetchStarted] = useState(false);
   const { data, fetch } = useContext(ProfileContext);
-  if (!fetchStarted) {
+
+  useEffect(() => {
     fetch();
-    setFetchStarted(true);
-  }
+  });
 
   if (!data) {
     return <div data-testid="no-data-fetched"></div>;

src/graphql/__tests__/client.test.ts

@@ -9,7 +9,7 @@ describe('graphql client', () => {
     jest.spyOn(authService, 'getToken').mockReturnValue('foo.bar.baz');
   });
 
-  it('sets Authorization-header to requests', async () => {
+  it('sets authorization-header to requests', async () => {
     global.fetch.mockResponse(
       JSON.stringify({
         data: {
@@ -30,7 +30,7 @@ describe('graphql client', () => {
 
     const fetchOptions = global.fetch.mock.calls[0][1] as RequestInit;
     expect(fetchOptions.headers).toHaveProperty(
-      'Authorization',
+      'authorization',
       'Bearer foo.bar.baz'
     );
   });

src/graphql/client.ts

@@ -15,8 +15,8 @@ const authMiddleware = new ApolloLink((operation, forward) => {
   if (token) {
     operation.setContext({
       headers: {
-        Authorization: `Bearer ${token}`,
-        'Accept-Language': i18n.languages[0],
+        authorization: `Bearer ${token}`,
+        'accept-language': i18n.languages[0],
       },
     });
   }

src/profile/components/profile/Profile.tsx

@@ -69,9 +69,13 @@ function Profile(): React.ReactElement {
   const isProfileFound = !!(data && data.myProfile);
   const failedToFetchUserProfileData =
     tunnistamoUser && !isProfileFound && !!error;
-  if (isProfileFound && !isProfileInitialized) {
-    fetchProfile();
-  }
+
+  useEffect(() => {
+    if (isProfileFound && !isProfileInitialized) {
+      fetchProfile();
+    }
+  }, [fetchProfile, isProfileFound, isProfileInitialized]);
+
   const isLoadingProfile = isProfileFound && !isProfileComplete;
 
   const getPageTitle = () => {

src/profile/hooks/useProfileQuery.ts

@@ -1,6 +1,6 @@
 import { ApolloError, FetchResult, useLazyQuery } from '@apollo/client';
 import { loader } from 'graphql.macro';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { usePersistFn } from 'ahooks';
 import _ from 'lodash';
 
@@ -19,16 +19,20 @@ type QueryReturnType = {
 };
 
 /*
-  note: there is a bug in Apollo client.
-  https://github.com/apollographql/apollo-client/issues/5531
-  onError is triggered only once, unless notifyOnNetworkStatusChange:true.
-  That will cause unnecessary re-renders on every network status change
-  so will not use it.
+  note:
+  onError is not triggered when errorPolicy === 'all'
+  If user is logged in with weak authentication, there is always a graphQL error included.
+  If errorPolicy is 'none', graphQL errors are not allowed. Profile won't load.
+  If errorPolicy is 'ignore', graphQL errors are not populated and cannot be detected.
   Work-around: useEffect will trigger onError when error changes.
 */
 export function useProfileQuery(props?: {
   onError: (queryError: ApolloError) => void;
 }): QueryReturnType {
+  const errorToTriggerRef = useRef<ApolloError | undefined>(undefined);
+  const storeTriggeredError = (newRef: ApolloError | undefined) => {
+    errorToTriggerRef.current = newRef;
+  };
   const [fetch, { data, error, loading, refetch }] = useLazyQuery<ProfileRoot>(
     MY_PROFILE,
     {
@@ -39,16 +43,23 @@ export function useProfileQuery(props?: {
     props && props.onError ? props.onError : _.noop
   );
   useEffect(() => {
-    if (error) {
+    if (!errorToTriggerRef.current && error) {
       dependencySafeOnError(error);
+      storeTriggeredError(error);
     }
   }, [dependencySafeOnError, error]);
 
   return {
-    fetch,
+    fetch: () => {
+      storeTriggeredError(undefined);
+      return fetch();
+    },
     data,
     error,
     loading,
-    refetch,
+    refetch: () => {
+      storeTriggeredError(undefined);
+      return refetch();
+    },
   };
 }

yarn.lock

@@ -10,24 +10,23 @@
     lodash.debounce "^4.0.8"
     lodash.throttle "^4.1.1"
 
-"@apollo/client@^3.3.11":
-  version "3.3.20"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.3.20.tgz#8f0935fa991857e9cf2e73c9bd378ad7ec97caf8"
-  integrity sha512-hS7UmBwJweudw/J3M0RAcusMHNiRuGqkRH6g91PM2ev8cXScIMdXr/++9jo7wD1nAITMCMF4HQQ3LFaw/Or0Bw==
+"@apollo/client@^3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.6.tgz#911929df073280689efd98e5603047b79e0c39a2"
+  integrity sha512-XHoouuEJ4L37mtfftcHHO1caCRrKKAofAwqRoq28UQIPMJk+e7n3X9OtRRNXKk/9tmhNkwelSary+EilfPwI7A==
   dependencies:
     "@graphql-typed-document-node/core" "^3.0.0"
-    "@types/zen-observable" "^0.8.0"
     "@wry/context" "^0.6.0"
     "@wry/equality" "^0.5.0"
-    fast-json-stable-stringify "^2.0.0"
-    graphql-tag "^2.12.0"
+    "@wry/trie" "^0.3.0"
+    graphql-tag "^2.12.3"
     hoist-non-react-statics "^3.3.2"
-    optimism "^0.16.0"
+    optimism "^0.16.1"
     prop-types "^15.7.2"
     symbol-observable "^4.0.0"
-    ts-invariant "^0.7.0"
-    tslib "^1.10.0"
-    zen-observable "^0.8.14"
+    ts-invariant "^0.9.4"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.0"
 
 "@apollo/federation@0.25.0":
   version "0.25.0"
@@ -2567,11 +2566,6 @@
   resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.37.tgz#7a52854ac602ba0dc969bebc960559f7464a1686"
   integrity sha512-cDqR/ez4+iAVQYOwadXjKX4Dq1frtnDGV2GNVKj3aUVKVCKRvsr8esFk66j+LgeeJGmrMcBkkfCf3zk13MjV7A==
 
-"@types/zen-observable@^0.8.0":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.2.tgz#808c9fa7e4517274ed555fa158f2de4b4f468e71"
-  integrity sha512-HrCIVMLjE1MOozVoD86622S7aunluLb2PJdPfb3nYiEtohm8mIB/vyv0Fd37AdeMFrTUQXEunw78YloMA3Qilg==
-
 "@typescript-eslint/eslint-plugin@^4.5.0":
   version "4.28.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.1.tgz#c045e440196ae45464e08e20c38aff5c3a825947"
@@ -6969,10 +6963,10 @@ graphql-tag@2.12.4:
   dependencies:
     tslib "^2.1.0"
 
-graphql-tag@^2.10.1, graphql-tag@^2.12.0:
-  version "2.12.5"
-  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.5.tgz#5cff974a67b417747d05c8d9f5f3cb4495d0db8f"
-  integrity sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ==
+graphql-tag@^2.10.1, graphql-tag@^2.12.3:
+  version "2.12.6"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
+  integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
   dependencies:
     tslib "^2.1.0"
 
@@ -9802,7 +9796,7 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimism@^0.16.0:
+optimism@^0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.1.tgz#7c8efc1f3179f18307b887e18c15c5b7133f6e7d"
   integrity sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==
@@ -13108,10 +13102,10 @@ ts-invariant@^0.4.0:
   dependencies:
     tslib "^1.9.3"
 
-ts-invariant@^0.7.0:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.7.5.tgz#f9658719f9a7737b117d09820d952aacf6263f9c"
-  integrity sha512-qfVyqTYWEqADMtncLqwpUdMjMSXnsqOeqGtj1LeJNFDjz8oqZ1YxLEp29YCOq65z0LgEiERqQ8ThVjnfibJNpg==
+ts-invariant@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.9.4.tgz#42ac6c791aade267dd9dc65276549df5c5d71cac"
+  integrity sha512-63jtX/ZSwnUNi/WhXjnK8kz4cHHpYS60AnmA6ixz17l7E12a5puCWFlNpkne5Rl0J8TBPVHpGjsj4fxs8ObVLQ==
   dependencies:
     tslib "^2.1.0"
 
@@ -13151,10 +13145,10 @@ tslib@^1, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
-  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
@@ -14198,7 +14192,14 @@ zen-observable-ts@^0.8.21:
     tslib "^1.9.3"
     zen-observable "^0.8.0"
 
-zen-observable@^0.8.0, zen-observable@^0.8.14:
+zen-observable-ts@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz#c2f5ccebe812faf0cfcde547e6004f65b1a6d769"
+  integrity sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g==
+  dependencies:
+    zen-observable "0.8.15"
+
+zen-observable@0.8.15, zen-observable@^0.8.0:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==