feat: use a query renderer for artwork page sidebar on mobile (#14865)

feat: use a query renderer for artwork page sidebar on mobile
artsy · Nov 19, 2024 · cc76a3e · cc76a3e
2 parents b0af5df + 8a7cc13
commit cc76a3e
Show file tree

Hide file tree

Showing 12 changed files with 2,428 additions and 932 deletions.
diff --git a/src/Apps/Artwork/ArtworkApp.tsx b/src/Apps/Artwork/ArtworkApp.tsx
@@ -32,7 +32,10 @@ import { Media } from "Utils/Responsive"
 import { UseRecordArtworkView } from "./useRecordArtworkView"
 import { Router, Match, RenderProps } from "found"
 import React, { useCallback, useEffect } from "react"
-import { ArtworkSidebarFragmentContainer } from "./Components/ArtworkSidebar/ArtworkSidebar"
+import {
+  ArtworkSidebarFragmentContainer,
+  ArtworkSidebarQueryRenderer,
+} from "./Components/ArtworkSidebar/ArtworkSidebar"
 import { ArtworkDetailsPartnerInfoQueryRenderer } from "Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsPartnerInfo"
 import { ArtworkAuctionCreateAlertHeaderFragmentContainer } from "Apps/Artwork/Components/ArtworkAuctionCreateAlertHeader/ArtworkAuctionCreateAlertHeader"
 import { compact } from "lodash"
@@ -92,6 +95,7 @@ export const ArtworkApp: React.FC<Props> = props => {
   const { artwork, me, referrer, tracking, shouldTrackPageView } = props
   const { match, silentPush, silentReplace } = useRouter()
   const { showAuthDialog } = useAuthDialog()
+  const isMobile = !!getENV("IS_MOBILE")
 
   // If the user is expecting a partner offer, require login and remove
   // the query param from the URL after login.
@@ -275,7 +279,11 @@ export const ArtworkApp: React.FC<Props> = props => {
           )}
         </Column>
         <Column span={4} pt={[0, 2]}>
-          <ArtworkSidebarFragmentContainer artwork={artwork} me={me} />
+          {isMobile ? (
+            <ArtworkSidebarQueryRenderer artworkID={artwork.internalID} />
+          ) : (
+            <ArtworkSidebarFragmentContainer artwork={artwork} me={me} />
+          )}
         </Column>
       </GridColumns>
       {isPrivateArtwork && (
@@ -388,11 +396,12 @@ const ArtworkAppFragmentContainer = createFragmentContainer(
   withSystemContext(WrappedArtworkApp),
   {
     artwork: graphql`
-      fragment ArtworkApp_artwork on Artwork {
+      fragment ArtworkApp_artwork on Artwork
+        @argumentDefinitions(loadSidebar: { type: "Boolean!" }) {
         ...ArtworkMeta_artwork
         ...ArtworkTopContextBar_artwork
         ...ArtworkImageBrowser_artwork
-        ...ArtworkSidebar_artwork
+        ...ArtworkSidebar_artwork @include(if: $loadSidebar)
         ...ArtworkAuctionCreateAlertHeader_artwork
         ...PrivateArtworkDetails_artwork
         ...ArtworkPageBanner_artwork
@@ -463,18 +472,24 @@ export const ArtworkResultFragmentContainer = createFragmentContainer(
   ArtworkResult,
   {
     artworkResult: graphql`
-      fragment ArtworkApp_artworkResult on ArtworkResult {
+      fragment ArtworkApp_artworkResult on ArtworkResult
+        @argumentDefinitions(loadSidebar: { type: "Boolean!" }) {
         __typename
 
-        ...ArtworkApp_artwork
+        ...ArtworkApp_artwork @arguments(loadSidebar: $loadSidebar)
         ...ArtworkErrorApp_artworkError
       }
     `,
 
     me: graphql`
       fragment ArtworkApp_me on Me
-        @argumentDefinitions(artworkID: { type: "String!" }) {
-        ...ArtworkSidebar_me @arguments(artworkID: $artworkID)
+        @argumentDefinitions(
+          artworkID: { type: "String!" }
+          loadSidebar: { type: "Boolean!" }
+        ) {
+        ...ArtworkSidebar_me
+          @include(if: $loadSidebar)
+          @arguments(artworkID: $artworkID)
         ...ArtworkPageBanner_me @arguments(artworkID: $artworkID)
       }
     `,

diff --git a/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebar.tsx b/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebar.tsx
@@ -24,6 +24,9 @@ import { ArtworkSidebarAuctionPollingRefetchContainer } from "./ArtworkSidebarAu
 import { ContextModule } from "@artsy/cohesion"
 import { ArtworkSidebarPrivateArtwork } from "Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPrivateArtwork"
 import { PrivateArtworkAdditionalInfo } from "Apps/Artwork/Components/ArtworkSidebar/PrivateArtworkAdditionalInfo"
+import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
+import { useSystemContext } from "System/Hooks/useSystemContext"
+import { ArtworkSidebarQuery } from "__generated__/ArtworkSidebarQuery.graphql"
 
 export interface ArtworkSidebarProps {
   artwork: ArtworkSidebar_artwork$data
@@ -291,3 +294,45 @@ export const ArtworkSidebarFragmentContainer = createFragmentContainer(
     `,
   }
 )
+
+interface ArtworkSidebarQueryRendererProps {
+  artworkID: string
+}
+
+export const ArtworkSidebarQueryRenderer: React.FC<ArtworkSidebarQueryRendererProps> = ({
+  artworkID,
+  ...rest
+}) => {
+  const { relayEnvironment } = useSystemContext()
+
+  return (
+    <SystemQueryRenderer<ArtworkSidebarQuery>
+      environment={relayEnvironment}
+      query={graphql`
+        query ArtworkSidebarQuery($artworkID: String!) {
+          artwork(id: $artworkID) {
+            ...ArtworkSidebar_artwork
+          }
+          me {
+            ...ArtworkSidebar_me @arguments(artworkID: $artworkID)
+          }
+        }
+      `}
+      variables={{ artworkID }}
+      render={({ error, props }) => {
+        if (error || !props?.artwork) {
+          return null
+        }
+
+        return (
+          <ArtworkSidebarFragmentContainer
+            artwork={props.artwork}
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            me={props.me!}
+            {...rest}
+          />
+        )
+      }}
+    />
+  )
+}
diff --git a/src/Apps/Artwork/__tests__/ArtworkApp.jest.tsx b/src/Apps/Artwork/__tests__/ArtworkApp.jest.tsx
@@ -47,10 +47,10 @@ const { renderWithRelay } = setupTestWrapperTL<ArtworkAppTestQuery>({
   query: graphql`
     query ArtworkAppTestQuery {
       artworkResult(id: "artwork-id") {
-        ...ArtworkApp_artworkResult
+        ...ArtworkApp_artworkResult @arguments(loadSidebar: true)
       }
       me {
-        ...ArtworkApp_me @arguments(artworkID: "artwork-id")
+        ...ArtworkApp_me @arguments(artworkID: "artwork-id", loadSidebar: true)
       }
     }
   `,

diff --git a/src/Apps/Artwork/artworkRoutes.tsx b/src/Apps/Artwork/artworkRoutes.tsx
@@ -18,9 +18,13 @@ export const artworkRoutes: RouteProps[] = [
     onClientSideRender: () => {
       ArtworkApp.preload()
     },
-    prepareVariables: ({ artworkID }, props) => {
+    prepareVariables: ({ artworkID }, { context }) => {
+      // We want to defer loading the sidebar for mobile as it is below-the-fold.
+      const loadSidebar = !context?.isMobile
+
       return {
         artworkID,
+        loadSidebar,
       }
     },
     render: ({ Component, props }) => {
@@ -38,9 +42,12 @@ export const artworkRoutes: RouteProps[] = [
       return <Component {...props} />
     },
     query: graphql`
-      query artworkRoutes_ArtworkQuery($artworkID: String!) {
+      query artworkRoutes_ArtworkQuery(
+        $artworkID: String!
+        $loadSidebar: Boolean!
+      ) {
         artworkResult(id: $artworkID) {
-          ...ArtworkApp_artworkResult
+          ...ArtworkApp_artworkResult @arguments(loadSidebar: $loadSidebar)
 
           ... on ArtworkError {
             requestError {
@@ -49,7 +56,8 @@ export const artworkRoutes: RouteProps[] = [
           }
         }
         me {
-          ...ArtworkApp_me @arguments(artworkID: $artworkID)
+          ...ArtworkApp_me
+            @arguments(artworkID: $artworkID, loadSidebar: $loadSidebar)
         }
       }
     `,

diff --git a/src/System/Router/Utils/serverAppContext.ts b/src/System/Router/Utils/serverAppContext.ts
@@ -12,6 +12,7 @@ export const getServerAppContext = (
     initialMatchingMediaQueries: res.locals.sd.IS_MOBILE ? ["xs"] : undefined,
     user: req.user,
     isEigen: req.header("User-Agent")?.match("Artsy-Mobile") != null,
+    isMobile: res.locals.sd.IS_MOBILE,
     featureFlags: res.locals.sd.FEATURE_FLAGS,
     userPreferences: res.locals.sd.USER_PREFERENCES,
     ...context,

diff --git a/src/System/Router/__tests__/serverRouter.jest.enzyme.tsx b/src/System/Router/__tests__/serverRouter.jest.enzyme.tsx
@@ -179,6 +179,7 @@ describe("serverRouter", () => {
               "initialMatchingMediaQueries",
               "isEigen",
               "isLoggedIn",
+              "isMobile",
               "relayEnvironment",
               "router",
               "routes",