0

我首先要说，我挣扎的时间比我的骄傲想要承认的要长，并且推迟了询问，因为我不确定我会变得多清楚；但是，这里有。. .

我将 Angular 9 与 Apollo-Angular 一起使用，并且在访问没有变量或只有一个变量的 GraphQL 查询时没有问题。如果我添加多个，我绝对不成功。我创建了一个简单的服务，允许我创建动态查询，所以我有一个看起来像这样的变量类型： 在此处输入图像描述

Apollo-Angular 客户端将其视为下图中显示的类型。从我在文档中看到的所有内容来看，Apollo-Angular 应该能够获取任何给定的对象并将其转换为适合查询的执行，但同样……我还没有使用多个变量来实现这一点。 在此处输入图像描述

调用查询时，它看起来像这样：

在此处输入图像描述

这会在调试控制台中产生以下输出：

GraphQLQueryVariables {first: 5, order_by: "accountNumber.ASC"}
{"first":5,"order_by":"accountNumber.ASC"}
Error Message Notification: Error: GraphQL error: Variable `$order_by` got invalid value.

在 Chrome 中，这是正在执行的： 在此处输入图像描述

如果我将 Chrome 中显示的完全相同的内容复制到 GraphQL Playground 中，它会返回“无法解析变量。请转到变量编辑器并修复语法问题”</p>

我已经尝试了几个小时试图通过 WatchQuery 变量属性发送不同的方式。如果我尝试使用 JSON.stringify 将多个变量作为字符串发送，它在 Chrome 中显示如下： 在此处输入图像描述 在此处输入图像描述

如果我真的手动输入一个静态值，我从一开始就会遇到同样的问题，“无法解析变量……”</p>

在此处输入图像描述

如果我在操场上运行完全相同的东西……但只需添加引号（Chrome 中没有显示），我就成功了：

在此处输入图像描述

据我所知，无论我如何从 Appllo-Angular Query Watch 变量属性发送它，我都无法正确发送它。它发送正确的唯一时间是我只使用一个变量并且该变量恰好是一个整数。

有没有我可以/应该采取的替代方法？我只是在做这绝对不正确吗？

我的具体问题是使用 Angular 和 Apollo-Angular：

  1. 如何为 GraphQL 查询发送多个变量（first、order_by、where 等）？
  2. 如何在这些变量之一中发送多个项目（例如：“order_by”：“customerName.ASC、accountNumber.DESC、startDate.DESC”）？

编辑：我刚刚在GraphQL Specs中发现了这个：

    Variables Are Input Types
    Formal Specification

    For every operation in a document
    For every variable on each operation
    Let variableType be the type of variable
    IsInputType(variableType) must be true
    Variables can only be input types. Objects, unions, and interfaces cannot be used as inputs

我在想这意味着我需要在后端（.net core、EF.core 和 Hot Chocolate）中添加一个 InputType，它将在架构中生成一个 Input Type。我还没有弄清楚，但至少已经给出了一条新的冒险之路。

编辑：我的每种类型都有其中一种用于变量（唯一会改变的是括号中的内容“Get[AVOs]Variables”、“[AVO]Sort”、“[AVO]Filter”

export interface GetAVOsVariables {
    order_by?: AVOSort | null;
    first?: any | null;
    last?: any | null;
    after?: string | null;
    before?: string | null;
    where?: AVOFilter | null;
  }

“[x]Sort”是一个字符串，即：[fieldName].ASC 或 [fieldName].DESC，无论类型如何。过滤器的工作原理类似。我希望尽可能创建最通用、可重用的版本，以防止克隆相同的代码结构只是为了更改类型名称。

编辑：我能够通过这种方式编写变量来使变量正常工作，而不仅仅是尝试在一行中发送对象：

this.result = this.apollo.watchQuery<GraphQLResponse>({
    query: gql`${this.query}`,
    variables: {
        first: this.graphRequest.variables.first,
        last: this.graphRequest.variables.last,
        before: this.graphRequest.variables.before,
        after: this.graphRequest.variables.after,
        where: this.graphRequest.variables.where,
        order_by: this.graphRequest.variables.order_by
    } 
  }).valueChanges
    .pipe(map(({data}) => data));
    return this.result;
}
4

0 回答 0