feature: Adds collections & uploads Apollo to version 3

index.js

@@ -2,11 +2,7 @@ import App from "./src"
 import { AppRegistry } from "react-native"
 import * as Sentry from "@sentry/react-native"
 import "react-native-gesture-handler"
-// import { enableScreens } from "react-native-screens"
-
-// This enables the native stack navigator using (react-native-screens)
-// https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0/#native-stack-navigator
-// Leaving it commented out for now because there's glitch when navigating to the Product view
-// enableScreens()
+// "core-js/features/promise" is a polyfill Apollo refetch in RN, see: https://github.com/apollographql/apollo-client/issues/6381
+import "core-js/features/promise"
 
 AppRegistry.registerComponent("seasons", () => App)

package.json

@@ -22,7 +22,7 @@
     "build:fastlane": "fastlane ios beta"
   },
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.1",
+    "@apollo/client": "^3.3.6",
     "@expo/react-native-action-sheet": "^3.8.0",
     "@material-ui/core": "^4.11.1",
     "@react-native-community/async-storage": "~1.12.0",
@@ -41,24 +41,21 @@
     "@sentry/react-native": "^1.1.0",
     "@types/jest": "^24.0.18",
     "@types/luxon": "^1.24.3",
-    "apollo-boost": "^0.4.4",
     "apollo-cache": "^1.3.2",
     "apollo-cache-persist": "^0.1.1",
-    "apollo-client": "2.6.4",
-    "apollo-link": "^1.2.12",
     "apollo-link-context": "^1.0.19",
-    "apollo-link-error": "^1.1.12",
+    "apollo-link-error": "^1.1.13",
     "apollo-upload-client": "^14.1.1",
     "apollo-utilities": "^1.3.2",
     "aws-sdk": "^2.639.0",
+    "core-js": "^3.8.3",
     "expo": "^39.0.0",
     "graphql": "^14.5.8",
     "lodash": "^4.17.15",
     "luxon": "^1.21.1",
     "node-fetch": "^2.6.0",
     "querystring": "^0.2.0",
     "react": "16.13.1",
-    "react-apollo": "^3.1.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.3",
     "react-native-animatable": "^1.3.3",

src/Apollo/index.ts

@@ -1,33 +1,31 @@
-import { InMemoryCache, IntrospectionFragmentMatcher } from "apollo-cache-inmemory"
-import { persistCache } from "apollo-cache-persist"
-import { ApolloClient } from "apollo-client"
-import { ApolloLink, Observable } from "apollo-link"
+import { ApolloLink, Observable, ApolloClient, InMemoryCache, HttpLink } from "@apollo/client"
 import { setContext } from "apollo-link-context"
 import { onError } from "apollo-link-error"
-import { createUploadLink } from "apollo-upload-client"
 import { getAccessTokenFromSession, getNewToken } from "App/utils/auth"
-import { config, Env } from "App/utils/config"
 import { Platform } from "react-native"
-import unfetch from "unfetch"
-
-import AsyncStorage from "@react-native-community/async-storage"
+import { offsetLimitPagination } from "@apollo/client/utilities"
 import * as Sentry from "@sentry/react-native"
-
-import introspectionQueryResultData from "../fragmentTypes.json"
 import { resolvers, typeDefs } from "./resolvers"
 
 export const setupApolloClient = async () => {
-  const fragmentMatcher = new IntrospectionFragmentMatcher({
-    introspectionQueryResultData,
+  const cache = new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          fitPicsCount: {
+            read(newCount) {
+              return newCount
+            },
+          },
+          fitPics: offsetLimitPagination(),
+        },
+      },
+    },
   })
 
