为什么阿波罗角查询返回空数组？答案

【问题标题】：Why is apollo-angular Query returning empty array?为什么阿波罗角查询返回空数组？
【发布时间】：2020-11-17 00:52:02
【问题描述】：

我最近安装并设置了 apollo-angular，但无法从查询中获取数据。我提到了处理类似问题的other questions，但它们没有帮助。我可以肯定的是：

我已经成功测试了一个查询，所以我知道 Apollo 和 Hasura 正在通信。
授权标头通过附加来自 Auth0 的令牌的拦截器将请求附加到 graphql 端点；网络请求选项卡显示 200，除了空数组外，一切正常。
当我在 Hasura 后端的 Graphiql 工具上使用时，查询返回预期结果。
在后端的表上设置了权限，以便它可以访问。
没有控制台错误或其他反馈可用。

我希望从此查询中获取字符串值，并且我记录了响应数据的结果，我得到的只是一个带有表名的空数组 labeleld。组件代码：

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

const getGoal = gql`
  query GetGoal($survey_id: String!) {
    goals(where: { survey_id: { _eq: $survey_id } }) {
      survey_id
      goal
    }
  }
`;

@Component({
  selector: 'app-goals',
  templateUrl: './goals.component.html',
  styleUrls: ['./goals.component.css']
})
export class GoalsComponent implements OnInit {
  loading: boolean;
  goal: any;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.apollo
      .watchQuery<any>({
        query: getGoal,
        variables: {
          survey_id: 'test_survey'
        }
      })
      .valueChanges.subscribe(({ data, loading }) => {
        this.loading = loading;
        this.goal = data.goals.goal;
      });
  }
}

【问题讨论】：

您可以在浏览器开发工具的网络选项卡中验证来自服务器的实际响应。如果服务器返回一个空数组，那么严格来说这不是您的组件代码的问题。很可能您只是没有在请求中发送正确的身份验证标头，这需要成为 ApolloClient 配置的一部分。
auth 标头是从 auth0 获取的，并通过拦截器与任何请求一起发送到 graphql 端点：我想知道这是否是一个问题，但我在第一次设置 apollo 时学到了很难的方法这是必要的，因为当我在没有到位的情况下进行查询时它会引发控制台错误。
那么当您查看开发工具时，您是否看到服务器以空数组响应？
您仍然需要找到请求的差异 - 详细比较网络请求（与 graphiql）或 [更好] 与邮递员

标签： angular graphql apollo hasura apollo-angular

【解决方案1】：

这里的问题是权限配置不正确，所以如果您遇到类似问题，请检查您的权限，确保嵌套表正确连接等：我没有过多处理嵌套权限，所以我不知道如果有更有效的方法来解决这个问题，但是在我正在查询的表中添加一个user_id 字段，并添加标准的“user_id _eq x-hasura-user-id”约束解决了这个问题。

【讨论】：