如何正确输入 Apollo Client defaultOptions？

Posted 2023-03-10

【中文标题】如何正确输入 Apollo Client defaultOptions？

【英文标题】：How do I correctly type the Apollo Client defaultOptions?

【发布时间】：2019-12-19 16:44:12

【问题描述】：

我正在像这样设置 Apollo Client。

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 给出了这个错误：

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 应该是这样做的。

如何使用正确的类型构造defaultOptions？

【问题讨论】：

试试 defaultOptions: defaultOptions

@PranayRana 没有区别。 ????

嗨，您为 fetchPolicy 传递了错误的值，请检查我的答案

【参考方案1】：

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

//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' 是无效值。

在此处查看文档： https://github.com/apollographql/apollo-client/blob/main/src/core/watchQueryOptions.ts

【讨论】：

就是这样。我什至没有意识到他们现在有不同的查询类型。谢谢！ ? 我想我需要更频繁地阅读文档。对于任何关注查询类型的人，都记录在here。

【参考方案2】：

2021：

如果您尝试使用cache-and-network 作为query.fetchPolicy 的默认值：

query 不允许 有意 使用 cache-and-network 的原因早在 2019 年就在此处进行了解释： https://github.com/apollographql/apollo-client/issues/3130#issuecomment-478409066 基本上，query() 的行为/逻辑不支持这种策略。所以，他们在打字级别阻止它。

---

反应 useQuery() 钩子

如果你使用 react，useQuery() 钩子会跟随 watchQuery 而不是 query 的行为。所以配置watchQuery就够了：

import 
  ApolloClient,
  InMemoryCache,
  HttpLink,
  DefaultOptions
 from "@apollo/client";

const defaultOptions: DefaultOptions = 
  watchQuery: 
    fetchPolicy: "cache-and-network",
    errorPolicy: "ignore",
    notifyOnNetworkStatusChange: true
  
;
export const platformClient = new ApolloClient(
  link: new HttpLink(
    uri: "https://xxxxx",
    credentials: "same-origin"
  ),
  cache: new InMemoryCache(),
  defaultOptions
);