-  const cache = new InMemoryCache({ fragmentMatcher })
-
-  const link = createUploadLink({
-    uri: config.get(Env.MONSOON_ENDPOINT) || "http://localhost:4000/",
-    // FIXME: unfetch here is being used for this fix https://github.com/jhen0409/react-native-debugger/issues/432
-    fetch: unfetch,
-  })
+  const httpLink = new HttpLink({
+    uri: process.env.MONSOON_ENDPOINT || "http://localhost:4000/", // Server URL (must be absolute)
+  }) as any
 
   const authLink = setContext(async (_, { headers: oldHeaders }) => {
     const headers = { ...oldHeaders, application: "harvest", platform: Platform.OS }
@@ -49,6 +47,7 @@ export const setupApolloClient = async () => {
     // return the headers to the context so createUploadLink can read them
   })
 
+  // @ts-ignore
   const errorLink = onError(({ graphQLErrors, networkError, operation, forward, response }) => {
     if (graphQLErrors) {
       console.log("graphQLErrors", graphQLErrors)
@@ -78,7 +77,7 @@ export const setupApolloClient = async () => {
     if (networkError) {
       console.log("networkError", JSON.stringify(networkError))
       // User access token has expired
-      if (networkError.statusCode === 401) {
+      if ((networkError as any).statusCode === 401) {
         // We assume we have both tokens needed to run the async request
         // Let's refresh token through async request
         return new Observable((observer) => {
@@ -112,25 +111,12 @@ export const setupApolloClient = async () => {
     }
   })
 
-  const accessToken = await getAccessTokenFromSession()
-  cache.writeData({
-    data: {
-      isLoggedIn: !!accessToken,
-      localBagItems: [],
-    },
-  })
-
-  await persistCache({
-    cache,
-    storage: AsyncStorage,
-  })
-
   return new ApolloClient({
     // Provide required constructor fields
-    cache,
-    link: ApolloLink.from([authLink, errorLink, link]),
+    link: ApolloLink.from([authLink, errorLink, httpLink]) as any,
     typeDefs,
     resolvers,
+    cache,
     // Provide some optional constructor fields
     name: "react-web-client",
     version: "1.3",

src/Apollo/resolvers.ts

@@ -8,7 +8,6 @@ export const typeDefs = gql`
     variantID: ID!
   }
   extend type Query {
-    isLoggedIn: Boolean!
     localBagItems: [LocalProduct!]!
     isInBag(productID: ID!): Boolean!
   }
@@ -28,7 +27,7 @@ interface AppResolvers extends Resolvers {
   // We will update this with our app's resolvers later
 }
 
-export const resolvers = {
+export const resolvers: any = {
   localBagItems: (_, __, { cache }) => {
     const queryResult = cache.readQuery({
       query: GET_LOCAL_BAG,

src/App.tsx

@@ -5,11 +5,9 @@ import DeviceInfo from "react-native-device-info"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { enableScreens } from "react-native-screens"
 import stripe from "tipsi-stripe"
-
-import { ApolloProvider } from "@apollo/react-hooks"
+import { ApolloProvider } from "@apollo/client"
 import AsyncStorage from "@react-native-community/async-storage"
 import * as Sentry from "@sentry/react-native"
-
 import { setupApolloClient } from "./Apollo"
 import { NetworkProvider } from "./NetworkProvider"
 import { config, Env } from "./utils/config"
@@ -22,6 +20,7 @@ export const App = () => {
     async function loadClient() {
       await config.start()
       const client = await setupApolloClient()
+
       setApolloClient(client)
 
       if (!__DEV__) {

src/Components/Pause/PauseButtons.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { Linking } from "react-native"
 import { ButtonVariant } from "../Button"
 import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext"
-import { useMutation } from "react-apollo"
+import { useMutation } from "@apollo/client"
 import gql from "graphql-tag"
 import { DateTime } from "luxon"
 import { GET_MEMBERSHIP_INFO } from "App/Scenes/Account/MembershipInfo/MembershipInfo"

src/Navigation/AuthProvider.tsx

@@ -104,12 +104,6 @@ export const AuthProvider = React.forwardRef<AuthProviderRef, AuthProviderProps>
         RNPusherPushNotifications.clearAllState()
         apolloClient.resetStore()
         analytics.reset()
-        apolloClient.writeData({
-          data: {
-            isLoggedIn: false,
-            localBagItems: [],
-          },
-        })
         dispatch({ type: "SIGN_OUT" })
       },
       resetStore: () => {

src/Navigation/ErrorPopUp/PopUpContext.ts

@@ -1,5 +1,5 @@
+import { PopUpData } from "@seasons/eclipse"
 import React, { useContext } from "react"
-import { PopUpData } from "./PopUpProvider"
 
 export const usePopUpContext = () => useContext(PopUpContext)
 

src/Navigation/ErrorPopUp/PopUpProvider.tsx

@@ -1,17 +1,7 @@
+import { PopUpData } from "@seasons/eclipse"
 import React, { useReducer } from "react"
 import PopUpContext from "./PopUpContext"
 
-export interface PopUpData {
-  title?: string
-  icon?: JSX.Element
-  note?: string
-  buttonText?: string
-  onClose: any
-  theme?: "light" | "dark"
-  secondaryButtonText?: string
-  secondaryButtonOnPress?: () => void
-}
-
 enum PopUpAction {
   Show = "SHOW",
   Hide = "HIDE",

src/Navigation/Stacks.tsx

@@ -18,6 +18,7 @@ import { SurpriseMe } from "App/Scenes/Bag/SurpriseMe"
 import { Brand } from "App/Scenes/Brand"
 import { Brands } from "App/Scenes/Brands"
 import { Browse, Filters } from "App/Scenes/Browse"
+import { CollectionScene } from "App/Scenes/Collection"
 import { CreateAccount } from "App/Scenes/CreateAccount"
 import { ApplyPromoCode } from "App/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCode"
 import { EditPaymentModal } from "App/Scenes/CreateAccount/Admitted/ChoosePlanPane/EditPaymentModal"
@@ -147,6 +148,11 @@ const HomeStackScreen = () => {
       <HomeStack.Screen name={Schema.PageNames.Home} component={Home} />
       <HomeStack.Screen name={Schema.PageNames.Product} component={Product} initialParams={{ id: "" }} />
       <HomeStack.Screen name={Schema.PageNames.Brand} component={Brand} initialParams={{ id: "" }} />
+      <HomeStack.Screen
+        name={Schema.PageNames.Collection}
+        component={CollectionScene}
+        initialParams={{ collectionID: "" }}
+      />
       <HomeStack.Screen name={Schema.PageNames.Tag} component={Tag} />
       <HomeStack.Screen name={Schema.PageNames.Brands} component={Brands} />
       <HomeStack.Screen name={Schema.PageNames.Webview} component={Webview} />

src/Navigation/schema.ts

@@ -27,6 +27,7 @@ export enum PageNames {
   Brand = "Brand",
   Brands = "Brands",
   FitPicDetail = "FitPicDetail",
+  Collection = "Collection",
 
   // Browse
   Browse = "Browse",

src/Notifications/NotificationsProvider.tsx

@@ -6,7 +6,7 @@ import { Platform } from "react-native"
 import gql from "graphql-tag"
 import NotificationsContext from "./NotificationsContext"
 import RNPusherPushNotifications from "react-native-pusher-push-notifications"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { useNavigation } from "@react-navigation/native"
 import { getUserSession } from "App/utils/auth"
 

src/Scenes/Account/Account.tsx

@@ -19,7 +19,7 @@ import {
 import gql from "graphql-tag"
 import { DateTime } from "luxon"
 import { default as React, useEffect } from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { Linking, Platform, ScrollView, StatusBar } from "react-native"
 import * as Animatable from "react-native-animatable"
 import Share from "react-native-share"

src/Scenes/Account/Components/NotificationToggle.tsx

@@ -6,7 +6,7 @@ import { Text, Linking, AppState } from "react-native"
 import { checkNotifications } from "react-native-permissions"
 import { useNotificationsContext } from "App/Notifications/NotificationsContext"
 import { useTracking, Schema } from "App/utils/track"
-import { useMutation } from "react-apollo"
+import { useMutation } from "@apollo/client"
 import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext"
 import * as Sentry from "@sentry/react-native"
 import { GetUser_me_customer_user_pushNotification } from "App/generated/getUser"

src/Scenes/Account/EditShippingAddress/EditShippingAddress.tsx

@@ -6,7 +6,7 @@ import { FlatList, Keyboard, KeyboardAvoidingView } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { StatePickerPopUp } from "./StatePickerPopup"
 import gql from "graphql-tag"
-import { useMutation } from "react-apollo"
+import { useMutation } from "@apollo/client"
 import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext"
 import { FadeBottom2 } from "Assets/svgs/FadeBottom2"
 

src/Scenes/Account/EditStylePreferences/EditStylePreferences.tsx

@@ -8,7 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { areIndicesEqual, Index, Item, Section, sections } from "./Sections"
 
 import gql from "graphql-tag"
-import { useMutation } from "react-apollo"
+import { useMutation } from "@apollo/client"
 import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext"
 
 const UPDATE_STYLE_PREFERENCES = gql`

src/Scenes/Account/InviteFriends/InviteFriends.tsx

@@ -1,11 +1,11 @@
 import Clipboard from "@react-native-community/clipboard"
-import { gql } from "apollo-boost"
+import gql from "graphql-tag"
 import { Box, Button, Container, FixedBackArrow, Flex, Sans, Separator, Spacer } from "App/Components"
 import { PopUp } from "App/Components/PopUp"
 import { color } from "App/utils"
 import { screenTrack } from "App/utils/track"
 import React, { useState } from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { Dimensions, Share, TouchableOpacity } from "react-native"
 import Contacts from "react-native-contacts"
 import { useSafeArea } from "react-native-safe-area-context"

src/Scenes/Account/MembershipInfo/MembershipInfo.tsx

@@ -1,6 +1,6 @@
 import gql from "graphql-tag"
 import React from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { ScrollView } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { Box, Button, Container, FixedBackArrow, Sans, Separator, Spacer } from "App/Components"

src/Scenes/Account/MembershipInfo/UpdatePaymentPlanModal.tsx

@@ -3,7 +3,7 @@ import { Loader } from "App/Components/Loader"
 import { ChoosePlanPane } from "App/Scenes/CreateAccount/Admitted"
 import { GET_PLANS } from "App/Scenes/CreateAccount/CreateAccount"
 import React, { useEffect, useState } from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { screenTrack } from "App/utils/track"
 
 export const UpdatePaymentPlanModal = screenTrack()(({ navigation, route }) => {

src/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping.tsx

@@ -1,6 +1,6 @@
 import gql from "graphql-tag"
 import React, { useState } from "react"
-import { useMutation, useQuery } from "react-apollo"
+import { useMutation, useQuery } from "@apollo/client"
 import { Dimensions, Keyboard, KeyboardAvoidingView } from "react-native"
 import { KeyboardAwareFlatList } from "react-native-keyboard-aware-scroll-view"
 import { useSafeAreaInsets } from "react-native-safe-area-context"

src/Scenes/Account/PaymentAndShipping/PaymentAndShipping.tsx

@@ -2,7 +2,7 @@ import { Box, Container, FixedBackArrow, FixedButton, Sans, Spacer, Separator }
 import { Loader } from "App/Components/Loader"
 import gql from "graphql-tag"
 import React, { useEffect } from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { FlatList } from "react-native"
 import { screenTrack } from "App/utils/track"
 import { color } from "App/utils"

src/Scenes/Account/PersonalPreferences/PersonalPreferences.tsx

@@ -2,7 +2,7 @@ import { Box, Container, FixedBackArrow, Sans, Flex } from "App/Components"
 import { Loader } from "App/Components/Loader"
 import gql from "graphql-tag"
 import React, { useEffect, useState } from "react"
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/client"
 import { screenTrack } from "App/utils/track"
 import { TabBar } from "App/Components/TabBar"
 import { PersonalTab } from "./PersonalTab"

src/Scenes/Bag/Bag.tsx

@@ -13,7 +13,7 @@ import { Container } from "Components/Container"
 import { TabBar } from "Components/TabBar"
 import { assign, fill } from "lodash"
 import React, { useEffect, useState } from "react"
-import { useMutation, useQuery } from "react-apollo"
+import { useMutation, useQuery } from "@apollo/client"
 import { FlatList, RefreshControl, StatusBar } from "react-native"
 import { State as CreateAccountState, UserState as CreateAccountUserState } from "../CreateAccount/CreateAccount"
 import { CHECK_ITEMS, GET_BAG, GET_LOCAL_BAG, REMOVE_FROM_BAG, REMOVE_FROM_BAG_AND_SAVE_ITEM } from "./BagQueries"

src/Scenes/Bag/Components/BagItem.tsx

@@ -11,7 +11,7 @@ import { get, head } from "lodash"
 import React, { useState } from "react"
 import { TouchableOpacity, TouchableWithoutFeedback } from "react-native"
 import styled from "styled-components/native"
-import { useMutation } from "@apollo/react-hooks"
+import { useMutation } from "@apollo/client"
 import { ADD_OR_REMOVE_FROM_LOCAL_BAG, GET_BAG } from "../BagQueries"
 import { GET_BROWSE_PRODUCTS } from "App/Scenes/Browse/queries/browseQueries"
 

src/Scenes/Bag/Components/BagTab.tsx

@@ -13,7 +13,7 @@ import { AddSlot, DarkInstagram, Stylist, SurpriseMe } from "Assets/svgs"
 import { assign, fill } from "lodash"
 import { DateTime } from "luxon"
 import React, { useEffect, useState } from "react"
-import { useLazyQuery, useMutation } from "react-apollo"
+import { useLazyQuery, useMutation } from "@apollo/client"
 import { Linking } from "react-native"
 import { GET_BAG, GET_LOCAL_BAG_ITEMS } from "../BagQueries"
 import { BagCardButton } from "./BagCardButton"

src/Scenes/Bag/Components/SavedItem.tsx

@@ -7,7 +7,7 @@ import { color } from "App/utils"
 import { Schema, useTracking } from "App/utils/track"
 import { CheckCircled } from "Assets/svgs"
 import React, { useState } from "react"
-import { useMutation } from "react-apollo"
+import { useMutation } from "@apollo/client"
 import { TouchableWithoutFeedback } from "react-native"
 import styled from "styled-components/native"
 import * as Sentry from "@sentry/react-native"