Add apollo to the reactotron example app.

Author: markrickert

apps/example-app/app/app.tsx

@@ -22,16 +22,18 @@ import { useFonts } from "expo-font"
 import React from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
-import { useInitialRootStore } from "app/mobxStateTree"
+import { useInitialRootStore } from "app/stores/mobxStateTree"
 import { AppNavigator, useNavigationPersistence } from "app/navigators"
 import { ErrorBoundary } from "app/screens/ErrorScreen/ErrorBoundary"
 import * as storage from "app/utils/storage"
 import { customFontsToLoad } from "app/theme"
 import Config from "app/config"
 import { GestureHandlerRootView } from "react-native-gesture-handler"
 import { StatusBar, ViewStyle } from "react-native"
-import { store } from "app/redux"
+import { store } from "app/stores/redux"
 import { Provider as ReduxProvider } from "react-redux"
+import { ApolloProvider } from "@apollo/client"
+import { client as apolloClient } from "app/stores/apollo"
 
 export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"
 
@@ -101,17 +103,19 @@ function App(props: AppProps) {
   // otherwise, we're ready to render the app
   return (
     <ReduxProvider store={store}>
-      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <ErrorBoundary catchErrors={Config.catchErrors}>
-          <GestureHandlerRootView style={$container}>
-            <AppNavigator
-              linking={linking}
-              initialState={initialNavigationState}
-              onStateChange={onNavigationStateChange}
-            />
-          </GestureHandlerRootView>
-        </ErrorBoundary>
-      </SafeAreaProvider>
+      <ApolloProvider client={apolloClient}>
+        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+          <ErrorBoundary catchErrors={Config.catchErrors}>
+            <GestureHandlerRootView style={$container}>
+              <AppNavigator
+                linking={linking}
+                initialState={initialNavigationState}
+                onStateChange={onNavigationStateChange}
+              />
+            </GestureHandlerRootView>
+          </ErrorBoundary>
+        </SafeAreaProvider>
+      </ApolloProvider>
     </ReduxProvider>
   )
 }

apps/example-app/app/devtools/ReactotronConfig.ts

@@ -10,11 +10,13 @@ import { ArgType } from "reactotron-core-client"
 import { mst } from "reactotron-mst"
 import apisaucePlugin from "reactotron-apisauce"
 import { reactotronRedux } from "reactotron-redux"
+import apolloPlugin from "reactotron-apollo-client"
 
 import { clear } from "app/utils/storage"
 import { goBack, resetRoot, navigate } from "app/navigators/navigationUtilities"
 
 import { Reactotron } from "./ReactotronClient"
