组件
已弃用的 React Apollo 渲染道具组件 API
注意:官方对 React Apollo 渲染道具组件的支持已于 2020 年 3 月结束。此库仍然包含在@apollo/client包中,但它不再接收功能更新或错误修复。
安装
渲染道具库包含在核心@apollo/client包中:
npm install @apollo/client
然后从@apollo/client/react/components导入库的符号。
查询
属性
Query 组件接受以下属性。query是必填项。
ApolloClient<any>这是执行 query所使用的 查询的 ApolloClient 实例。
默认情况下,使用通过上下文传递的实例,但您可以在此处提供不同的实例。
拦截错误策略(ErrorPolicy)(data: TData) => void当查询在没有错误的情况下成功完成(或者如果errorPolicy是ignore且返回部分数据时)时,将调用的回调函数。
此函数传入查询的result data。
(error: ApolloError) => void当查询遇到一个或多个错误时(除非errorPolicy是ignore)时,将调用的回调函数。
此函数传入一个ApolloError对象,该对象包含一个networkError对象或一个graphQLErrors数组,具体取决于发生的错误。
boolean如果为 true,则不执行查询。
默认值是false。
TVariables包含查询执行所需的所有GraphQL变量的对象。
该对象的每个键都对应于一个变量名称,而该键的值对应于变量值。
DefaultContext如果您正在使用Apollo Link,则此对象是传递到链接链中的context对象的初始值。
如果为true,则在进度中的查询关联的组件在网络状态改变或发生网络错误时重新渲染。
默认值是false。
number指定查询检索更新结果的时间间隔(以毫秒为单位)。
默认值为 0(无轮询)。
() => boolean每当轮询过程中出现重新抓取尝试时,将调用该回调函数。如果函数返回 true,则跳过重新抓取,直到下一次轮询间隔才重试。
boolean将 false 传递给在 服务器端渲染 时跳过执行 查询。
WatchQueryFetchPolicyWatchQueryFetchPolicy默认为 options.fetchPolicy 的初始值,但可以显式配置以指定当变量更改时 WatchQuery FetchPolicy 应重置为的值(除非 nextFetchPolicy 介入)。
WatchQueryFetchPolicy | ((this: WatchQueryOptions<TVariables, TData>, currentFetchPolicy: WatchQueryFetchPolicy, context: NextFetchPolicyContext<TData, TVariables>) => WatchQueryFetchPolicy)指定在此 查询 完成后使用的 FetchPolicy。
RefetchWritePolicy指定在执行 NetworkStatus.refetch 操作 时,是合并传入的字段数据与现有数据,还是覆盖现有数据。覆盖通常是首选的做法,但为了向后兼容 Apollo Client 3.x,目前默认行为是合并。
boolean如果 true,当缓存不包含所有查询的 字段 的结果时,该 查询 可以从缓存返回部分结果。
默认值是false。
boolean⚠️ 已弃用
使用 canonizeResults 可导致内存泄漏,所以我们通常不推荐再使用此选项。Apollo Client 的未来版本将包含一个类似的功能,不会有内存泄漏的风险。
在返回之前是否对缓存结果进行规范化。规范化需要一些额外的时间,但可以加快未来的深层等价比较。默认为 false。
boolean⚠️ 已弃用
在 Apollo Client 3 中,由于应用抓取策略的一致性更高,设置此选项是不必要的。它可能在未来的版本中删除。
如果 true,则当查询结果检测为部分结果时,将触发查询重新抓取。
默认值是false。
渲染属性函数
将传递给 Query 的 children 属性的渲染属性函数将使用一个包含以下属性的对象进行调用(QueryResult)。此对象包含您的查询结果,以及一些用于重新抓取、动态轮询和分页的有用函数。
TData | undefined一个对象,包含查询完成后 GraphQL 查询的结果。
如果查询导致一个或多个错误(取决于查询的 errorPolicy),则此值可能为 undefined。
ApolloError如果查询产生一个或多个错误,则此对象包含一个 graphQLErrors 数组或单个 networkError。否则,此值 undefined。
有关更多信息,请参阅 处理操作错误。
TData一个对象,包含此查询最近执行的结果。
如果是此查询的第一次执行,则该值是 undefined。
TVariables | undefined一个对象,包含为查询提供的变量。
boolean如果 true,则关联的懒加载查询已执行。
此字段仅在 useLazyQuery 返回的结果对象上存在。
ApolloClient<any>执行查询的 Apollo Client 实例。它可以用于手动执行后续查询或将数据写入缓存。
boolean如果 true,则查询仍在进行中,尚未返回结果。
网络状态表示查询关联请求的当前网络状态's的一个数字。查看可能的值。
与notifyOnNetworkStatusChange 选项一同使用。
<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(fetchMoreOptions: FetchMoreQueryOptions<TFetchVars, TFetchData> & { updateQuery?: (previousQueryResult: TData, options: { fetchMoreResult: TFetchData; variables: TFetchVars; }) => TData; }) => Promise<ApolloQueryResult<TFetchData>>一个辅助函数,用于获取分页列表字段的下一组结果。。
(variables?: Partial<TVariables>) => Promise<ApolloQueryResult<TData>>一个函数,允许您重新执行查询,可以选择性地传入新的 variables。
为了保证重新查询执行网络请求,其 fetchPolicy设置为 network-only(除非原始查询的 fetchPolicy是 no-cache或 cache-and-network,这也保证了一个网络请求)。
另请参阅重新查询。
(pollInterval: number) => void一个函数,指示查询在指定的间隔(以毫秒为单位)内开始重新执行。
() => void一个函数,指示查询在之前的 startPolling调用后停止轮询。
<TSubscriptionData = TData, TSubscriptionVariables extends OperationVariables = TVariables>(options: SubscribeToMoreOptions<TData, TSubscriptionVariables, TSubscriptionData>) => () => void一个函数,允许您执行一个订阅,通常是订阅查询中包含的特定字段。
此函数返回另一个函数,您可以通过调用此函数来终止订阅。
<TVars extends OperationVariables = TVariables>(mapFn: (previousQueryResult: TData, options: Pick<WatchQueryOptions<TVars, TData>, "variables">) => TData) => void一个函数,使您可以在不执行后续 GraphQL 操作的情况下更新查询的缓存结果。
有关更多信息,请参阅使用 updateQuery 和 updateFragment。
ObservableQuery<TData, TVariables>hook 使用的内部 ObservableQuery 的引用。
ReadonlyArray<GraphQLFormattedError>⚠️ 已弃用
此属性将在 Apollo Client 的未来版本中删除。请使用 error.graphQLErrors 代替。
变异
变异组件接受以下属性。其中 mutation 是必须的。
boolean如果设置为 true,确保在考虑 mutation 完成之前,所有包含在 mutation 中的查询都已完成。
默认值是 false(查询异步重取)。
拦截错误策略(ErrorPolicy)boolean如果设置为 true,则变异的 data 属性不会更新为变异的结果。
默认值是false。
DocumentNode | TypedDocumentNode<TData, TVariables>一个 GraphQL 文档,通常使用来自 graphql-tag 包的 gql 创建,其中包含单个变异。
(data: TData, clientOptions?: BaseMutationOptions) => void成功完成且无错误调用(或当errorPolicy是ignore并且返回部分数据时)。
此函数传递mutation的data和传递给mutation的任何选项。
(error: ApolloError, clientOptions?: BaseMutationOptions) => void当mutation遇到一个或多个错误时调用(除非errorPolicy是ignore)。
此函数传递一个ApolloError对象,其中包含一个networkError对象或一个graphQLErrors数组,具体取决于发生的错误,以及传递给mutation的任何选项。
OnQueryUpdated<any>当mutation更新了缓存数据,或者指定的查询在client.mutate中传递的refetchQueries: [...]列表中的查询时,进行拦截的选项回调。
从onQueryUpdated返回一个Promise会导致最终的Promise等待返回的Promise。返回false会导致查询被忽略。
((result: FetchResult<TData>) => InternalRefetchQueriesInclude) | InternalRefetchQueriesInclude执行mutation后要重新检索的查询数组(或返回一个数组的函数)。
数组中的每个值可以是
包含要执行
query及任何variables的对象指示要重新检索的查询的操作名称
TVariables包含mutation执行所需的所有GraphQL变量
对象中的每个键都对应一个变量名称,该键的值对应变量值。
ApolloClient<object>用于执行mutation的ApolloClient实例。
默认情况下,使用通过上下文传递的实例,但您可以在此处提供不同的实例。
TContext如果您正在使用Apollo Link,则此对象是传递到链接链中的context对象的初始值。
如果为true,则每次网络状态改变或发生网络错误时,进行中的mutation关联组件都会重新渲染。
默认值是false。
MutationFetchPolicy当mutation的结果不应写入Apollo Client缓存时提供no-cache。
默认值是 network-only (表示结果 将被写入缓存)。
与查询不同, 变体 不支持 获取策略fetch policies 除了 network-only 和 no-cache。
TData | ((vars: TVariables, { IGNORE }: { IGNORE: IgnoreModifier; }) => TData | IgnoreModifier)通过提供对象或回调函数,当 mutation 执行后调用此函数,允许您返回乐观数据和可选跳过通过 IGNORE 信使对象进行的更新, Apollo Client 将缓存这个(可能是错误的)临时响应,直到 mutation 完成,从而实现更响应式的UI更新。
有关更多信息,请参阅 乐观变体结果。
MutationUpdaterFunctionApollo Client 在 mutation 完成后使用的函数以更新 Apollo Client 缓存。
有关更多信息,请参阅 mutation后的缓存更新。
boolean为了避免从 mutation根 field的参数中保留敏感信息, Apollo Client v3.4+ 会自动在每次 mutation完成后从缓存中清除任何 ROOT_MUTATION 字段。
然而,ROOT_MUTATION的 result 数据也传递到了 mutation 的 update函数中,因此我们建议尽可能通过这种方式获取结果,而不是使用此选项。updateQueries(可选)
渲染属性函数
传递给Mutation组件的children属性的渲染属性函数使用mutate函数和一个包含mutation结果的对象进行调用。使用mutate函数可以在UI中触发mutation。该对象包含您的mutation结果,以及loading和error状态。
boolean如果为true,则mutation的mutate函数已被调用。
ApolloClient<object>执行mutation的Apollo Client实例。
可用于手动执行后续操作或将数据写入缓存。
TData | null从mutation返回的数据。如果ignoreResults为true,则可能是undefined。
ApolloError如果mutation产生了一个或多个错误,则此对象包含一个graphQLErrors的数组或一个单个networkError。否则,该值是undefined。
有关更多信息,请参阅 处理操作错误。
boolean如果为true,则mutation当前正在进行中。
() => void一个函数,您可以调用它以将mutation的结果重置为其初始、未调用状态。
Subscription
属性
Subscription组件接受以下属性。其中subscription是必选的。
null | ((result: SubscriptionResult<TData>) => ReactTypes.JSX.Element | null)ApolloClient<object>ApolloClient实例。默认情况下useSubscription/Subscription使用从上下文传入的客户端,但可以传入不同的客户端。
DefaultContext组件与您的网络接口(Apollo Link)之间的共享上下文。
拦截错误策略(ErrorPolicy)指定此操作要使用的ErrorPolicy。
Record<string, any>组件与您的网络接口(Apollo Link)之间的共享上下文。
FetchPolicy您希望组件如何与Apollo缓存交互。有关详情,请参阅设置获取策略。
boolean如果为true,则hook不会使组件重新渲染。这在您想要使用onData和onError回调中的逻辑自己控制组件的渲染时非常有用。
将此设置为 true 当钩子已经存在 data 时,将会将 data 重置为 undefined。
() => void允许注册一个回调函数,每次当 useSubscription 钩子 / Subscription 组件完成订阅时,该函数会被触发。
(options: OnDataOptions<TData>) => any允许注册一个回调函数,每次当 useSubscription 钩子 / Subscription 组件接收数据时,该函数会被触发。回调函数的 options 对象参数包含当前的 Apollo Client 实例在 client 中,以及接收到的订阅数据在 data。
(error: ApolloError) => void允许注册一个回调函数,每次当 useSubscription 钩子 / Subscription 组件接收到错误时,该函数会被触发。
boolean | ((options: BaseSubscriptionOptions<TData, TVariables>) => boolean)确定当钩子的输入(例如 subscription 或 variables)更改时,你的订阅是否应该取消订阅并重新订阅。
boolean确定是否应该跳过当前订阅。如果有用,例如,当变量依赖于之前的查询并且尚未准备好时。
DocumentNode | TypedDocumentNode<TData, TVariables>一个 GraphQL 文档,通常使用 gql 从 graphql-tag 包创建,其中包含一个订阅。
TVariables包含所有订阅需要执行的所有变量的对象
() => void⚠️ 已弃用
使用 onComplete 代替
允许注册一个回调函数,当 useSubscription 钩子 / Subscription 组件完成订阅时,该函数会被触发。
(options: OnSubscriptionDataOptions<TData>) => any⚠️ 已弃用
使用 onData 代替
允许注册一个回调函数,每次当 useSubscription 钩子 / Subscription 组件接收数据时,该函数会被触发。回调函数的 options 对象参数包含当前的 Apollo Client 实例在 client 中,以及接收到的订阅数据在 subscriptionData。