feat: Prefetch links on Artwork screen

src/app/Components/ArtistListItem.tests.tsx

@@ -1,5 +1,5 @@
-import { Touchable } from "@artsy/palette-mobile"
 import { ArtistListItemTestsQuery } from "__generated__/ArtistListItemTestsQuery.graphql"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { renderWithWrappers, renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers"
 import { resolveMostRecentRelayOperation } from "app/utils/tests/resolveMostRecentRelayOperation"
 import { graphql, QueryRenderer } from "react-relay"
@@ -45,13 +45,13 @@ describe("ArtistListItem", () => {
   it("renders without feedback without throwing an error", () => {
     const tree = renderWithWrappersLEGACY(<TestRenderer />).root
     resolveMostRecentRelayOperation(mockEnvironment)
-    expect(tree.findByType(Touchable).props.noFeedback).toBe(true)
+    expect(tree.findByType(RouterLink).props.noFeedback).toBe(true)
   })
 
   it("renders with feedback without throwing an error", () => {
     const tree = renderWithWrappersLEGACY(<TestRenderer withFeedback />).root
     resolveMostRecentRelayOperation(mockEnvironment)
-    expect(tree.findByType(Touchable).props.noFeedback).toBe(false)
+    expect(tree.findByType(RouterLink).props.noFeedback).toBe(false)
   })
 
   it("shows uploaded artworks counts when specified", () => {

src/app/Components/ArtistListItem.tsx

@@ -1,15 +1,7 @@
-import {
-  AvatarSize,
-  EntityHeader,
-  Flex,
-  FollowButton,
-  Text,
-  Touchable,
-  useColor,
-} from "@artsy/palette-mobile"
+import { AvatarSize, EntityHeader, Flex, FollowButton, Text, useColor } from "@artsy/palette-mobile"
 import { ArtistListItemFollowArtistMutation } from "__generated__/ArtistListItemFollowArtistMutation.graphql"
 import { ArtistListItem_artist$data } from "__generated__/ArtistListItem_artist.graphql"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { PlaceholderBox, PlaceholderText } from "app/utils/placeholders"
 import { pluralize } from "app/utils/pluralize"
 import { Schema } from "app/utils/track"
@@ -107,11 +99,6 @@ const ArtistListItem: React.FC<Props> = ({
     )
   }
 
-  const handleTap = (href: string) => {
-    tracks.tapArtistGroup(artist)
-    navigate(href)
-  }
-
   let meta
 
   if (includeTombstone) {
@@ -156,22 +143,21 @@ const ArtistListItem: React.FC<Props> = ({
   }
 
   return (
-    <Touchable
+    <RouterLink
       noFeedback={!withFeedback}
+      // Only navigate if there is an href and navigation is not disabled by passing `onPress` or
+      to={!disableNavigation ? href : undefined}
       onPress={() => {
-        if (onPress) {
-          onPress()
-          return
-        }
+        onPress?.()
 
         if (href && !disableNavigation) {
-          handleTap(href)
+          tracks.tapArtistGroup(artist)
         }
       }}
       underlayColor={color("black5")}
       style={containerStyle}
     >
-      <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+      <Flex flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
         <Flex flex={1}>
           <EntityHeader
             mr={1}
@@ -191,7 +177,7 @@ const ArtistListItem: React.FC<Props> = ({
           </Flex>
         )}
       </Flex>
-    </Touchable>
+    </RouterLink>
   )
 }
 

src/app/Navigation/routes.tsx

@@ -31,16 +31,25 @@ import {
   defaultArtistVariables,
 } from "app/Scenes/Artist/Artist"
 import { ArtistArticlesQueryRenderer } from "app/Scenes/ArtistArticles/ArtistArticles"
-import { ArtistSeriesQueryRenderer } from "app/Scenes/ArtistSeries/ArtistSeries"
-import { ArtistSeriesFullArtistSeriesListQueryRenderer } from "app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList"
+import {
+  ArtistSeriesQueryRenderer,
+  ArtistSeriesScreenQuery,
+} from "app/Scenes/ArtistSeries/ArtistSeries"
+import {
+  ArtistSeriesFullArtistSeriesListQueryRenderer,
+  ArtistSeriesFullArtistSeriesListScreenQuery,
+} from "app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList"
 import { ArtistShowsQueryRenderer } from "app/Scenes/ArtistShows/ArtistShows"
 import { ArtworkScreen, ArtworkScreenQuery } from "app/Scenes/Artwork/Artwork"
 import { BrowseSimilarWorksQueryRenderer } from "app/Scenes/Artwork/Components/BrowseSimilarWorks/BrowseSimilarWorks"
 import { CertificateOfAuthenticity } from "app/Scenes/Artwork/Components/CertificateAuthenticity"
 import { UnlistedArtworksFAQScreen } from "app/Scenes/Artwork/Components/UnlistedArtworksFAQScreen"
 import { ArtworkAttributionClassFAQQueryRenderer } from "app/Scenes/ArtworkAttributionClassFAQ/ArtworkAttributionClassFAQ"
 import { ArtworkListScreen } from "app/Scenes/ArtworkList/ArtworkList"
-import { ArtworkMediumQueryRenderer } from "app/Scenes/ArtworkMedium/ArtworkMedium"
+import {
+  ARTWORK_MEDIUM_QUERY,
+  ArtworkMediumQueryRenderer,
+} from "app/Scenes/ArtworkMedium/ArtworkMedium"
 import { ArtworkRecommendationsScreen } from "app/Scenes/ArtworkRecommendations/ArtworkRecommendations"
 import { AuctionBuyersPremiumQueryRenderer } from "app/Scenes/AuctionBuyersPremium/AuctionBuyersPremium"
 import { AuctionResultQueryRenderer } from "app/Scenes/AuctionResult/AuctionResult"
@@ -113,7 +122,7 @@ import { NewWorksForYouQueryRenderer } from "app/Scenes/NewWorksForYou/NewWorksF
 import { NewWorksFromGalleriesYouFollowScreen } from "app/Scenes/NewWorksFromGalleriesYouFollow/NewWorksFromGalleriesYouFollow"
 import { OrderDetailsQueryRender } from "app/Scenes/OrderHistory/OrderDetails/Components/OrderDetails"
 import { OrderHistoryQueryRender } from "app/Scenes/OrderHistory/OrderHistory"
-import { PartnerQueryRenderer } from "app/Scenes/Partner/Partner"
+import { PartnerQueryRenderer, PartnerScreenQuery } from "app/Scenes/Partner/Partner"
 import {
   PartnerLocationsQueryRenderer,
   PartnerLocationsScreenQuery,
@@ -343,6 +352,7 @@ export const artsyDotNetRoutes = defineRoutes([
         headerShown: false,
       },
     },
+    queries: [ArtistSeriesScreenQuery],
   },
   {
     path: "/artist/:artistID",
@@ -375,6 +385,7 @@ export const artsyDotNetRoutes = defineRoutes([
         headerTitle: "Artist Series",
       },
     },
+    queries: [ArtistSeriesFullArtistSeriesListScreenQuery],
   },
   {
     path: "/artist/:artistID/auction-result/:auctionResultInternalID",
@@ -499,6 +510,7 @@ export const artsyDotNetRoutes = defineRoutes([
     path: "/artwork/:artworkID/medium",
     name: "ArtworkMedium",
     Component: ArtworkMediumQueryRenderer,
+    queries: [ARTWORK_MEDIUM_QUERY],
   },
   {
     path: "/artwork/:artworkID/browse-similar-works",
@@ -1173,6 +1185,7 @@ export const artsyDotNetRoutes = defineRoutes([
         headerShown: false,
       },
     },
+    queries: [PartnerScreenQuery],
   },
   {
     path: "/partner/:partnerID/artists/:artistID",

src/app/Scenes/ArtistSeries/ArtistSeries.tsx

@@ -1,27 +1,27 @@
 import {
-  Spacer,
+  Flex,
   Screen,
-  Tabs,
-  useScreenDimensions,
+  Separator,
   Skeleton,
   SkeletonBox,
-  Flex,
   SkeletonText,
-  Separator,
+  Spacer,
+  Tabs,
+  useScreenDimensions,
 } from "@artsy/palette-mobile"
 import { ArtistSeriesQuery } from "__generated__/ArtistSeriesQuery.graphql"
 import { ArtistSeries_artistSeries$key } from "__generated__/ArtistSeries_artistSeries.graphql"
 import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import { PlaceholderGrid } from "app/Components/ArtworkGrids/GenericGrid"
+import { ActivityErrorScreen } from "app/Scenes/Activity/components/ActivityErrorScreen"
 import { ArtistSeriesArtworks } from "app/Scenes/ArtistSeries/ArtistSeriesArtworks"
 import { ArtistSeriesHeaderFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesHeader"
 import { ArtistSeriesMetaFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesMeta"
 import { goBack } from "app/system/navigation/navigate"
-import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
-import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
+import { withSuspense } from "app/utils/hooks/withSuspense"
 import { ProvideScreenTracking } from "app/utils/track"
 import { OwnerEntityTypes, PageNames } from "app/utils/track/schema"
-import { graphql, QueryRenderer, useFragment } from "react-relay"
+import { graphql, useFragment, useLazyLoadQuery } from "react-relay"
 
 interface ArtistSeriesProps {
   artistSeries: ArtistSeries_artistSeries$key
@@ -127,29 +127,28 @@ const ArtistSeriesPlaceholder: React.FC = () => {
   )
 }
 
-export const ArtistSeriesQueryRenderer: React.FC<{ artistSeriesID: string }> = ({
-  artistSeriesID,
-}) => {
-  return (
-    <ArtworkFiltersStoreProvider>
-      <QueryRenderer<ArtistSeriesQuery>
-        environment={getRelayEnvironment()}
-        query={graphql`
-          query ArtistSeriesQuery($artistSeriesID: ID!) {
-            artistSeries(id: $artistSeriesID) {
-              ...ArtistSeries_artistSeries
-            }
-          }
-        `}
-        cacheConfig={{ force: true }}
-        variables={{
-          artistSeriesID,
-        }}
-        render={renderWithPlaceholder({
-          Container: ArtistSeries,
-          renderPlaceholder: () => <ArtistSeriesPlaceholder />,
-        })}
-      />
-    </ArtworkFiltersStoreProvider>
-  )
-}
+export const ArtistSeriesScreenQuery = graphql`
+  query ArtistSeriesQuery($artistSeriesID: ID!) {
+    artistSeries(id: $artistSeriesID) {
+      ...ArtistSeries_artistSeries
+    }
+  }
+`
+
+export const ArtistSeriesQueryRenderer: React.FC<{ artistSeriesID: string }> = withSuspense({
+  Component: ({ artistSeriesID }) => {
+    const data = useLazyLoadQuery<ArtistSeriesQuery>(ArtistSeriesScreenQuery, { artistSeriesID })
+
+    if (!data.artistSeries) return null
+
+    return (
+      <ArtworkFiltersStoreProvider>
+        <ArtistSeries artistSeries={data.artistSeries} />
+      </ArtworkFiltersStoreProvider>
+    )
+  },
+  LoadingFallback: ArtistSeriesPlaceholder,
+  ErrorFallback: (fallbackProps) => {
+    return <ActivityErrorScreen headerTitle="Artist Series" error={fallbackProps.error} />
+  },
+})

src/app/Scenes/ArtistSeries/ArtistSeriesFullArtistSeriesList.tsx

@@ -69,20 +69,21 @@ export const ArtistSeriesFullArtistSeriesListFragmentContainer = createFragmentC
   }
 )
 
+export const ArtistSeriesFullArtistSeriesListScreenQuery = graphql`
+  query ArtistSeriesFullArtistSeriesListQuery($artistID: String!) {
+    artist(id: $artistID) {
+      ...ArtistSeriesFullArtistSeriesList_artist
+    }
+  }
+`
+
 export const ArtistSeriesFullArtistSeriesListQueryRenderer: React.FC<{ artistID: string }> = ({
   artistID,
 }) => {
   return (
     <QueryRenderer<ArtistSeriesFullArtistSeriesListQuery>
       environment={getRelayEnvironment()}
-      query={graphql`
-        query ArtistSeriesFullArtistSeriesListQuery($artistID: String!) {
-          artist(id: $artistID) {
-            ...ArtistSeriesFullArtistSeriesList_artist
-          }
-        }
-      `}
-      cacheConfig={{ force: true }}
+      query={ArtistSeriesFullArtistSeriesListScreenQuery}
       variables={{
         artistID,
       }}

src/app/Scenes/ArtistSeries/ArtistSeriesMoreSeries.tsx

@@ -2,9 +2,8 @@ import { ActionType, ContextModule, OwnerType, ScreenOwnerType } from "@artsy/co
 import { Flex, FlexProps, Text, TextProps } from "@artsy/palette-mobile"
 import { ArtistSeriesMoreSeries_artist$data } from "__generated__/ArtistSeriesMoreSeries_artist.graphql"
 import { ArtistSeriesListItem } from "app/Scenes/ArtistSeries/ArtistSeriesListItem"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import React, { useEffect, useState } from "react"
-import { TouchableOpacity } from "react-native"
 import { createFragmentContainer, graphql } from "react-relay"
 import { useTracking } from "react-tracking"
 
@@ -59,16 +58,16 @@ export const ArtistSeriesMoreSeries: React.FC<ArtistSeriesMoreSeriesProps> = ({
           {artistSeriesHeader}
         </Text>
         {totalCount > 4 && (
-          <TouchableOpacity
+          <RouterLink
+            to={`/artist/${artist?.internalID}/artist-series`}
             onPress={() => {
               if (artist.internalID) {
                 trackEvent(tracks.tapViewAllArtistSeries(artist?.internalID, artist?.slug))
-                navigate(`/artist/${artist?.internalID}/artist-series`)
               }
             }}
           >
             <Text variant="xs" underline testID="viewAll">{`View All (${totalCount})`}</Text>
-          </TouchableOpacity>
+          </RouterLink>
         )}
       </Flex>
       {artistSeries.map((item, index) => {

src/app/Scenes/Artwork/Components/ArtworkDetails.tsx

@@ -1,9 +1,8 @@
-import { Spacer, Flex, Box, Text, Join } from "@artsy/palette-mobile"
+import { Box, Flex, Join, Spacer, Text } from "@artsy/palette-mobile"
 import { ArtworkDetails_artwork$key } from "__generated__/ArtworkDetails_artwork.graphql"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { Schema } from "app/utils/track"
 import React from "react"
-import { TouchableWithoutFeedback } from "react-native"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 import { ArtworkDetailsRow } from "./ArtworkDetailsRow"
@@ -27,11 +26,11 @@ export const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
     {
       title: "Medium",
       value: artworkData?.mediumType?.name && (
-        <TouchableWithoutFeedback onPress={() => navigate(`/artwork/${artworkData.slug}/medium`)}>
+        <RouterLink to={`/artwork/${artworkData.slug}/medium`} disablePrefetch>
           <Text variant="xs" color="black100" style={{ textDecorationLine: "underline" }}>
             {artworkData?.mediumType?.name}
           </Text>
-        </TouchableWithoutFeedback>
+        </RouterLink>
       ),
     },
     {

src/app/Scenes/Artwork/Components/ArtworkMakerTitle.tsx

@@ -1,6 +1,6 @@
 import { Flex, Text } from "@artsy/palette-mobile"
 import { ArtworkMakerTitle_artwork$data } from "__generated__/ArtworkMakerTitle_artwork.graphql"
-import { navigate } from "app/system/navigation/navigate"
+import { RouterLink } from "app/system/navigation/RouterLink"
 import { Schema } from "app/utils/track"
 import React, { useState } from "react"
 import { TouchableWithoutFeedback } from "react-native"
@@ -15,26 +15,26 @@ interface ArtworkMakerProps {
 const ArtworkMaker: React.FC<ArtworkMakerProps> = ({ artistName, href }) => {
   const { trackEvent } = useTracking()
 
-  const handleArtistTap = (artistHref?: string | null) => {
-    if (artistHref) {
+  const handleArtistTap = () => {
+    if (href) {
       trackEvent({
         action_name: Schema.ActionNames.ArtistName,
         action_type: Schema.ActionTypes.Tap,
         context_module: Schema.ContextModules.ArtworkTombstone,
       })
-      navigate(artistHref)
     }
   }
 
   return (
-    <TouchableWithoutFeedback
+    <RouterLink
       accessibilityRole="link"
       accessibilityHint="Go to artist page"
       disabled={!href}
-      onPress={() => handleArtistTap(href)}
+      to={href}
+      onPress={handleArtistTap}
     >
       <Text variant="lg-display">{artistName}</Text>
-    </TouchableWithoutFeedback>
+    </RouterLink>
   )
 }
 

src/app/Scenes/Artwork/Components/ArtworksInSeriesRail.tsx

@@ -6,7 +6,6 @@ import {
 } from "__generated__/ArtworksInSeriesRail_artwork.graphql"
 import { ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail"
 import { SectionTitle } from "app/Components/SectionTitle"
-import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import {
   CollectorSignals,
@@ -39,8 +38,8 @@ export const ArtworksInSeriesRail: React.FC<ArtworksInSeriesRailProps> = (props)
         titleVariant="md"
         onPress={() => {
           trackEvent(tracks.tappedHeader(artwork, firstArtistSeries))
-          navigate(`/artist-series/${firstArtistSeries?.slug}`)
         }}
+        href={`/artist-series/${firstArtistSeries?.slug}`}
       />
       <ArtworkRail
         artworks={artworks}