+import { client } from "../stores/apollo" // <--- update this location
 
 const reactotron = Reactotron.configure({
   name: require("../../package.json").name,
@@ -29,8 +31,9 @@ const reactotron = Reactotron.configure({
     mst({
       /** ignore some chatty `mobx-state-tree` actions  */
       filter: (event) => /postProcessSnapshot|@APPLY_SNAPSHOT/.test(event.name) === false,
-    }),
+    })
   )
+  .use(apolloPlugin({ apolloClient: client }))
 
 if (Platform.OS !== "web") {
   reactotron.setAsyncStorageHandler?.(AsyncStorage)

apps/example-app/app/navigators/AppNavigator.tsx

@@ -37,6 +37,7 @@ export type AppStackParamList = {
   MobxStateTree: undefined
   AsyncStorage: undefined
   Redux: undefined
+  Apollo: undefined
 }
 
 /**
@@ -103,6 +104,7 @@ const AppStack = function AppStack() {
           options={{ title: "Async Storage" }}
         />
         <Stack.Screen name="Redux" component={Screens.ReduxScreen} />
+        <Stack.Screen name="Apollo" component={Screens.ApolloScreen} />
       </Stack.Group>
     </Stack.Navigator>
   )

apps/example-app/app/screens/ApolloScreen.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import { FlatList, TextStyle, View, ViewStyle } from "react-native"
+import { ListItem, Text } from "app/components"
+import { AppStackScreenProps } from "app/navigators"
+import { colors, spacing } from "app/theme"
+import { useSafeAreaInsetsStyle } from "app/utils/useSafeAreaInsetsStyle"
+import { gql, useQuery } from "@apollo/client"
+
+const CHAPTERS_QUERY = gql`
+  query Chapters {
+    chapters {
+      id
+      number
+      title
+    }
+  }
+`
+
+const ChapterItem = ({
+  chapter,
+  onPress,
+}: {
+  chapter: { id: number; number: number; title: string }
+  onPress?: () => void
+}) => {
+  const { number, title } = chapter
+  let header, subheader
+
+  if (number) {
+    header = `Chapter ${number}`
+    subheader = ` - ${title}`
+  } else {
+    header = title
+    subheader = ""
+  }
+
+  return (
+    <ListItem
+      text={`${header}${subheader}`}
+      onPress={onPress}
+      containerStyle={{ paddingHorizontal: spacing.sm }}
+    />
+  )
+}
+
+interface ApolloScreenProps extends AppStackScreenProps<"Apollo"> {}
+
+export const ApolloScreen: React.FC<ApolloScreenProps> = function ApolloScreen() {
+  const { data, loading } = useQuery(CHAPTERS_QUERY)
+
+  const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+
+  return (
+    <FlatList
+      style={$container}
+      contentContainerStyle={$bottomContainerInsets}
+      data={loading ? [] : data.chapters}
+      renderItem={({ item }) => (
+        <ChapterItem
+          chapter={item}
+          // onPress={() => navigation.navigate("Chapter", { chapter: item })}
+        />
+      )}
+      ListHeaderComponent={() => {
+        return (
+          <View>
+            <Text
+              text="Reactotron can intercept and inspect Apollo client queries"
+              style={$subheading}
+              preset="subheading"
+            />
+            <Text text="Like this example from the GraphQL example app:" style={$subheading} />
+            <View style={$bottomBorder} />
+          </View>
+        )
+      }}
+      keyExtractor={(chapter) => chapter.id.toString()}
+    />
+  )
+}
+
+const $container: ViewStyle = {
+  flex: 1,
+  backgroundColor: colors.background,
+}
+
+const $text: TextStyle = {
+  color: colors.text,
+}
+const $subheading: TextStyle = {
+  ...$text,
+  margin: spacing.sm,
+}
+
+const $bottomBorder: ViewStyle = {
+  borderBottomWidth: 1,
+  borderBottomColor: colors.text,
+  marginHorizontal: spacing.sm,
+}

apps/example-app/app/screens/ErrorGeneratorScreen.tsx

@@ -4,8 +4,8 @@ import { useDispatch } from "react-redux"
 import { Button, Text } from "app/components"
 import type { AppStackScreenProps } from "app/navigators"
 import { colors, spacing } from "app/theme"
-import type { AppDispatch } from "app/redux"
-import { throwAnError, throwErrorAsync } from "app/redux/errorSlice"
+import type { AppDispatch } from "app/stores/redux"
+import { throwAnError, throwErrorAsync } from "app/stores/redux/errorSlice"
 import { useSafeAreaInsetsStyle } from "app/utils/useSafeAreaInsetsStyle"
 
 interface ErrorGeneratorScreenProps extends AppStackScreenProps<"ErrorGenerator"> {}

apps/example-app/app/screens/MobxStateTreeScreen.tsx

@@ -4,7 +4,7 @@ import { ScrollView, TextStyle, View, ViewStyle } from "react-native"
 import { Button, Text } from "app/components"
 import { AppStackScreenProps } from "app/navigators"
 import { colors, spacing } from "app/theme"
-import { useStores } from "app/mobxStateTree"
+import { useStores } from "app/stores/mobxStateTree"
 import { Repo } from "app/components/Repo"
 import { useSafeAreaInsetsStyle } from "app/utils/useSafeAreaInsetsStyle"
 

apps/example-app/app/screens/ReduxScreen.tsx

@@ -5,9 +5,9 @@ import { Button, Text } from "app/components"
 import { Repo } from "app/components/Repo"
 import { AppStackScreenProps } from "app/navigators"
 import { colors, spacing } from "app/theme"
-import type { AppDispatch, RootState } from "app/redux"
-import { fetchAsync, reset as repoReset } from "app/redux/repoSlice"
-import { changeSize, changeSpeed, reset as logoReset } from "app/redux/logoSlice"
+import type { AppDispatch, RootState } from "app/stores/redux"
+import { fetchAsync, reset as repoReset } from "app/stores/redux/repoSlice"
+import { changeSize, changeSpeed, reset as logoReset } from "app/stores/redux/logoSlice"
 import { useSafeAreaInsetsStyle } from "app/utils/useSafeAreaInsetsStyle"
 
 interface ReduxScreenProps extends AppStackScreenProps<"Redux"> {}

apps/example-app/app/screens/WelcomeScreen.tsx

@@ -72,6 +72,12 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = function WelcomeScree
               navigation.navigate("Redux")
             }}
           />
+          <ListItem
+            text="Apollo Client"
+            onPress={() => {
+              navigation.navigate("Apollo")
+            }}
+          />
         </View>
       </ScrollView>
     </SafeAreaView>

apps/example-app/app/screens/index.ts

@@ -7,6 +7,7 @@ export * from "./MobxStateTreeScreen"
 export * from "./ReduxScreen"
 export * from "./ErrorGeneratorScreen"
 export * from "./AsyncStorageScreen"
+export * from "./ApolloScreen"
 
 export * from "./ErrorScreen/ErrorBoundary"
 // export other screens here

apps/example-app/app/stores/apollo/index.tsx

@@ -0,0 +1,9 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client"
+
+const cache = new InMemoryCache()
+
+export const client = new ApolloClient({
+  uri: "https://api.graphql.guide/graphql",
+  cache,
+  defaultOptions: { watchQuery: { fetchPolicy: "cache-and-network" } },
+})