-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add react-apollo-hooks code generation #1295
Add react-apollo-hooks code generation #1295
Conversation
@leonardfactory That's really nice! Thank you @leonardfactory . |
Sure I can review it |
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.
Can you please add useSubscription()
support? You can use my implementation of it. I know this is not officially supported yet, but it's likely to be part of the library and released soon. Not to mention that we use it vastly in our WhatsApp Clone.
I also don't think we should have a double post-fix for for hooks e.g. useAddUserMutationMutation
should be useAddUserMutation
.
Last thing, why do we need to generate React-Components style queries and mutations if we use hooks? Can't we make this conditional based on withHooks
?
@DAB0mB For now, can we publish another package for subscription hooks? What do you think? |
I'd like to add them, but as you pointed out, it would require to include a withSubscriptionHooks: true
importUseSubscriptionFrom: './addons/react-apollo-subscriptions' And the plugin will output: import { useSubscription } from './addons/react-apollo-subscriptions'
// ...
// Actual `useXXXSubscription` This way, when
Oh you're absolutely right! The bad example comes from a problem in my ops naming. Just to be clear, do you mean that a
I was thinking about users who would like to play with hooks without changing existing codebase. Would you like a Thanks for your review anyway! |
@leonardfactory Sounds good. I think instead of |
@DAB0mB It feels more consistent to me too, but we already have a export interface TypeScriptReactApolloConfig extends TypeScriptCommonConfig {
noGraphqlTag?: boolean;
noNamespaces?: boolean;
noHOC?: boolean; // here
withHooks?: boolean;
} We can change it to be |
@leonardfactory No don't change if it already exists then. Do you have an example app that uses your features? |
I added them with the
@DAB0mB I tried to introduce changes without breaking anything, so I'd like to uniform them to My proposal is to keep them as they are, and change them to
Not at the moment, just mixed it to something we are developing for a client of ours. Maybe i'll try to set-up something in the next days 👍 |
@leonardfactory Sounds good. Would like to test it first before I approve it. Overall looks very good and useful |
@DAB0mB Perfect! Let me know if you find something during your tests. I'll ping you if I get a demo app running. |
@leonardfactory I'm testing your modifications with the WhatsApp clone. I use the following config: noHOC: true
noComponents: true
noNamespaces: true
withHooks: true
withSubscriptionHooks: true
importUseSubscriptionFrom: '../polyfills/react-apollo-hooks' The only issue I have so far is that it tries to import |
Here's the example app: https://github.com/Urigo/WhatsApp-Clone-Client-React/tree/test/codegen-react-hooks |
@DAB0mB I disabled both react and react-apollo imports when |
@leonardfactory Sounds good. Let me do some final check-ups |
@DAB0mB Ok 👍 |
@dotansimha @ardatan I approve this PR. It works and looks great to me |
I think we should prevent possible errors if ‘unusedImports’ is set in tsconfig. |
@ardatan do you think using |
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.
Great work! I can try the branch out locally if there's still concerns.
@leonardfactory Yes! 👍🏻 |
@ardatan Done! 👍 I've added the wildcard imports and tested it, seems fine to me |
@leonardfactory Thank you! LGTM @DAB0mB |
@leonardfactory Me and the people at The-Guild are very excited about this feature, and we thought of telling the world about it by publishing an article on Meidum. Would you like to submit an article? We can make it under The-Guild's distribution. It would be an honor if so. |
Sure, it would be an honour for me! I'll prepare something these days |
Anything I can help with before this is merged? Looking forward to the article! |
@DAB0mB I've written the draft and I'd like to share it with you before publishing: https://medium.com/@leonardoascione/introducing-hooks-generation-for-react-apollo-2cdc8a7b526d |
@leonardfactory That's awesome. I'll go through it and give you my thoughts. Let's wait for @dotansimha to merge it and release a new version and then we can see how we can take it further. It's gonna be very useful. |
Thank you @leonardfactory !! It looks GREAT!!! |
FYI I just published a new version of react-apollo-hooks (0.4.1) with the |
@trojanowski Awesome! Thank you for notifying, I'll give it a shot this weekend in order to add it here too. |
@leonardfactory So we don't need |
@ardatan Yes! 🎉 |
Summary
With this PR, i'd like to add generators for
react-apollo-hooks
, following official React Hooks release.Hooks generation is behind a config flag (
withHooks
) and by default is disabled.Example code generated:
Motivation
Even if react hooks are not officially supported by
react-apollo
library, there are many discussions around integrating them. Furthermore, current implementation by @trojanowski seems like a perfect way to start using them right now.Why not another plugin?
All the typings are shared, providing Hooks is just an addition (like HOCs). Generation is optional due to
withHooks
flag, so it should play well with current usage.Let me know if there's something I should change, or if you'd prefer a different approach.