From 9f79ee1c6da9e9f5d1acce21111bc34d8e6dbe37 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 4 Jul 2018 15:01:47 -0300 Subject: [PATCH] Better relay types --- .../lib/relay/withFragmentContainer.ts | 2 +- .../lib/relay/withLocalStateContainer.tsx | 11 ++++-- .../lib/relay/withPaginationContainer.ts | 2 +- .../lib/relay/withRefetchContainer.ts | 2 +- .../client/stream/containers/AppContainer.tsx | 8 ++--- .../stream/containers/AssetListContainer.tsx | 8 ++--- .../stream/containers/CommentContainer.tsx | 8 ++--- .../stream/containers/StreamContainer.tsx | 36 ++++++++++--------- 8 files changed, 42 insertions(+), 35 deletions(-) diff --git a/src/core/client/framework/lib/relay/withFragmentContainer.ts b/src/core/client/framework/lib/relay/withFragmentContainer.ts index c4636fe3c..2541b2001 100644 --- a/src/core/client/framework/lib/relay/withFragmentContainer.ts +++ b/src/core/client/framework/lib/relay/withFragmentContainer.ts @@ -6,7 +6,7 @@ import { InferableComponentEnhancerWithProps } from "recompose"; * from Relay. */ export default ( - fragmentSpec: GraphQLTaggedNode + fragmentSpec: { [P in keyof T]: GraphQLTaggedNode } ): InferableComponentEnhancerWithProps => ( component: React.ComponentType ) => createFragmentContainer(component, fragmentSpec) as any; diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx index d08aa5d55..9de4180bb 100644 --- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx +++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx @@ -1,6 +1,11 @@ import * as React from "react"; import { compose, hoistStatics, InferableComponentEnhancer } from "recompose"; -import { CSelector, CSnapshot, Environment } from "relay-runtime"; +import { + CSelector, + CSnapshot, + Environment, + GraphQLTaggedNode, +} from "relay-runtime"; import { withContext } from "../bootstrap"; @@ -25,7 +30,7 @@ export const LOCAL_ID = "client:root.local"; * must have the `LOCAL_ID`. */ function withLocalStateContainer( - fragmentSpec: any + fragmentSpec: GraphQLTaggedNode ): InferableComponentEnhancer<{ local: T }> { return compose( withContext(({ relayEnvironment }) => ({ relayEnvironment })), @@ -33,7 +38,7 @@ function withLocalStateContainer( class LocalStateContainer extends React.Component { constructor(props: Props) { super(props); - const fragment = fragmentSpec.data().default; + const fragment = (fragmentSpec as any).data().default; if (fragment.kind !== "Fragment") { throw new Error("Expected fragment"); } diff --git a/src/core/client/framework/lib/relay/withPaginationContainer.ts b/src/core/client/framework/lib/relay/withPaginationContainer.ts index 9c669123b..a5d8e1231 100644 --- a/src/core/client/framework/lib/relay/withPaginationContainer.ts +++ b/src/core/client/framework/lib/relay/withPaginationContainer.ts @@ -24,7 +24,7 @@ type ConnectionConfig = Overwrite< * from Relay. */ export default ( - fragmentSpec: GraphQLTaggedNode, + fragmentSpec: { [P in keyof T]: GraphQLTaggedNode }, connectionConfig: ConnectionConfig ): InferableComponentEnhancerWithProps< T & { relay: RelayPaginationProp }, diff --git a/src/core/client/framework/lib/relay/withRefetchContainer.ts b/src/core/client/framework/lib/relay/withRefetchContainer.ts index 7d11e0e16..9e9989758 100644 --- a/src/core/client/framework/lib/relay/withRefetchContainer.ts +++ b/src/core/client/framework/lib/relay/withRefetchContainer.ts @@ -10,7 +10,7 @@ import { InferableComponentEnhancerWithProps } from "recompose"; * from Relay. */ export default ( - fragmentSpec: GraphQLTaggedNode, + fragmentSpec: { [P in keyof T]: GraphQLTaggedNode }, refetchQuery: GraphQLTaggedNode ): InferableComponentEnhancerWithProps< T & { relay: RelayRefetchProp }, diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index 256d860b4..89acdea38 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -15,8 +15,8 @@ const AppContainer: StatelessComponent = props => { return ; }; -const enhanced = withFragmentContainer<{ data: Data }>( - graphql` +const enhanced = withFragmentContainer<{ data: Data }>({ + data: graphql` fragment AppContainer on Query @argumentDefinitions( assetID: { type: "ID!" } @@ -29,8 +29,8 @@ const enhanced = withFragmentContainer<{ data: Data }>( ...StreamContainer_asset } } - ` -)(AppContainer); + `, +})(AppContainer); export type AppContainerProps = PropTypesOf; export default enhanced; diff --git a/src/core/client/stream/containers/AssetListContainer.tsx b/src/core/client/stream/containers/AssetListContainer.tsx index 6e441f00e..42345cc16 100644 --- a/src/core/client/stream/containers/AssetListContainer.tsx +++ b/src/core/client/stream/containers/AssetListContainer.tsx @@ -16,8 +16,8 @@ const AssetListContainer: StatelessComponent = props => { return ; }; -const enhanced = withFragmentContainer<{ assets: Data }>( - graphql` +const enhanced = withFragmentContainer<{ assets: Data }>({ + assets: graphql` fragment AssetListContainer_assets on AssetsConnection { edges { node { @@ -26,8 +26,8 @@ const enhanced = withFragmentContainer<{ assets: Data }>( } } } - ` -)(AssetListContainer); + `, +})(AssetListContainer); export type AssetListContainerProps = PropTypesOf; export default enhanced; diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index 9a4d03cd8..e80793e49 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -14,16 +14,16 @@ const CommentContainer: StatelessComponent = props => { return ; }; -const enhanced = withFragmentContainer<{ data: Data }>( - graphql` +const enhanced = withFragmentContainer<{ data: Data }>({ + data: graphql` fragment CommentContainer on Comment { author { username } body } - ` -)(CommentContainer); + `, +})(CommentContainer); export type CommentContainerProps = PropTypesOf; export default enhanced; diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx index 8660dc7bb..2ef8d72b5 100644 --- a/src/core/client/stream/containers/StreamContainer.tsx +++ b/src/core/client/stream/containers/StreamContainer.tsx @@ -45,26 +45,28 @@ class StreamContainer extends React.Component { } const enhanced = withPaginationContainer<{ asset: Data }, InnerProps>( - graphql` - fragment StreamContainer_asset on Asset - @argumentDefinitions( - count: { type: "Int", defaultValue: 5 } - cursor: { type: "Cursor" } - orderBy: { type: "COMMENT_SORT", defaultValue: CREATED_AT_DESC } - ) { - id - isClosed - comments(first: $count, after: $cursor, orderBy: $orderBy) - @connection(key: "Stream_comments") { - edges { - node { - id - ...CommentContainer + { + asset: graphql` + fragment StreamContainer_asset on Asset + @argumentDefinitions( + count: { type: "Int", defaultValue: 5 } + cursor: { type: "Cursor" } + orderBy: { type: "COMMENT_SORT", defaultValue: CREATED_AT_DESC } + ) { + id + isClosed + comments(first: $count, after: $cursor, orderBy: $orderBy) + @connection(key: "Stream_comments") { + edges { + node { + id + ...CommentContainer + } } } } - } - `, + `, + }, { direction: "forward", getConnectionFromProps(props) {