-
Notifications
You must be signed in to change notification settings - Fork 787
Add an alias
option to graphql
container
#413
Conversation
…e wrapped component’s display name
Also I wasn't sure where/how to write tests, so I thought I'd get feedback on the PR itself first and improve it later. |
Can you write a test that just renders a aliased wrapped component and then checks it's display name? |
@@ -37,6 +37,7 @@ export declare interface MutationOptions { | |||
optimisticResponse?: Object; | |||
updateQueries?: MutationQueryReducersMap; | |||
forceFetch?: boolean; | |||
alias?: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it should be an OperationOption
@@ -156,7 +158,7 @@ export default function graphql( | |||
const version = nextVersion++; | |||
return function wrapWithApolloComponent(WrappedComponent) { | |||
|
|||
const graphQLDisplayName = `Apollo(${getDisplayName(WrappedComponent)})`; | |||
const graphQLDisplayName = `${mapPropsToOptions({}).alias || `Apollo`}(${getDisplayName(WrappedComponent)})`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you make it an OperationOption
(like name
), you won't need to do this janky thing.
This is awesome. I wonder if this can also be done with a babel transform which would be cool |
@tmeasday is that what you meant? |
alias: 'withFoo', | ||
}) | ||
class Container extends React.Component<any, any> { | ||
componentWillReceiveProps(props) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think you need to do all this; it's sort of testing the query.metadata
feature is working but there's a separate test for that (I assume).
Can you not just do
const instance = renderer.create(<Container>);
instance.displayName;
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I get an error: Invariant Violation: Could not find "client" in the context of "withFoo(Container)". Wrap the root component in an <ApolloProvider>
.
But if I wrap the component in <ApolloProvider>
, I'm not sure how to access its displayName
…
Not sure what typescript is doing but |
Nice! Btw I meant to submit it as a separate PR, but I also added a short note in the README on how to work with the package locally, I thought it might help others. |
As explained in #354, your React component tree can get quite confusing when you have many nested
Apollo(...)
containers. This PR adds analias
option to thegraphql
HoC factory function:Before:
After:
TODO: