Можете привести пример логина в Formik с GraphQL query, а не mutation?

В примере использовал GraphQL Code Generator, преобразующий запросы и мутации в хуки. Пример работать не будет, так как хук useLoginQuery внутри тела. Как наиболее элегантно создать авторизацию?

import { useLoginQuery } from 'graphql/generated'

const FormAuthorization = () => {
    return (
        <Wrapper>
            <Formik
                initialValues={{ mail: '', password: ''}}
                onSubmit={(values) => {
                    useLoginQuery({
                        variables: {
                            email: values.mail,
                            password: values.password,
                        },
                    })
                }}
            >
                {() => (
                    <Form>
                        <UiInput
                            name="mail"
                            placeholder="Введите эл. почту"
                            id="mail"
                            label="Mail"
                        />
                        <UiInput
                            name="password"
                            placeholder="Введите пароль"
                            id="password"
                            label="Password"
                            type="password"
                        />
                        <UiButton type="submit">Войти</UiButton>
                    </Form>
                )}
            </Formik>
        </Wrapper>
    )
}

Запрос

query Login($email: String!, $password: String!) {
    Login(email: $email, password: $password) {
        token
    }
}

Генератор GraphQL(Cтарался почистить, хук внизу)

import * as Apollo from '@apollo/client';
export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };

export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
};

export type User = {
  __typename?: 'User';
  id: Scalars['ID'];
  login: Scalars['String'];
  name: Scalars['String'];
  email: Scalars['String'];
  token?: Maybe<Scalars['String']>;
  services_tokens?: Maybe<Array<Maybe<Token>>>;
};

export type LoginQueryVariables = Exact<{
  email: Scalars['String'];
  password: Scalars['String'];
}>;

export type LoginQuery = (
  { __typename?: 'Query' }
  & { Login?: Maybe<(
    { __typename?: 'User' }
    & Pick<User, 'email' | 'token'>
  )> }
);

export function useLoginQuery(baseOptions?: Apollo.QueryHookOptions<LoginQuery, LoginQueryVariables>) {
        return Apollo.useQuery<LoginQuery, LoginQueryVariables>(LoginDocument, baseOptions);
}

Ответы (0 шт):