如何在 React Native 中使用 GraphQL 代码生成器突变？

Question

[编辑] 请参阅下面的答案。

在我们的 react-native 应用程序中，我们使用 GraphQL Code Generator (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 时，我没有看到生成的代码中记录了 mutate 函数。我确实看到了“调用”、“应用”和“绑定”方法。

我不清楚在哪里/如何调用这个突变。

我发现如果我在我的 tsx 文件中返回之前调用 getPaymentUrlMutation.call({})，我会得到一个无限循环的请求。

如果我在 return 中这样称呼它...

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

...我没有机会处理错误。另外，正如@xadm 所说，从反应的角度来看，它似乎并不“正确”。

我应该如何在 onPress 事件的上下文中为 react-native 按钮执行突变？

Answer 1

我终于想通了如何处理GraphQL Code Generator产生的突变。

这就是我的情况：

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

r 是从突变返回的对象。

[编辑] 我收到了一些关于我上面的解决方案的负面反馈，尽管我已经与其他反应开发人员交谈过，他们说我所做的正是它应该做的。是的远远超过了否定，这对我有用。