试图以角度从 graphql 获取数据，watchQuery 给出错误答案

【问题标题】：Trying to get data from graphql in angular, watchQuery is giving error试图以角度从 graphql 获取数据，watchQuery 给出错误
【发布时间】：2021-07-17 05:46:45
【问题描述】：

我的代码如下

hotels: Observable<Hotel[]>;
  a = {
    Query: gql`
      query getHotels {
        getHotels {
          id
          hotel_name
          street
          city
          postalcode
          price
          email
        }
      }
    `,
  };

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.hotels = this.apollo
      .watchQuery<Query>(this.a)

我得到的错误是

Type '{ 查询：DocumentNode; }' 与类型 'WatchQueryOptions'.ts(2559) 没有共同的属性

可能的原因和可能的解决方案是什么？任何线索将不胜感激。

我的 types.ts 是

import { type } from "os";

export type Hotel = {
  id: string;
  hotel_name: string;
  street: string;
  city: string;
  postalcode: string;
  price: string;
  email: string;
};

export type Query = {
  allHotels: Hotel[];
};

【问题讨论】：

标签： angular graphql

【解决方案1】：

错误表明您的变量a 的结构是 { Query: DocumentNode; } 但它必须是这样的：{ query: DocumentNode; }。没有大写 Query 而是小写。只是类型错误，你提供给.watchQuery的对象定义如下：

export interface QueryBaseOptions<TVariables = OperationVariables> {
  /**
   * A GraphQL document that consists of a single query to be sent down to the
   * server.
   */
  // TODO REFACTOR: rename this to document. Didn't do it yet because it's in a
  // lot of tests.
  query: DocumentNode;

  /**
   * A map going from variable name to variable value, where the variables are used
   * within the GraphQL query.
   */
  variables?: TVariables;

  /**
   * Specifies the {@link ErrorPolicy} to be used for this query
   */
  errorPolicy?: ErrorPolicy;

  /**
   * Context to be passed to link execution chain
   */
  context?: any;
}


export interface WatchQueryOptions<TVariables = OperationVariables>
  extends QueryBaseOptions<TVariables>,
    ModifiableWatchQueryOptions<TVariables> {
  /**
   * Specifies the {@link FetchPolicy} to be used for this query.
   */
  fetchPolicy?: WatchQueryFetchPolicy;
  /**
   * Specifies the {@link FetchPolicy} to be used after this query has completed.
   */
  nextFetchPolicy?: WatchQueryFetchPolicy;
}

【讨论】：