Как использовать мутации генератора кода GraphQL в React Native?

[РЕДАКТИРОВАТЬ] См. Мой ответ ниже.

В нашем приложении, ориентированном на реакцию, мы используем Генератор кода GraphQL (GCG) для генерации запросов GraphQL и мутаций из нашей схемы и локальных файлов GraphQL. Ниже находится раздел генерирует нашего файла codegen.yml.

generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      withResultType: true
      withHOC: false
      withHooks: true
      withComponent: false
      withMutationFn: false
  ./graphql.schema.json:
    plugins:
      - "introspection"

Запросы очень просты в том, как они вызываются и как осуществляется доступ к данным.

Однако мутации стали для нас препятствием.

Вот файл graphql, который обрабатывает генератор кода GraphQL:

  mutation GetPaymentUrl(
    $account_number: String!
    $role: String!
    $pay_my_bill: Boolean
    $mortgageeBillIndicator: Boolean
    $requested_by: String!
  ) {
    getIncPaymentUrl(
      input: {
        account_number: $account_number
        role: $role
        pay_my_bill: $pay_my_bill
        mortgageeBillIndicator: $mortgageeBillIndicator
        requested_by: $requested_by
      }
    ) {
      account_number
      payment_portal_redirect_url
    }
  }

Вот код, сгенерированный GCG:

export type Mutation = {
  __typename?: 'Mutation';
  getIncPaymentUrl?: Maybe<IncResponse>;
};

export type MutationGetIncPaymentUrlArgs = {
  input?: Maybe<IncPaymentRequestUrl>;
};

export type IncPaymentRequestUrl = {
  account_number: Scalars['String'];
  role: Scalars['String'];
  pay_my_bill?: Maybe<Scalars['Boolean']>;
  mortgageeBillIndicator?: Maybe<Scalars['Boolean']>;
  requested_by: Scalars['String'];
};

export type IncResponse = {
  __typename?: 'IncResponse';
  account_number?: Maybe<Scalars['String']>;
  payment_portal_redirect_url?: Maybe<Scalars['String']>;
};

export type GetPaymentUrlMutationVariables = Exact<{
  account_number: Scalars['String'];
  role: Scalars['String'];
  pay_my_bill?: Maybe<Scalars['Boolean']>;
  mortgageeBillIndicator?: Maybe<Scalars['Boolean']>;
  requested_by: Scalars['String'];
}>;

export type GetPaymentUrlMutation = {__typename?: 'Mutation'} & {
  getIncPaymentUrl?: Maybe<
    {__typename?: 'IncResponse'} & Pick<
      IncResponse,
      'account_number' | 'payment_portal_redirect_url'
    >
  >;
};

export const GetPaymentUrlDocument = gql`
  mutation GetPaymentUrl(
    $account_number: String!
    $role: String!
    $pay_my_bill: Boolean
    $mortgageeBillIndicator: Boolean
    $requested_by: String!
  ) {
    getIncPaymentUrl(
      input: {
        account_number: $account_number
        role: $role
        pay_my_bill: $pay_my_bill
        mortgageeBillIndicator: $mortgageeBillIndicator
        requested_by: $requested_by
      }
    ) {
      account_number
      payment_portal_redirect_url
    }
  }
`;

/**
 * __useGetPaymentUrlMutation__
 *
 * To run a mutation, you first call `useGetPaymentUrlMutation` within a React component and pass it any options that fit your needs.
 * When your component renders, `useGetPaymentUrlMutation` returns a tuple that includes:
 * - A mutate function that you can call at any time to execute the mutation
 * - An object with fields that represent the current status of the mutation's execution
 *
 * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
 *
 * @example
 * const [getPaymentUrlMutation, { data, loading, error }] = useGetPaymentUrlMutation({
 *   variables: {
 *      account_number: // value for 'account_number'
 *      role: // value for 'role'
 *      pay_my_bill: // value for 'pay_my_bill'
 *      mortgageeBillIndicator: // value for 'mortgageeBillIndicator'
 *      requested_by: // value for 'requested_by'
 *   },
 * });
 */
export function useGetPaymentUrlMutation(
  baseOptions?: Apollo.MutationHookOptions<
    GetPaymentUrlMutation,
    GetPaymentUrlMutationVariables
  >,
) {
  return Apollo.useMutation<
    GetPaymentUrlMutation,
    GetPaymentUrlMutationVariables
  >(GetPaymentUrlDocument, baseOptions);
}
export type GetPaymentUrlMutationHookResult = ReturnType<
  typeof useGetPaymentUrlMutation
>;
export type GetPaymentUrlMutationResult = Apollo.MutationResult<GetPaymentUrlMutation>;
export type GetPaymentUrlMutationOptions = Apollo.BaseMutationOptions<
  GetPaymentUrlMutation,
  GetPaymentUrlMutationVariables
>;

Когда я исследую getPaymentUrlMutation из приведенного выше примера, я не вижу функции мутировать, задокументированной в сгенерированном коде. Я вижу методы "call", "apply" и "bind".

Я не понимаю, где и как назвать эту мутацию.

Я обнаружил, что если я вызываю getPaymentUrlMutation.call({}) перед возвратом в моем tsx-файле, я получаю бесконечный цикл запросов.

Если в ответ я назову это так ...

          <ButtonStyle
            onPress = {() => {
              getPaymentUrlMutation.call({}).then((r) =>
                  OnPayment(
                    r.data?.getIncPaymentUrl?.payment_portal_redirect_url,
                  ),
                );
            }}>
            <PayButtonStyle>pay now</PayButtonStyle>
          </ButtonStyle>

... У меня нет возможности обрабатывать ошибки. Кроме того, как отмечает @xadm, это не кажется «правильным» с точки зрения реакции.

Как мне выполнить мутацию в контексте события onPress для кнопки, поддерживающей реакцию?