首页 > 解决方案 > 扩展 ApolloQueryResult 以定义数据键值

问题描述

我有以下查询:

const client = new ApolloClient({
  uri: `${process.env.NEXT_PUBLIC_SITE_URL}/graphql`,
  cache: new InMemoryCache(),
});

const data = await client.query({
  query: GET_PAGE,
  variables: {
    slug: '/',
  },
});

客户端类型已经由 Apollo 的 ApolloQueryResult 提供:

type ApolloQueryResult<T> = {
    data: T;
    errors?: ReadonlyArray<GraphQLError>;
    error?: ApolloError;
    loading: boolean;
    networkStatus: NetworkStatus;
    partial?: boolean;
}

我的目标是定义data类型以便在进一步处理数据时获得更好的注释。我想我必须通过联合类型来实现这一点,但我坚持const data: ApolloQueryResult<QueryResult> = await client.query({...});将 QueryResult 定义为:

export type QueryResult = {
  data: {
    page: {
      content: string;
      ...
    };
  };
};

不幸的是,这似乎并没有起到作用,因为我没有得到任何过去 data.data 的类型建议。我缺少什么才能获得适当的类型?我可以进一步阅读哪些概念来巩固我对这个概念的理解?

标签: javascripttypescript

解决方案


推荐阅读