試圖從 angular 中的 graphql 獲取數據，watchQuery 給出錯誤

Question

我的代碼如下

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)

我得到的錯誤是

輸入'{查詢：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[];
};

Answer 1

錯誤表明變量a的結構是 { Query: DocumentNode; } 但它必須是這樣的： { query: DocumentNode; } { query: DocumentNode; } 。 沒有大寫Query但小寫。 只是類型錯誤，你提供給.watchQuery的object定義如下：

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