如何正确输入 Apollo Client defaultOptions? [英] How do I correctly type the Apollo Client defaultOptions?

问题描述

我正在像这样设置 Apollo 客户端.

I'm setting up Apollo Client like this.

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all',
  },
};
return new ApolloClient({
  link: ApolloLink.from([authLink, errorLink, webSocketOrHttpLink]),
  defaultOptions, // Typescript don't like this.
  queryDeduplication: true,
});

打字稿给出了这个错误:

Typescript gives this error:

Type '{ watchQuery: { fetchPolicy: string; errorPolicy: string; }; query: { fetchPolicy: string; errorPolicy: string; }; mutate: { errorPolicy: string; }; }' is not assignable to type 'DefaultOptions'.ts(2322)
ApolloClient.d.ts(23, 5): The expected type comes from property 'defaultOptions' which is declared here on type 'ApolloClientOptions<NormalizedCacheObject>'

根据文档，this 是应该如何完成的.

Per the docs, this is how it's supposed to be done.

如何使用适当的类型构造 defaultOptions?

How can I structure defaultOptions with proper types?

推荐答案

如果你检查库的代码，似乎这里是问题

if you check code of library then , it seems here is issue

//defination of default options
export interface DefaultOptions {
 watchQuery?: Partial<WatchQueryOptions>;
 query?: Partial<QueryOptions>;
 mutate?: Partial<MutationOptions>;  
}

//defination of QueryOptions
export interface QueryOptions<TVariables = OperationVariables>
  extends QueryBaseOptions<TVariables> {
  /**
   * Specifies the {@link FetchPolicy} to be used for this query
   */
  fetchPolicy?: FetchPolicy;
}

//valid value for FetchPolicy type 
export type FetchPolicy =
  | 'cache-first'
  | 'network-only'
  | 'cache-only'
  | 'no-cache'
  | 'standby';

export type WatchQueryFetchPolicy = FetchPolicy | 'cache-and-network';

因此对于查询选项，您应该为 FetchPolicy 传递任何有效值，而 'cache-and-network' 不是有效值.

so here for query options you should pass any valid value for FetchPolicy and 'cache-and-network' is not valid value.

在此处检查文档:https://github.com/apollographql/apollo-客户端/blob/main/src/core/watchQueryOptions.ts

这篇关于如何正确输入 Apollo Client defaultOptions?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！