Question

我使用angular 6用Apollo编写我的网站，以便与graphpl服务器进行交互。我希望能够先从客户端获取的参数转义，然后再将其添加到我的gql查询中。

这是我的服务文件：

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

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private apollo: Apollo) { }

  searchForProduct(productName: string) {
    return this.apollo.watchQuery<any>({
    query: gql`{products_by_p_name_search(lang_id:1,query:"${productName}")
    {category_id,price,category_name,id,name,desc,quantity,year_manufacture,image_file}}`
    });
  }

}

如您在此处看到的，函数searchForProduct正在接收一个productName参数，该参数已添加到我的gql查询中。我如何正确地对其进行转义，以便查询包含特殊字符也不会中断？

谢谢！

Answer 1

在GraphQL中，您的查询应该是静态的，这意味着查询字符串不应在运行时更改（我希望有更多的最佳实践可以共享，对此表示遗憾）。为此，GraphQL附带了对变量的支持。变量在查询字符串中定义，然后以其他属性发送到服务器。

查询示例：

query getProducts($productName: String!) {
  products_by_p_name_search(lang_id:1,query: $productName) {
    category_id
    price
    category_name
    id
    name
    desc
    quantity
    year_manufacture
    image_file
  }
}

然后将变量添加到您的客户端调用中：

return this.apollo.watchQuery<any>({
  query, //...
  variables: { productName }
});

这样，就无需对GraphQL（！）进行转义。

Answer 2

您还可以在js es6中使用模板文字。

例如：

const singleProduct = product.id;

  const queryProduct = `{
    product(id:
      "${singleProduct}") {
          variants(first: 15) {
            edges {
              node {
                id,
                title
              }
            }
          }
    }
  }`;

如何为graphql查询转义变量

2 个答案: