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