trying to upgrade them to modern front-end

apolloschurchapp/ios/Podfile.lock

@@ -307,6 +307,8 @@ PODS:
     - React
   - react-native-config (0.11.7):
     - React
+  - react-native-flipper (0.138.0):
+    - React-Core
   - react-native-geolocation (2.0.2):
     - React
   - react-native-geolocation-service (5.1.1):
@@ -508,6 +510,7 @@ DEPENDENCIES:
   - react-native-amplitude-analytics (from `../node_modules/react-native-amplitude-analytics`)
   - "react-native-apollos-player (from `../node_modules/@apollosproject/ui-media-player`)"
   - react-native-config (from `../node_modules/react-native-config`)
+  - react-native-flipper (from `../node_modules/react-native-flipper`)
   - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
   - react-native-geolocation-service (from `../node_modules/react-native-geolocation-service`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
@@ -618,6 +621,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@apollosproject/ui-media-player"
   react-native-config:
     :path: "../node_modules/react-native-config"
+  react-native-flipper:
+    :path: "../node_modules/react-native-flipper"
   react-native-geolocation:
     :path: "../node_modules/@react-native-community/geolocation"
   react-native-geolocation-service:
@@ -737,6 +742,7 @@ SPEC CHECKSUMS:
   react-native-amplitude-analytics: b3f6d615c005d22532cdf95701eb6e6b2c454ab2
   react-native-apollos-player: 4ddfa7a5acdd5b5d1015d63c0724a033dfea7166
   react-native-config: 55548054279d92e0e4566ea15a8b9b81028ec342
+  react-native-flipper: 51a1b8f34ce185e028f8158382c3882d6ea3cccf
   react-native-geolocation: c956aeb136625c23e0dce0467664af2c437888c9
   react-native-geolocation-service: f33626f1ae12381ca2ae60f98b2f5edd676bf95a
   react-native-image-picker: 28d8d1f5a643119876b8b2c7d4d1dcfb2b232dd4

apolloschurchapp/loadConfig.js

@@ -1,19 +1,4 @@
 import ApollosConfig from '@apollosproject/config';
 import FRAGMENTS from '@apollosproject/ui-fragments';
-import fragmentTypes from './src/client/fragmentTypes.json';
 
-// Create a map all the interfaces each type implements.
-// If UniversalContentItem implements Node, Card, and ContentNode,
-// our typemap would be { UniversalContentItem: ['Node', 'Card', 'ContentNode'] }
-//
-// Used with Apollo Client cache resolver as well as internal Apollos UI functions
-const TYPEMAP = {};
-fragmentTypes.__schema.types.forEach((supertype) => {
-  if (supertype.possibleTypes) {
-    TYPEMAP[supertype.name] = [
-      ...supertype.possibleTypes.map((subtype) => subtype.name),
-    ];
-  }
-});
-
-ApollosConfig.loadJs({ FRAGMENTS, TYPEMAP });
+ApollosConfig.loadJs({ FRAGMENTS });

apolloschurchapp/package.json

@@ -88,6 +88,8 @@
     "react-native-amplitude-analytics": "^0.2.12",
     "react-native-config": "^0.11.7",
     "react-native-device-info": "^4.0.1",
+    "react-native-flipper": "^0.138.0",
+    "react-native-flipper-apollo-devtools": "^0.0.2",
     "react-native-geolocation-service": "^5.1.1",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-picker": "^3.1.4",

apolloschurchapp/scripts/get-introspection-data.js

@@ -42,7 +42,7 @@ const getIntrospectionData = async () => {
     );
 
     await fs.writeFileSync(
-      Path.resolve(__dirname, '../src/client/fragmentTypes.json'),
+      Path.resolve(__dirname, '../fragmentTypes.json'),
       JSON.stringify(data)
     );
 

apolloschurchapp/src/client/cache.js

@@ -2,23 +2,39 @@ import { InMemoryCache } from '@apollo/client/cache';
 import AsyncStorage from '@react-native-community/async-storage';
 import { CachePersistor } from 'apollo3-cache-persist';
 import ApollosConfig from '@apollosproject/config';
+import fragmentTypes from '../../fragmentTypes.json';
 
 // We reset our apollo cache based an env value and static number.
 // In the future, we should also look at resetting the app when an error occurs related to Apollo.
 // You can also increment this number to force a manual reset of the cache.
 const SCHEMA_VERSION = `${ApollosConfig.SCHEMA_VERSION}-1`; // Must be a string.
 const SCHEMA_VERSION_KEY = 'apollo-schema-version';
+const possibleTypes = {};
 
-const nodeCacheRedirect = (_, { id }, { getCacheKey }) =>
-  id ? getCacheKey({ __typename: id.split(':')[0], id }) : null;
+fragmentTypes.__schema.types.forEach((supertype) => {
+  if (supertype.possibleTypes) {
+    possibleTypes[supertype.name] = [
+      ...supertype.possibleTypes.map((subtype) => subtype.name),
+    ];
+  }
+});
 
 const cache = new InMemoryCache({
-  possibleTypes: ApollosConfig.TYPEMAP,
-  cacheRedirects: {
-    Query: {
-      node: nodeCacheRedirect,
-    },
-  },
+  possibleTypes,
+  //typePolicies: {
+  //Query: {
+  //fields: {
+  //node: {
+  //read(_, { args, toReference }) {
+  //return toReference({
+  //__typename: args.id.split(':')[0],
+  //id: args.id,
+  //});
+  //},
+  //},
+  //},
+  //},
+  //},
 });
 
 const persistor = new CachePersistor({

apolloschurchapp/src/client/index.js

@@ -1,14 +1,19 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ApolloProvider, ApolloClient, ApolloLink, gql } from '@apollo/client';
+import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
+import { sha256 } from 'react-native-sha256';
 import { getVersion, getApplicationName } from 'react-native-device-info';
+import { Platform } from 'react-native';
+import { createUploadLink } from 'apollo-upload-client';
+import ApollosConfig from '@apollosproject/config';
+import { enableFlipperApolloDevtools } from 'react-native-flipper-apollo-devtools';
 
 import { authLink, buildErrorLink } from '@apollosproject/ui-auth';
 import { updatePushId } from '@apollosproject/ui-notifications';
 
 import { NavigationService } from '@apollosproject/ui-kit';
 
-import httpLink from './httpLink';
 import cache, { ensureCacheHydration } from './cache';
 
 const wipeData = () =>
@@ -37,9 +42,36 @@ const onAuthError = async () => {
   NavigationService.resetToAuth();
 };
 
+// Android's emulator requires localhost network traffic to go through 10.0.2.2
+const uri = ApollosConfig.APP_DATA_URL.replace(
+  'localhost',
+  Platform.OS === 'android' ? '10.0.2.2' : 'localhost'
+);
+
 const errorLink = buildErrorLink(onAuthError);
+const apqLink = createPersistedQueryLink({
+  sha256,
+  useGETForHashedQueries: true,
+});
 
-const link = ApolloLink.from([authLink, errorLink, httpLink]);
+const link = ApolloLink.from([
+  authLink,
+  errorLink,
+  apqLink,
+  createUploadLink({
+    uri,
+    headers: {
+      // Stops Fetch (and the underlying HTTP stack) from caching on our behalf.
+      // Caching should be managed by our server and apollo-client
+      // Fetch handles the `cache-control: private` option in a way that
+      // causes issues when logging in as a different user.
+      'Cache-Control': 'no-cache, no-store',
+      ...(ApollosConfig.CHURCH_HEADER
+        ? { 'x-church': ApollosConfig.CHURCH_HEADER }
+        : {}),
+    },
+  }),
+]);
 
 export const client = new ApolloClient({
   link,
@@ -64,6 +96,7 @@ export const client = new ApolloClient({
     },
   },
 });
+enableFlipperApolloDevtools(client);
 
 wipeData();
 // Ensure that media player still works after logout.

yarn.lock

@@ -21,6 +21,24 @@
     tslib "^1.10.0"
     zen-observable "^0.8.14"
 
+"@apollo/client@^3.2.3":
+  version "3.5.10"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.10.tgz#43463108a6e07ae602cca0afc420805a19339a71"
+  integrity sha512-tL3iSpFe9Oldq7gYikZK1dcYxp1c01nlSwtsMz75382HcI6fvQXyFXUCJTTK3wgO2/ckaBvRGw7VqjFREdVoRw==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.0.0"
+    "@wry/context" "^0.6.0"
+    "@wry/equality" "^0.5.0"
+    "@wry/trie" "^0.3.0"
+    graphql-tag "^2.12.3"
+    hoist-non-react-statics "^3.3.2"
+    optimism "^0.16.1"
+    prop-types "^15.7.2"
+    symbol-observable "^4.0.0"
+    ts-invariant "^0.9.4"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.0"
+
 "@apollo/[email protected]":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@apollo/protobufjs/-/protobufjs-1.2.2.tgz#4bd92cd7701ccaef6d517cdb75af2755f049f87c"
@@ -9507,6 +9525,13 @@ graphql-tag@^2.12.0:
   dependencies:
     tslib "^2.1.0"
 
+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"
+
 [email protected]:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-3.1.1.tgz#d593358f01e7c8b1671a17b70ddb034dea9dbc50"
@@ -13845,7 +13870,7 @@ opencollective-postinstall@^2.0.2:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
   integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
 
-optimism@^0.16.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==
@@ -14945,6 +14970,18 @@ react-native-device-info@^4.0.1:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-4.0.1.tgz#bade972e7a995ac187a82745a458cba98b72dea0"
   integrity sha512-a0Q/gwy1oQhu17CeMq9xMZ3Sl9foaj8hFwVuy9jieqkkoQwkHnPDI+R7bEW0MNMgUCPPrzzXvka+FLGOWVqacg==
 
+react-native-flipper-apollo-devtools@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-flipper-apollo-devtools/-/react-native-flipper-apollo-devtools-0.0.2.tgz#2fea3eb2467efafd005f0362fb37ef742b8fa684"
+  integrity sha512-NX+sWaWgtg4bB8Bw7LrlWlcYj8k0MDnnB0gj4L9a3+tBIsz73Ce6uAaIteL2Un2jZVOG6eKtClqlVf88cJsD9g==
+  dependencies:
+    "@apollo/client" "^3.2.3"
+
+react-native-flipper@^0.138.0:
+  version "0.138.0"
+  resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.138.0.tgz#7b795d66b6134e2d802a5e0355dbd9e5ed1fd5b6"
+  integrity sha512-8NNsuAyk/gZGZnmzx2VMNTnXW5WTlV3TQ1IIwHxNpz17tWg4wKttNWv1gk2ZArLwdHnntAqjtOoVq8NR8HFaNA==
+
 react-native-geolocation-service@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-native-geolocation-service/-/react-native-geolocation-service-5.1.1.tgz#21b4aba54c5ce00a2180b2807581131d31bec48b"
@@ -17240,6 +17277,13 @@ ts-invariant@^0.7.0:
   dependencies:
     tslib "^2.1.0"
 
+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"
+
 tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
@@ -18366,7 +18410,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"
+
+[email protected], zen-observable@^0.8.0, zen-observable@^0.8.14:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==