Merge pull request #14508 from alloy/react-relay-container-props

[react-relay] Propagate component props to container.

react-relay/index.d.ts

@@ -57,7 +57,7 @@ declare module "react-relay" {
         supports(...options: string[]): boolean
     }
 
-    function createContainer<T>(component: React.ComponentClass<T> | React.StatelessComponent<T>, params?: CreateContainerOpts): RelayContainerClass<any>
+    function createContainer<T>(component: React.ComponentClass<T> | React.StatelessComponent<T>, params?: CreateContainerOpts): RelayContainerClass<T>
     function injectNetworkLayer(networkLayer: RelayNetworkLayer): any
     function isContainer(component: React.ComponentClass<any>): boolean
     function QL(...args: any[]): string

react-relay/react-relay-tests.tsx

@@ -41,3 +41,45 @@ export default class AddTweetMutation extends Relay.Mutation<Props, Response> {
         return this.props
     }
 }
+
+interface ArtworkProps {
+    artwork: {
+        title: string
+    },
+    relay: Relay.RelayProp,
+}
+
+class Artwork extends React.Component<ArtworkProps, null> {
+    render() {
+        return (
+            <a href={`/artworks/${this.props.relay.variables.artworkID}`}>
+                {this.props.artwork.title}
+            </a>
+        )
+    }
+}
+
+const ArtworkContainer = Relay.createContainer(Artwork, {
+    fragments: {
+        artwork: () => Relay.QL`
+            fragment on Artwork {
+                title
+            }
+        `
+    }
+})
+
+class StubbedArtwork extends React.Component<null, null> {
+    render() {
+        const props = {
+            artwork: { title: "CHAMPAGNE FORMICA FLAG" },
+            relay: {
+                variables: {
+                    artworkID: "champagne-formica-flag",
+                },
+                setVariables: () => {},
+            }
+        }
+        return <ArtworkContainer {...props} />
+    }
+}