[Lib] Add relay-hooks

artsy · Aug 14, 2020 · b1983b7 · b1983b7
1 parent bf3134c
commit b1983b7
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -183,6 +183,7 @@
     "redux-mock-store": "1.2.3",
     "redux-thunk": "2.2.0",
     "referer-parser": "0.0.3",
+    "relay-hooks": "^3.5.2",
     "relay-mock-network-layer": "2.0.0",
     "relay-runtime": "9.1.0",
     "require-control": "2.1.1",

diff --git a/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx b/src/v2/Apps/Artist/Components/ArtistConsignButton.tsx
@@ -1,7 +1,10 @@
 import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
+import { graphql } from "react-relay"
 
-import { ArtistConsignButton_artist } from "v2/__generated__/ArtistConsignButton_artist.graphql"
+import {
+  ArtistConsignButton_artist,
+  ArtistConsignButton_artist$key,
+} from "v2/__generated__/ArtistConsignButton_artist.graphql"
 import { RouterLink } from "v2/Artsy/Router/RouterLink"
 import { Media } from "v2/Utils/Responsive"
 
@@ -15,14 +18,35 @@ import {
   color,
 } from "@artsy/palette"
 import { AnalyticsSchema, useTracking } from "v2/Artsy"
+import { useFragment } from "relay-hooks"
 
 export interface ArtistConsignButtonProps {
-  artist: ArtistConsignButton_artist
+  artist: ArtistConsignButton_artist$key
 }
 
