feat: apollo client dev tools

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
 
 let DevMenu = null
 /**
@@ -41,6 +43,7 @@ const reactotron = Reactotron.configure({
       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,15 @@ export type AppStackParamList = {
   MobxStateTree: undefined
   AsyncStorage: undefined
   Redux: undefined
+  Apollo: undefined
+  ApolloDetail: {
+    item: {
+      __typename: string
+      id: number
+      number: number | null
+      title: string
+    }
+  }
 }
 
 /**
@@ -103,6 +112,8 @@ const AppStack = function AppStack() {
           options={{ title: "Async Storage" }}
         />
         <Stack.Screen name="Redux" component={Screens.ReduxScreen} />
+        <Stack.Screen name="Apollo" component={Screens.ApolloScreen} />
+        <Stack.Screen name="ApolloDetail" component={Screens.ApolloDetailScreen} />
       </Stack.Group>
     </Stack.Navigator>
   )

apps/example-app/app/screens/ApolloDetailScreen.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"
+import { observer } from "mobx-react-lite"
+
+const SECTIONS_QUERY = gql`
+  query Sections($id: Int!) {
+    chapter(id: $id) {
+      sections {
+        number
+        title
+      }
+    }
+  }
+`
+
+interface Section {
+  number: number
+  title: string
+}
+
+interface SectionItemProps {
+  chapter: {
+    __typename: string
+    id: number
+    number: number | null
+    title: string
+  }
+  section: Section
+  onPress?: () => void
+}
+
+const SectionItem: React.FC<SectionItemProps> = ({ chapter, section, onPress }) => (
+  <ListItem
+    text={`${chapter.number}.${section.number}: ${section.title}`}
+    onPress={onPress}
+    containerStyle={{ paddingHorizontal: spacing.sm }}
+  />
+)
+
+interface ApolloDetailScreenProps extends AppStackScreenProps<"ApolloDetail"> {}
+
+export const ApolloDetailScreen: React.FC<ApolloDetailScreenProps> = observer(
+  function ApolloScreen({ route }) {
+    const id = route.params.item.id
+
+    const { data, loading } = useQuery(SECTIONS_QUERY, {
+      variables: { id },
+    })
+
+    const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+
+    return (
+      <FlatList
+        style={$container}
+        contentContainerStyle={$bottomContainerInsets}
+        data={loading ? [] : data.chapter.sections}
+        renderItem={({ item }) => <SectionItem section={item} chapter={route.params.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={(section) => section.number.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/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"
+import { useNavigation } from "@react-navigation/native"
+import { observer } from "mobx-react-lite"
+
+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> = observer(function ApolloScreen() {
+  const { data, loading } = useQuery(CHAPTERS_QUERY)
+  const navigation = useNavigation()
+
+  const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+
+  return (
+    <FlatList
+      style={$container}
+      contentContainerStyle={$bottomContainerInsets}
+      data={loading ? [] : data.chapters}
+      renderItem={({ item }) => (
+        <ChapterItem chapter={item} onPress={() => navigation.navigate("ApolloDetail", { 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,8 @@ export * from "./MobxStateTreeScreen"
 export * from "./ReduxScreen"
 export * from "./ErrorGeneratorScreen"
 export * from "./AsyncStorageScreen"
+export * from "./ApolloScreen"
+export * from "./ApolloDetailScreen"
 
 export * from "./ErrorScreen/ErrorBoundary"
 // export other screens here

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

@@ -0,0 +1,10 @@
+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" } },
+  connectToDevTools: true,
+})

apps/example-app/app/mobxStateTree/helpers/setupRootStore.ts → apps/example-app/app/stores/mobxStateTree/helpers/setupRootStore.ts

@@ -11,7 +11,7 @@
  */
 import { applySnapshot, IDisposer, onSnapshot } from "mobx-state-tree"
 import { RootStore, RootStoreSnapshot } from "../RootStore"
-import * as storage from "../../utils/storage"
+import * as storage from "app/utils/storage"
 
 /**
  * The key we'll be saving our state as within async storage.

apps/example-app/app/redux/index.ts → apps/example-app/app/stores/redux/index.ts

@@ -1,12 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit"
 import type { GetDefaultEnhancers } from "@reduxjs/toolkit/dist/getDefaultEnhancers"
-import logoReducer from "../redux/logoSlice"
-import repoReducer from "../redux/repoSlice"
-import errorReducer from "../redux/errorSlice"
+import logoReducer from "./logoSlice"
+import repoReducer from "./repoSlice"
+import errorReducer from "./errorSlice"
 
 const createEnhancers = (getDefaultEnhancers: GetDefaultEnhancers<any>) => {
   if (__DEV__) {
-    const reactotron = require("../devtools/ReactotronConfig").default
+    const reactotron = require("../../devtools/ReactotronConfig").default
     return getDefaultEnhancers().concat(reactotron.createEnhancer())
   } else {
     return getDefaultEnhancers()