[Lib] Add relay-hooks

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.1",
     "relay-mock-network-layer": "2.0.0",
     "relay-runtime": "9.1.0",
     "require-control": "2.1.1",

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,33 @@ import {
   color,
 } from "@artsy/palette"
 import { AnalyticsSchema, useTracking } from "v2/Artsy"
+import { useFragment } from "relay-hooks"
+
+const ArtistConsignButtonFragment = graphql`
+  fragment ArtistConsignButton_artist on Artist {
+    targetSupply {
+      isInMicrofunnel
+      isTargetSupply
+    }
+
+    internalID
+    slug
+    name
+    href
+    image {
+      cropped(width: 66, height: 66) {
+        url
+      }
+    }
+  }
+`
 
 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(ArtistConsignButtonFragment, props.artist)
   const tracking = useTracking()
 
   const trackGetStartedClick = ({ destinationPath }) => {
@@ -38,15 +60,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 +81,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 +132,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 +194,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
-          }
-        }
-      }
-    `,
-  }
-)

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)}
     />
   )
 }

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>
         )
       },

src/v2/Apps/Artist/Routes/Overview/__tests__/index.jest.tsx

@@ -8,16 +8,19 @@ import React from "react"
 import { ArtistRecommendationsQueryRenderer as ArtistRecommendations } from "../Components/ArtistRecommendations"
 import { ArtistTopWorksRailFragmentContainer as ArtistTopWorksRail } from "v2/Apps/Artist/Components/ArtistTopWorksRail/ArtistTopWorksRail"
 import { FeaturedArticlesItem, OverviewRoute } from "../index"
+import { MockBoot } from "v2/DevTools"
 
 jest.mock("v2/Artsy/Analytics/useTracking")
 
 describe("OverviewRoute", () => {
   function getWrapper(artistData, user: User = {}) {
     return mount(
       <SystemContextProvider user={user}>
-        <Theme>
-          <OverviewRoute artist={artistData} />
-        </Theme>
+        <MockBoot>
+          <Theme>
+            <OverviewRoute artist={artistData} />
+          </Theme>
+        </MockBoot>
       </SystemContextProvider>
     )
   }

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"

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"

src/v2/Artsy/Router/__tests__/Boot.jest.tsx

@@ -55,4 +55,10 @@ describe("Boot", () => {
   it("injects Grid", () => {
     expect(mount(<Boot {...bootProps} />).find("Grid").length).toEqual(1)
   })
+
+  it("injects RelayEnvironmentProvider", () => {
+    expect(
+      mount(<Boot {...bootProps} />).find("RelayEnvironmentProvider").length
+    ).toEqual(1)
+  })
 })

src/v2/DevTools/MockBoot.tsx

@@ -1,6 +1,8 @@
 import { Boot } from "v2/Artsy/Router"
 import React from "react"
 import { Breakpoint } from "v2/Utils/Responsive"
+// import { Environment, Network, RecordSource, Store } from "relay-runtime"
+import { createRelaySSREnvironment } from "v2/Artsy/Relay/createRelaySSREnvironment"
 
 export const MockBoot: React.SFC<{
   breakpoint?: Breakpoint
@@ -14,16 +16,21 @@ export const MockBoot: React.SFC<{
   user = null,
   context = null,
 }) => {
-    return (
-      <Boot
-        onlyMatchMediaQueries={[breakpoint]}
-        headTags={headTags}
-        context={context}
-        user={user}
-        relayEnvironment={null as any}
-        routes={null as any}
-      >
-        {children}
-      </Boot>
-    )
-  }
+  // const mockRelayEnvironment = new Environment({
+  //   network: Network.create(x => x as any),
+  //   store: new Store(new RecordSource()),
+  // })
+  const environment = createRelaySSREnvironment()
+  return (
+    <Boot
+      onlyMatchMediaQueries={[breakpoint]}
+      headTags={headTags}
+      context={context}
+      user={user}
+      relayEnvironment={environment}
+      routes={null as any}
+    >
+      {children}
+    </Boot>
+  )
+}

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.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-3.5.1.tgz#d22d5da896999c276d1db8529e66b5bdc2bc2835"
+  integrity sha512-A7ytAEtItvOJSteleGbCDpVqnixTjTG807eDo3sdEI8qy9aIta58pWeM0RU+UUDOObnwPFNdY5w4HILJ6YUYyg==
+  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"