diff --git a/types/react-relay/compat.d.ts b/types/react-relay/compat.d.ts index d214e451ae..22585d03d0 100644 --- a/types/react-relay/compat.d.ts +++ b/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 ): 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( + +export function createFragmentContainer( Component: ReactBaseComponent, fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap ): ReactFragmentComponent; +export function createRefetchContainer( + Component: ReactBaseComponent, + fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap, + taggedNode: RelayRuntimeTypes.GraphQLTaggedNode +): ReactFragmentComponent; + +export function createPaginationContainer( + Component: ReactBaseComponent, + fragmentSpec: RelayRuntimeTypes.GraphQLTaggedNode | GeneratedNodeMap, + connectionConfig: ConnectionConfig +): ReactFragmentComponent; + // ~~~~~~~~~~~~~~~~~~~~~ // injectDefaultVariablesProvider // ~~~~~~~~~~~~~~~~~~~~~ diff --git a/types/react-relay/test/react-relay-tests.tsx b/types/react-relay/test/react-relay-tests.tsx index 6caf997dba..f73b7c00c7 100644 --- a/types/react-relay/test/react-relay-tests.tsx +++ b/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 { + markNotificationAsRead(source: string, storyID: string) { + markNotificationAsReadCompat(this.props.relay.environment, source, storyID); + } + + render() { + return (
); + } +} + +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') } } `, },