How to extract loading and error states from mutation?

[Jonathan]

i withdraw the issue.

[Martin Denk]

Fair enough! Still, I've taken your feedback to heart and will mull it over some. Thank you!

[Annyce Davis]

Is there an example for this? I have the same question. We use something like this const [mutation, { error, loading }] = useLoginWithThirdPartyServiceMutation(); all over our project currently. I'd love to migrate to using this package instead without having to change too much code. Thanks!

[Garrit Franke]

@adavis This library is a drop-in replacement for @apollo/client. The hooks have the same signature as the original ones, with some additional fields. 🙂

[Annyce Davis]

@adavis This library is a drop-in replacement for @apollo/client. The hooks have the same signature as the original ones, with some additional fields. 🙂

Weird, here's the error that I'm seeing when I just drop it in:

error - src/shared-components/UpdatedTermsModal/UpdatedTermsModal.tsx (63:6) @ UpdatedTermsModal
TypeError: function is not iterable (cannot read property Symbol(Symbol.iterator))
  61 |     acceptLatestTermsMutation,
  62 |     { data: acceptLatestTermsResponse, loading, called }
> 63 |   ] = useAcceptLatestTermsMutation();

And then when I read the documentation I saw this:

However, it does not return a tuple of the mutation function and the mutation result, but just the mutation function, since the result can easily be accessed from the mutation's resolved promise.

Am I missing something?

[Garrit Franke]

@adavis sorry about my half-baked reply. You're right, there is a difference.

Try this:

// "Use" the mutation in your component
const loginWithThirdPartyService = useLoginWithThirdPartyServiceMutation();

// Call the mutation where needed
const { data } = await loginWithThirdPartyService();

Notice that just the mutation function is returned from useMutation, instead of a tuple. The error and loading states can be extracted from the promise if needed.

[Annyce Davis]

Thanks, here's how our engineers have set up these calls:

const useFacebook = () => {
 const [socialLoginMutation, { error, loading }] =
    useLoginWithThirdPartyServiceMutation();

  const facebookLogin = useCallback(
    async (token: string) => {
      try {
        const response = await socialLoginMutation({...});
         ...
        const loginData = response?.data?.loginWithThirdPartyService;
         ...
    },
    [socialLoginMutation]
  );

  useEffect(() => {
    if (error) {
      ...
    }
  }, [error]);

  return {
    loading,
    facebookLogin
  };
};

export default useFacebook;

There are separate useCallback and useEffect calls that make your proposal unusable. If the library were to return the tuple then we wouldn't have to change all of the call sites.

[Martin Denk]

Hey @adavis - I'm currently sick, so unfortunately I can't help you right away, but I've been regretting my decision not to return the tuple for a while now. When I'm back on my feet, I'll likely release a major version update introducing the breaking change of returning the tuple. I'm glad you're interested in this library and I hope you're willing to wait a bit longer. :)

[Annyce Davis]

Hey @adavis - I'm currently sick, so unfortunately I can't help you right away, but I've been regretting my decision not to return the tuple for a while now. When I'm back on my feet, I'll likely release a major version update introducing the breaking change of returning the tuple. I'm glad you're interested in this library and I hope you're willing to wait a bit longer. :)

I hope you feel better soon! And I'm happy to wait, I think this will be great for our app. Take care.

[Martin Denk]

@adavis - Thanks for your well wishes! I've just released v3.0.0, so you should be able to move forward now. See the change log for further details: https://github.com/appmotion/apollo-augmented-hooks/releases/tag/v3.0.0