Merge pull request #20742 from voxmatt/react-relay-fixes

react-relay — fixes for compat library definitions

types/react-relay/compat.d.ts

@@ -1,13 +1,13 @@
 export {
     QueryRenderer,
-    commitMutation,
-    createFragmentContainer,
-    createPaginationContainer,
-    createRefetchContainer,
     fetchQuery,
     graphql,
 } from "./index";
-
+import {
+    ConnectionConfig,
+    RelayPaginationProp as RelayModernPaginationProp,
+    RelayRefetchProp as RelayModernRefetchProp
+} from "./index";
 import * as RelayRuntimeTypes from "relay-runtime";
 import { RelayEnvironmentInterface } from "./classic";
 
@@ -38,29 +38,52 @@ export type RelayClassicEnvironment = RelayEnvironmentInterface;
 // ~~~~~~~~~~~~~~~~~~~~~
 export type CompatEnvironment = RelayRuntimeTypes.Environment | RelayClassicEnvironment;
 
+// ~~~~~~~~~~~~~~~~~~~~~
+// RelayProps
+// ~~~~~~~~~~~~~~~~~~~~~
+export interface RelayProp {
+    environment: CompatEnvironment;
+}
+
+export type RelayPaginationProp = RelayModernPaginationProp & RelayProp;
+export type RelayRefetchProp = RelayModernRefetchProp & RelayProp;
+
 // ~~~~~~~~~~~~~~~~~~~~~
 // RelayCompatMutations
 // ~~~~~~~~~~~~~~~~~~~~~
-export function commitUpdate(
+export function commitMutation(
     environment: CompatEnvironment,
     config: RelayRuntimeTypes.MutationConfig<any>
 ): RelayRuntimeTypes.Disposable;
-export function applyUpdate(
+export function applyOptimisticMutation(
     environment: CompatEnvironment,
     config: RelayRuntimeTypes.OptimisticMutationConfig
 ): RelayRuntimeTypes.Disposable;
 
 // ~~~~~~~~~~~~~~~~~~~~~
-// RelayCompatContainer
+// RelayCompatContainers
 // ~~~~~~~~~~~~~~~~~~~~~
 export interface GeneratedNodeMap {
     [key: string]: RelayRuntimeTypes.GraphQLTaggedNode;
 }
-export function createContainer<T>(
+
+export function createFragmentContainer<T>(
     Component: ReactBaseComponent<T>,
     fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap
 ): ReactFragmentComponent<T>;
 
+export function createRefetchContainer<T>(
+    Component: ReactBaseComponent<T>,
+    fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap,
+    taggedNode: RelayRuntimeTypes.GraphQLTaggedNode
+): ReactFragmentComponent<T>;
+
+export function createPaginationContainer<T>(
+    Component: ReactBaseComponent<T>,
+    fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap,
+    connectionConfig: ConnectionConfig<T>
+): ReactFragmentComponent<T>;
+
 // ~~~~~~~~~~~~~~~~~~~~~
 // injectDefaultVariablesProvider
 // ~~~~~~~~~~~~~~~~~~~~~

types/react-relay/test/react-relay-tests.tsx

@@ -332,9 +332,53 @@ requestSubscription(
 import {
     QueryRenderer as CompatQueryRenderer,
     createFragmentContainer as createFragmentContainerCompat,
+    commitMutation as commitMutationCompat,
+    CompatEnvironment,
+    RelayPaginationProp as RelayPaginationPropCompat,
 } from "react-relay/compat";
 
-// TODO? This is all more or less identical to modern...
+// testting compat mutation with classic environment
+function markNotificationAsReadCompat(environment: CompatEnvironment, source: string, storyID: string) {
+    const variables = {
+        input: {
+            source,
+            storyID,
+        },
+    };
+
+    commitMutationCompat(environment, {
+        configs,
+        mutation,
+        optimisticResponse,
+        variables,
+        onCompleted: (response, errors) => {
+            console.log("Response received from server.");
+        },
+        onError: err => console.error(err),
+        updater: (store, data) => {
+            const field = store.get(storyID);
+            if (field) {
+                field.setValue(data.story, "story");
+            }
+        }
+    });
+}
+
+interface CompatProps {
+    relay: RelayPaginationPropCompat;
+}
+
+export class CompatComponent extends React.Component<CompatProps> {
+    markNotificationAsRead(source: string, storyID: string) {
+        markNotificationAsReadCompat(this.props.relay.environment, source, storyID);
+    }
+
+    render() {
+        return (<div/>);
+    }
+}
+
+const CompatContainer = createFragmentContainerCompat(CompatComponent, {});
 
 ////////////////////////////
 //  RELAY-CLASSIC TESTS
@@ -398,6 +442,7 @@ const ArtworkContainer = Relay.createContainer(Artwork, {
         artwork: () => Relay.QL`
             fragment on Artwork {
                 title
+                ${ CompatContainer.getFragment('whatever') }
             }
         `,
     },