-export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = ({
-  artist,
-}) => {
+export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = props => {
+  const artist = useFragment<ArtistConsignButton_artist$key>(
+    graphql`
+      fragment ArtistConsignButton_artist on Artist {
+        targetSupply {
+          isInMicrofunnel
+          isTargetSupply
+        }
+
+        internalID
+        slug
+        name
+        href
+        image {
+          cropped(width: 66, height: 66) {
+            url
+          }
+        }
+      }
+    `,
+    props.artist
+  )
+
   const tracking = useTracking()
 
   const trackGetStartedClick = ({ destinationPath }) => {
@@ -38,15 +62,18 @@ export const ArtistConsignButton: React.FC<ArtistConsignButtonProps> = ({
     })
   }
 
-  const props = { artist, trackGetStartedClick }
+  const passedProps = {
+    artist,
+    trackGetStartedClick,
+  }
 
   return (
     <>
       <Media at="xs">
-        <ArtistConsignButtonSmall {...props} />
+        <ArtistConsignButtonSmall {...passedProps} />
       </Media>
       <Media greaterThan="xs">
-        <ArtistConsignButtonLarge {...props} />
+        <ArtistConsignButtonLarge {...passedProps} />
       </Media>
     </>
   )
@@ -56,9 +83,11 @@ interface Tracking {
   trackGetStartedClick: (props: { destinationPath: string }) => void
 }
 
-export const ArtistConsignButtonLarge: React.FC<
-  ArtistConsignButtonProps & Tracking
-> = props => {
+interface Props extends Tracking {
+  artist: ArtistConsignButton_artist
+}
+
+export const ArtistConsignButtonLarge: React.FC<Props> = props => {
   const { showImage, imageURL, headline, consignURL } = getData(props)
 
   return (
@@ -105,9 +134,7 @@ export const ArtistConsignButtonLarge: React.FC<
   )
 }
 
-export const ArtistConsignButtonSmall: React.FC<
-  ArtistConsignButtonProps & Tracking
-> = props => {
+export const ArtistConsignButtonSmall: React.FC<Props> = props => {
   const { showImage, imageURL, headline, consignURL } = getData(props)
 
   return (
@@ -169,27 +196,3 @@ function getData(props) {
     consignURL,
   }
 }
-
-export const ArtistConsignButtonFragmentContainer = createFragmentContainer(
-  ArtistConsignButton,
-  {
-    artist: graphql`
-      fragment ArtistConsignButton_artist on Artist {
-        targetSupply {
-          isInMicrofunnel
-          isTargetSupply
-        }
-
-        internalID
-        slug
-        name
-        href
-        image {
-          cropped(width: 66, height: 66) {
-            url
-          }
-        }
-      }
-    `,
-  }
-)
diff --git a/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx b/src/v2/Apps/Artist/Components/__stories__/ArtistConsignButton.story.tsx
@@ -7,17 +7,17 @@ import { useSystemContext } from "v2/Artsy"
 import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
 
 import {
-  ArtistConsignButtonFragmentContainer,
+  ArtistConsignButton,
   ArtistConsignButtonLarge,
   ArtistConsignButtonProps,
   ArtistConsignButtonSmall,
 } from "v2/Apps/Artist/Components/ArtistConsignButton"
 
-export const ArtistConsignButtonQueryRenderer: React.FC<Partial<
-  ArtistConsignButtonProps
-> & {
-  artistID: string
-}> = ({ artistID }) => {
+export const ArtistConsignButtonQueryRenderer: React.FC<
+  Partial<ArtistConsignButtonProps> & {
+    artistID: string
+  }
+> = ({ artistID }) => {
   const { relayEnvironment } = useSystemContext()
   return (
     <QueryRenderer<ArtistConsignButtonQuery>
@@ -32,7 +32,7 @@ export const ArtistConsignButtonQueryRenderer: React.FC<Partial<
       variables={{
         artistID,
       }}
-      render={renderWithLoadProgress(ArtistConsignButtonFragmentContainer)}
+      render={renderWithLoadProgress(ArtistConsignButton)}
     />
   )
 }

diff --git a/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx b/src/v2/Apps/Artist/Components/__tests__/ArtistConsignButton.jest.tsx
@@ -5,7 +5,7 @@ import { MockBoot, renderRelayTree } from "v2/DevTools"
 import { cloneDeep } from "lodash"
 import React from "react"
 import { graphql } from "react-relay"
-import { ArtistConsignButtonFragmentContainer } from "../ArtistConsignButton"
+import { ArtistConsignButton } from "../ArtistConsignButton"
 
 jest.unmock("react-relay")
 jest.mock("v2/Artsy/Analytics/useTracking")
@@ -24,7 +24,7 @@ describe("ArtistConsignButton", () => {
       Component: ({ artist }) => {
         return (
           <MockBoot breakpoint={breakpoint}>
-            <ArtistConsignButtonFragmentContainer artist={artist} />
+            <ArtistConsignButton artist={artist} />
           </MockBoot>
         )
       },

diff --git a/src/v2/Apps/Artist/Routes/Overview/index.tsx b/src/v2/Apps/Artist/Routes/Overview/index.tsx
@@ -24,7 +24,7 @@ import { ArtistBioFragmentContainer as ArtistBio } from "v2/Components/ArtistBio
 import { Carousel } from "v2/Components/Carousel"
 import { SelectedCareerAchievementsFragmentContainer as SelectedCareerAchievements } from "v2/Components/SelectedCareerAchievements"
 
-import { ArtistConsignButtonFragmentContainer as ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton"
+import { ArtistConsignButton } from "v2/Apps/Artist/Components/ArtistConsignButton"
 import { StyledLink } from "v2/Apps/Artist/Components/StyledLink"
 import { WorksForSaleRailQueryRenderer as WorksForSaleRail } from "v2/Apps/Artist/Routes/Overview/Components/WorksForSaleRail"
 import { pMedia } from "v2/Components/Helpers"

diff --git a/src/v2/Artsy/Router/Boot.tsx b/src/v2/Artsy/Router/Boot.tsx
@@ -12,6 +12,7 @@ import Events from "v2/Utils/Events"
 import { getENV } from "v2/Utils/getENV"
 import { ErrorBoundary } from "./ErrorBoundary"
 import { FocusVisible } from "v2/Components/FocusVisible"
+import { RelayEnvironmentProvider } from "relay-hooks"
 
 import {
   MatchingMediaQueries,
@@ -63,27 +64,33 @@ export const Boot = track(null, {
     <Theme>
       <HeadProvider headTags={headTags}>
         <StateProvider>
-          <SystemContextProvider {...contextProps}>
-            <ErrorBoundary>
-              <MediaContextProvider onlyMatch={onlyMatchMediaQueries}>
-                <ResponsiveProvider
-                  mediaQueries={themeProps.mediaQueries}
-                  initialMatchingMediaQueries={onlyMatchMediaQueries as any}
-                >
-                  <Grid fluid maxWidth="100%">
-                    <GlobalStyles />
-                    <FocusVisible />
-                    {children}
-                    {process.env.NODE_ENV === "development" && (
-                      <BreakpointVisualizer />
-                    )}
-                  </Grid>
-                </ResponsiveProvider>
-              </MediaContextProvider>
-            </ErrorBoundary>
-          </SystemContextProvider>
+          <RelayEnvironmentProvider environment={props.relayEnvironment}>
+            <SystemContextProvider {...contextProps}>
+              <ErrorBoundary>
+                <MediaContextProvider onlyMatch={onlyMatchMediaQueries}>
+                  <ResponsiveProvider
+                    mediaQueries={themeProps.mediaQueries}
+                    initialMatchingMediaQueries={onlyMatchMediaQueries as any}
+                  >
+                    <Grid fluid maxWidth="100%">
+                      <GlobalStyles />
+                      <FocusVisible />
+                      {children}
+                      {process.env.NODE_ENV === "development" && (
+                        <BreakpointVisualizer />
+                      )}
+                    </Grid>
+                  </ResponsiveProvider>
+                </MediaContextProvider>
+              </ErrorBoundary>
+            </SystemContextProvider>
+          </RelayEnvironmentProvider>
         </StateProvider>
       </HeadProvider>
     </Theme>
   )
 })
+
+// TODO: PR display name change upstream. Added for tests
+// @ts-ignore
+RelayEnvironmentProvider.displayName = "RelayEnvironmentProvider"
diff --git a/src/v2/Artsy/Router/__tests__/Boot.jest.tsx b/src/v2/Artsy/Router/__tests__/Boot.jest.tsx
@@ -55,4 +55,11 @@ describe("Boot", () => {
   it("injects Grid", () => {
     expect(mount(<Boot {...bootProps} />).find("Grid").length).toEqual(1)
   })
+
+  it("injects RelayEnvironmentProvider", () => {
+    console.log(mount(<Boot {...bootProps} />).debug())
+    expect(
+      mount(<Boot {...bootProps} />).find("RelayEnvironmentProvider").length
+    ).toEqual(1)
+  })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -3011,6 +3011,14 @@
   resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
   integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
 
+"@restart/hooks@^0.3.1":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.25.tgz#11004139ad1c70d2f5965a8939dcb5aeb96aa652"
+  integrity sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==
+  dependencies:
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -18942,6 +18950,14 @@ relay-config@9.1.0:
   dependencies:
     cosmiconfig "^5.0.5"
 
+relay-hooks@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.2.tgz#98035099988e8f87a3369f3a8a4531068d59bafe"
+  integrity sha512-zqtSajxbNCLRQV9t5mBu1LcLbVjTpdNhhxzCWPVtWYvwiXFgx/8tuC3hFYP8EF7l3ogwlqt5rcswK6xmONC81Q==
+  dependencies:
+    "@restart/hooks" "^0.3.1"
+    fbjs "^1.0.0"
+
 relay-mock-network-layer@2.0.0, relay-mock-network-layer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/relay-mock-network-layer/-/relay-mock-network-layer-2.0.0.tgz#70cad7c11f76822980196486a42258f68e5c7910"