Angular中如何从UI传递参数至GraphQL获取客户数据

首先，你遇到的“Unterminated String”错误是因为直接把变量拼接到GraphQL查询字符串里，这种做法很容易破坏查询的语法结构（比如如果用户输入的ID包含引号或特殊字符，直接拼接会导致字符串未闭合），而且也不安全。正确的做法是使用GraphQL变量来传递动态参数，配合Angular的双向绑定来获取用户输入。

下面是完整的实现步骤：

1. 配置UI双向绑定 #

在组件的模板文件（比如your-component.component.html）中添加输入框和查询按钮，用[(ngModel)]实现双向绑定：

<!-- 确保已经在模块中导入了FormsModule，否则ngModel无法使用 -->
<input type="text" [(ngModel)]="customerIdValue" placeholder="请输入客户ID" />
<button (click)="searchByCustomerIdGraphQL()">查询客户</button>

2. 组件中实现带变量的GraphQL查询 #

在组件的TypeScript文件中，定义customerIdValue变量，然后使用GraphQL变量来传递参数，而不是直接拼接字符串：

import { Component } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Component({
  selector: 'app-customer-search',
  templateUrl: './customer-search.component.html'
})
export class CustomerSearchComponent {
  customerIdValue: string = '';
  customerSearchRecord: any;
  loading: boolean = false;
  error: any;

  constructor(private apollo: Apollo) {}

  searchByCustomerIdGraphQL() {
    if (!this.customerIdValue.trim()) {
      alert('请输入有效的客户ID');
      return;
    }

    this.loading = true;
    // 定义带变量的GraphQL查询
    const GET_CUSTOMER = gql`
      query GetCustomer($id: String!) {
        findCustomer(id: $id) {
          id
          customerType
          // 这里可以添加你需要的其他字段
        }
      }
    `;

    this.apollo.watchQuery({
      query: GET_CUSTOMER,
      // 传递变量到查询中
      variables: {
        id: this.customerIdValue
      }
    }).valueChanges.subscribe(result => {
      this.customerSearchRecord = result.data.findCustomer;
      this.loading = result.loading;
      this.error = result.errors;
      this.loading = false;
    }, error => {
      this.error = error;
      this.loading = false;
    });
  }
}

关键说明： #

• GraphQL变量：用$id作为占位符，在查询定义中声明变量的类型（这里是String!，表示必填的字符串类型），然后在watchQuery的variables属性中传入实际值。这种方式既安全又能避免语法错误。
• FormsModule导入：要使用[(ngModel)]，需要在你的模块（比如AppModule）中导入FormsModule：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他导入
      FormsModule
    ]
  })
  export class AppModule { }
  

• 输入验证：添加了简单的非空验证，避免用户点击空查询。

这样修改后，你就可以通过输入框任意输入客户ID，安全地传递到GraphQL查询中，再也不会出现字符串未闭合的错误了。

内容的提问来源于stack exchange，提问作者Cpt.Kitkat