Create mutation hooks for auth provider

src/auth/AuthProvider.tsx

@@ -13,9 +13,9 @@ import { useIntl } from "react-intl";
 
 import { UserContext } from "./";
 import {
-  TokenRefreshMutation,
-  TypedTokenAuthMutation,
-  TypedVerifyTokenMutation
+  useTokenAuthMutation,
+  useTokenRefreshMutation,
+  useTokenVerifyMutation
 } from "./mutations";
 import { RefreshToken, RefreshTokenVariables } from "./types/RefreshToken";
 import { TokenAuth, TokenAuthVariables } from "./types/TokenAuth";
@@ -42,6 +42,10 @@ const AuthProviderOperations: React.FC<AuthProviderOperationsProps> = ({
   const intl = useIntl();
   const notify = useNotifier();
 
+  const tokenAuth = useTokenAuthMutation({});
+  const tokenRefresh = useTokenRefreshMutation({});
+  const tokenVerify = useTokenVerifyMutation({});
+
   const handleLogin = () => {
     if (DEMO_MODE) {
       displayDemoMessage(intl, notify);
@@ -49,26 +53,14 @@ const AuthProviderOperations: React.FC<AuthProviderOperationsProps> = ({
   };
 
   return (
-    <TypedTokenAuthMutation>
-      {(...tokenAuth) => (
-        <TypedVerifyTokenMutation>
-          {(...tokenVerify) => (
-            <TokenRefreshMutation>
-              {(...tokenRefresh) => (
-                <AuthProvider
-                  tokenAuth={tokenAuth}
-                  tokenVerify={tokenVerify}
-                  tokenRefresh={tokenRefresh}
-                  onLogin={handleLogin}
-                >
-                  {children}
-                </AuthProvider>
-              )}
-            </TokenRefreshMutation>
-          )}
-        </TypedVerifyTokenMutation>
-      )}
-    </TypedTokenAuthMutation>
+    <AuthProvider
+      tokenAuth={tokenAuth}
+      tokenVerify={tokenVerify}
+      tokenRefresh={tokenRefresh}
+      onLogin={handleLogin}
+    >
+      {children}
+    </AuthProvider>
   );
 };
 

src/auth/mutations.ts

@@ -1,5 +1,6 @@
 import { fragmentUser } from "@saleor/fragments/auth";
 import { accountErrorFragment } from "@saleor/fragments/errors";
+import makeMutation from "@saleor/hooks/makeMutation";
 import gql from "graphql-tag";
 
 import { TypedMutation } from "../mutations";
@@ -17,7 +18,7 @@ export const tokenAuthMutation = gql`
   mutation TokenAuth($email: String!, $password: String!) {
     tokenCreate(email: $email, password: $password) {
       token
-      errors {
+      errors: accountErrors {
         field
         message
       }
@@ -27,11 +28,9 @@ export const tokenAuthMutation = gql`
     }
   }
 `;
-
-export const TypedTokenAuthMutation = TypedMutation<
-  TokenAuth,
-  TokenAuthVariables
->(tokenAuthMutation);
+export const useTokenAuthMutation = makeMutation<TokenAuth, TokenAuthVariables>(
+  tokenAuthMutation
+);
 
 export const tokenVerifyMutation = gql`
   ${fragmentUser}
@@ -44,12 +43,23 @@ export const tokenVerifyMutation = gql`
     }
   }
 `;
-
-export const TypedVerifyTokenMutation = TypedMutation<
+export const useTokenVerifyMutation = makeMutation<
   VerifyToken,
   VerifyTokenVariables
 >(tokenVerifyMutation);
 
+const refreshToken = gql`
+  mutation RefreshToken($token: String!) {
+    tokenRefresh(csrfToken: $token) {
+      token
+    }
+  }
+`;
+export const useTokenRefreshMutation = makeMutation<
+  RefreshToken,
+  RefreshTokenVariables
+>(refreshToken);
+
 export const requestPasswordReset = gql`
   ${accountErrorFragment}
   mutation RequestPasswordReset($email: String!, $redirectUrl: String!) {
@@ -84,15 +94,3 @@ export const SetPasswordMutation = TypedMutation<
   SetPassword,
   SetPasswordVariables
 >(setPassword);
-
-const refreshToken = gql`
-  mutation RefreshToken($token: String!) {
-    tokenRefresh(csrfToken: $token) {
-      token
-    }
-  }
-`;
-export const TokenRefreshMutation = TypedMutation<
-  RefreshToken,
-  RefreshTokenVariables
->(refreshToken);

src/auth/types/TokenAuth.ts

@@ -9,7 +9,7 @@ import { PermissionEnum } from "./../../types/globalTypes";
 // ====================================================
 
 export interface TokenAuth_tokenCreate_errors {
-  __typename: "Error";
+  __typename: "AccountError";
   field: string | null;
   message: string | null;
 }