Why is apollo-angular Query returning empty array?

Question

I recently installed and setup apollo-angular, and am having trouble getting data from a query. I've referred to other questions that dealt with similar issues, but they weren't helpful. What I'm certain of is:

I've successfully tested a query, so I know that the Apollo & Hasura are communicating.
Authorization headers are attached the the requests to the graphql endpoint via an interceptor that attaches a token from Auth0; the network request tab shows a 200, everything looks normal except the empty array.
The query returns the expected results when I use it on the Graphiql tool on the Hasura back-end.
Permissions are set on the table in the back-end so that it's accessible.
No console errors or other feedback are available.

I expect to get string values from this query, and wne I log the results of the response data, all I get is an empty array labeleld with the table name. The component code:

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;
      });
  }
}

You can verify the actual response from the server in the network tab of your browser's dev tools. If the server is returning an empty array, then it's not strictly an issue with your component code. Most likely you're just not sending the correct authentication headers with your request, which would need to be part of your ApolloClient configuration. — Daniel Rearden
auth header is being acqured from auth0 and sent along with any request to the graphql endpoint via an interceptor: I wondered if this was an issue, but I learned the hard way when first setting up apollo that this was necessary since it was throwing a console error when I made queries without that in place. — Michael C
So when you look in dev tools, do you see the server responding with an empty array? — Daniel Rearden
you still have to find the requests difference - compare network requests (vs graphiql) detaily or [better] with postman — xadm

Michael C Michael C · Accepted Answer · 2020-07-27T20:07:25

The issue here was permissions being incorrectly configured, so if you get a similar issue, check your permissions, make sure nested tables are properly joined, etc: I haven't dealt with nested permissions much, so I don't know if there's a more efficient way to solve this, but adding a user_id field to the tables I was querying, and adding the standard "user_id _eq x-hasura-user-id" constraint fixed the problem.

Why is apollo-angular Query returning empty array?

1 Answers