diff --git a/types/react-relay/index.d.ts b/types/react-relay/index.d.ts index 24993b0018..2e41dcbd6a 100644 --- a/types/react-relay/index.d.ts +++ b/types/react-relay/index.d.ts @@ -9,6 +9,10 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 +// Prettified with: +// $ prettier --parser typescript --tab-width 4 --semi --trailing-comma es5 --write --print-width 120 \ +// types/{react-relay,relay-runtime}/{,*}/*.ts* + export { commitLocalUpdate, commitRelayModernMutation as commitMutation, @@ -24,7 +28,16 @@ import * as RelayRuntimeTypes from "relay-runtime"; // Utility types // ~~~~~~~~~~~~~~~~~~~~~ -export type FragmentOrRegularProp = T extends { ' $refType': infer U } ? { ' $fragmentRefs': U } : T; +export interface _RefType { + " $refType": T; +} +export interface _FragmentRefs { + " $fragmentRefs": T; +} + +export type FragmentOrRegularProp = T extends _RefType + ? _FragmentRefs + : T extends ReadonlyArray<_RefType> ? ReadonlyArray<_FragmentRefs> : T; export type MappedFragmentProps = { [K in keyof T]: FragmentOrRegularProp }; @@ -113,8 +126,8 @@ export interface PageInfo { startCursor: string | undefined | null; } export interface ConnectionData { - edges?: any[]; - pageInfo?: PageInfo; + edges?: ReadonlyArray; + pageInfo?: Partial; } export type RelayPaginationProp = RelayProp & { hasMore(): boolean; @@ -134,9 +147,9 @@ export function FragmentVariablesGetter( prevVars: RelayRuntimeTypes.Variables, totalCount: number ): RelayRuntimeTypes.Variables; -export interface ConnectionConfig { +export interface ConnectionConfig

{ direction?: "backward" | "forward"; - getConnectionFromProps?(props: T): ConnectionData | undefined | null; + getConnectionFromProps?(props: P): ConnectionData | undefined | null; getFragmentVariables?: typeof FragmentVariablesGetter; getVariables( props: { [propName: string]: any }, diff --git a/types/react-relay/test/react-relay-compat-tests.tsx b/types/react-relay/test/react-relay-compat-tests.tsx index e0ee5d3be2..0b42151b6f 100644 --- a/types/react-relay/test/react-relay-compat-tests.tsx +++ b/types/react-relay/test/react-relay-compat-tests.tsx @@ -32,7 +32,7 @@ function markNotificationAsReadCompat(environment: CompatEnvironment, source: st if (field) { field.setValue(data.story, "story"); } - } + }, }); } @@ -46,7 +46,7 @@ class CompatComponent extends React.Component { } render() { - return (

); + return
; } } diff --git a/types/react-relay/test/react-relay-tests.tsx b/types/react-relay/test/react-relay-tests.tsx index 300154678c..9d08ed42d6 100644 --- a/types/react-relay/test/react-relay-tests.tsx +++ b/types/react-relay/test/react-relay-tests.tsx @@ -11,7 +11,7 @@ import { QueryRenderer, RelayRefetchProp, RelayPaginationProp, - RelayProp + RelayProp, } from "react-relay"; // ~~~~~~~~~~~~~~~~~~~~~ @@ -28,16 +28,20 @@ const modernEnvironment = new Environment({ network, store }); // ~~~~~~~~~~~~~~~~~~~~~ // Modern QueryRenderer // ~~~~~~~~~~~~~~~~~~~~~ -const MyQueryRenderer = (props: { name: string, show: boolean }) => ( +const MyQueryRenderer = (props: { name: string; show: boolean }) => ( ( if (error) { return
{error.message}
; } else if (props) { - throw new Error('This code path should never be hit'); + throw new Error("This code path should never be hit"); } return
Loading
; }} @@ -100,7 +104,7 @@ const Story = (() => { class Story extends React.Component { state = { - isLoading: false + isLoading: false, }; componentDidMount() { @@ -109,9 +113,14 @@ const Story = (() => { handleRefresh() { this.setState({ isLoading: true }); - this.props.relay.refetch({ id: this.props.story.id }, {}, error => { - this.setState({ isLoading: false }); - }, { force: true }); + this.props.relay.refetch( + { id: this.props.story.id }, + {}, + error => { + this.setState({ isLoading: false }); + }, + { force: true } + ); } render() { @@ -162,6 +171,8 @@ const Story = (() => { // Artifact produced by relay-compiler-language-typescript declare const _FeedStories_feed$ref: unique symbol; type FeedStories_feed$ref = typeof _FeedStories_feed$ref; +declare const _FeedStory_edges$ref: unique symbol; +type FeedStory_edges$ref = typeof _FeedStory_edges$ref; // tslint:disable-next-line:interface-over-type-literal type FeedStories_feed = { readonly edges: ReadonlyArray<{ @@ -169,9 +180,15 @@ type FeedStories_feed = { readonly id: string; readonly " $fragmentRefs": Story_story$ref & FeedStories_feed$ref; }; + readonly " $fragmentRefs": FeedStory_edges$ref; }>; readonly " $refType": FeedStories_feed$ref; }; +// tslint:disable-next-line:interface-over-type-literal +type FeedStory_edges = ReadonlyArray<{ + readonly publishedAt: string; + readonly " $refType": FeedStory_edges$ref; +}>; const Feed = (() => { interface Props { @@ -181,6 +198,18 @@ const Feed = (() => { ignoreMe?: {}; } + const FeedStoryEdges: React.SFC<{ edges: FeedStory_edges }> = ({ edges }) => ( +
{edges.map(({ publishedAt }) => publishedAt).join(", ")}
+ ); + + const FeedStoryEdgesFragmentContainer = createFragmentContainer(FeedStoryEdges, { + edges: graphql` + fragment FeedStory_edges on FeedStoryEdge @relay(plural: true) { + publishedAt + } + `, + }); + const FeedStories: React.SFC = ({ feed, onStoryLike, relay }) => { // TODO: Getting env here for no good reason other than needing to test it works. // If you have a good relavant example, please update! @@ -188,24 +217,27 @@ const Feed = (() => { const stories = feed.edges.map(edge => { return ; }); - return
{stories}
; + return ( +
+ {stories} + {} +
+ ); }; - const FeedFragmentContainer = createFragmentContainer( - FeedStories, - { - feed: graphql` - fragment FeedStories_feed on Feed { - edges { - node { - id - ...Story_story - } + const FeedFragmentContainer = createFragmentContainer(FeedStories, { + feed: graphql` + fragment FeedStories_feed on Feed { + edges { + node { + id + ...Story_story } + ...FeedStoryEdges_feed } - `, - } - ); + } + `, + }); function doesNotRequireRelayPropToBeProvided() { const onStoryLike = (id: string) => console.log(`Liked story #${id}`); @@ -290,8 +322,7 @@ type UserFeed_user = { { direction: "forward", getConnectionFromProps(props) { - // TODO: Fix requirement to have `edges` and both `pageInfo` details for forward and backward pagination - return props.user && props.user.feed as any; + return props.user && props.user.feed; }, getFragmentVariables(prevVars, totalCount) { return { @@ -398,7 +429,7 @@ function markNotificationAsRead(source: string, storyID: string) { if (field) { field.setValue(data.story, "story"); } - } + }, }); } diff --git a/types/relay-runtime/index.d.ts b/types/relay-runtime/index.d.ts index 85a6c9c3ea..acfec9eaa5 100644 --- a/types/relay-runtime/index.d.ts +++ b/types/relay-runtime/index.d.ts @@ -5,6 +5,10 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.4 +// Prettified with: +// $ prettier --parser typescript --tab-width 4 --semi --trailing-comma es5 --write --print-width 120 \ +// types/{react-relay,relay-runtime}/{,*}/*.ts* + /** * SOURCE: * Relay 1.3.0