10月8日至10日,与我们在纽约市一起学习关于GraphQL联邦和API平台工程的最新的技巧、趋势和新闻。加入我们参加2024年纽约市的GraphQL峰会
文档
免费开始

组件

已弃用的 React Apollo 渲染道具组件 API


注意:官方对 React Apollo 渲染道具组件的支持已于 2020 年 3 月结束。此库仍然包含在@apollo/client包中,但它不再接收功能更新或错误修复。

安装

渲染道具库包含在核心@apollo/client包中:

npm install @apollo/client

然后从@apollo/client/react/components导入库的符号。

查询

属性

Query 组件接受以下属性。query是必填项。

操作选项

client(可选)

ApolloClient<any>

这是执行 query所使用的 ApolloClient 实例。

默认情况下,使用通过上下文传递的实例,但您可以在此处提供不同的实例。

拦截错误策略(ErrorPolicy)

指定查询如何处理同时返回错误和不完整结果的情况。

有关详细信息,请参阅GraphQL 错误策略

默认值是none,这意味着查询结果包含错误详细信息,但不包含部分结果。

(data: TData) => void

当查询在没有错误的情况下成功完成(或者如果errorPolicyignore且返回部分数据时)时,将调用的回调函数。

此函数传入查询的result data

(error: ApolloError) => void

当查询遇到一个或多个错误时(除非errorPolicyignore)时,将调用的回调函数。

此函数传入一个ApolloError对象,该对象包含一个networkError对象或一个graphQLErrors数组,具体取决于发生的错误。

如果为 true,则不执行查询。

默认值是false

包含查询执行所需的所有GraphQL变量的对象。

该对象的每个键都对应于一个名称,而该键的值对应于变量值。

网络选项
DefaultContext

如果您正在使用Apollo Link,则此对象是传递到链接链中的context对象的初始值。

如果为true,则在进度中的查询关联的组件在网络状态改变或发生网络错误时重新渲染。

默认值是false

指定查询检索更新结果的时间间隔(以毫秒为单位)。

默认值为 0(无轮询)。

每当轮询过程中出现重新抓取尝试时,将调用该回调函数。如果函数返回 true,则跳过重新抓取,直到下一次轮询间隔才重试。

false 传递给在 服务器端渲染 时跳过执行 查询

缓存选项
WatchQueryFetchPolicy

指定在执行期间 查询 如何与 Apollo Client 缓存交互(例如,在向服务器发送请求之前是否检查缓存的结果)。

有关详细信息,请参阅 设置获取策略

默认值为 cache-first

WatchQueryFetchPolicy

默认为 options.fetchPolicy 的初始值,但可以显式配置以指定当变量更改时 Watch FetchPolicy 应重置为的值(除非 nextFetchPolicy 介入)。

WatchQueryFetchPolicy | ((this: WatchQueryOptions<TVariables, TData>, currentFetchPolicy: WatchQueryFetchPolicy, context: NextFetchPolicyContext<TData, TVariables>) => WatchQueryFetchPolicy)

指定在此 查询 完成后使用的 FetchPolicy

指定在执行 NetworkStatus.refetch 时,是合并传入的字段数据与现有数据,还是覆盖现有数据。覆盖通常是首选的做法,但为了向后兼容 Apollo Client 3.x,目前默认行为是合并。

如果 true,当缓存不包含所有查询的 的结果时,该 查询 可以从缓存返回部分结果。

默认值是false

其他

⚠️ 已弃用

使用 canonizeResults 可导致内存泄漏,所以我们通常不推荐再使用此选项。Apollo Client 的未来版本将包含一个类似的功能,不会有内存泄漏的风险。

在返回之前是否对缓存结果进行规范化。规范化需要一些额外的时间,但可以加快未来的深层等价比较。默认为 false。

⚠️ 已弃用

在 Apollo Client 3 中,由于应用抓取策略的一致性更高,设置此选项是不必要的。它可能在未来的版本中删除。

如果 true,则当查询结果检测为部分结果时,将触发查询重新抓取。

默认值是false

渲染属性函数

将传递给 Querychildren 属性的渲染属性函数将使用一个包含以下属性的对象进行调用(QueryResult)。此对象包含您的查询结果,以及一些用于重新抓取、动态轮询和分页的有用函数。

操作数据
TData | undefined

一个对象,包含查询完成后 GraphQL 查询的结果。

如果查询导致一个或多个错误(取决于查询的 errorPolicy),则此值可能为 undefined

如果查询产生一个或多个错误,则此对象包含一个 graphQLErrors 数组或单个 networkError。否则,此值 undefined

有关更多信息,请参阅 处理操作错误

一个对象,包含此查询最近执行的结果。

如果是此查询的第一次执行,则该值是 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 代替。

变异

变异组件接受以下属性。其中 是必须的。

操作选项

如果设置为 ,确保在考虑 完成之前,所有包含在 中的查询都已完成。

默认值是 (查询异步重取)。

拦截错误策略(ErrorPolicy)

指定变异如何处理返回 GraphQL 错误和部分结果的响应。

有关详细信息,请参阅GraphQL 错误策略

默认值为 none,这意味着变异结果包含错误详细信息,但 包含部分结果。

如果设置为 true,则变异的 data 属性不会更新为变异的结果。

默认值是false

DocumentNode | TypedDocumentNode<TData, TVariables>

一个 GraphQL 文档,通常使用来自 包的 gql 创建,其中包含单个变异。

(data: TData, clientOptions?: BaseMutationOptions) => void

成功完成且无错误调用(或当errorPolicyignore并且返回部分数据时)。

此函数传递mutationdata和传递给mutation的任何选项。

(error: ApolloError, clientOptions?: BaseMutationOptions) => void

当mutation遇到一个或多个错误时调用(除非errorPolicyignore)。

此函数传递一个ApolloError对象,其中包含一个networkError对象或一个graphQLErrors数组,具体取决于发生的错误,以及传递给mutation的任何选项。

OnQueryUpdated<any>

当mutation更新了缓存数据,或者指定的查询在client.mutate中传递的refetchQueries: [...]列表中的查询时,进行拦截的选项回调。

onQueryUpdated返回一个Promise会导致最终的Promise等待返回的Promise。返回false会导致查询被忽略。

((result: FetchResult<TData>) => InternalRefetchQueriesInclude) | InternalRefetchQueriesInclude

执行mutation后要重新检索的查询数组(或返回一个数组的函数)。

数组中的每个值可以是

  • 包含要执行query及任何variables的对象

  • 指示要重新检索的查询的操作名称

包含mutation执行所需的所有GraphQL变量

对象中的每个键都对应一个变量名称,该键的值对应变量值。

网络选项
ApolloClient<object>

用于执行mutation的ApolloClient实例。

默认情况下,使用通过上下文传递的实例,但您可以在此处提供不同的实例。

如果您正在使用Apollo Link,则此对象是传递到链接链中的context对象的初始值。

如果为true,则每次网络状态改变或发生网络错误时,进行中的mutation关联组件都会重新渲染。

默认值是false

缓存选项
MutationFetchPolicy

当mutation的结果不应写入Apollo Client缓存时提供no-cache

默认值是 network-only (表示结果 将被写入缓存)。

与查询不同, 不支持 获取策略fetch policies 除了 network-onlyno-cache

TData | ((vars: TVariables, { IGNORE }: { IGNORE: IgnoreModifier; }) => TData | IgnoreModifier)

通过提供对象或回调函数,当 mutation 执行后调用此函数,允许您返回乐观数据和可选跳过通过 IGNORE 信使对象进行的更新, Apollo Client 将缓存这个(可能是错误的)临时响应,直到 mutation 完成,从而实现更响应式的UI更新。

有关更多信息,请参阅 乐观变体结果

MutationUpdaterFunction

Apollo Clientmutation 完成后使用的函数以更新 Apollo Client 缓存。

有关更多信息,请参阅 mutation后的缓存更新

其他

为了避免从 mutationfield的参数中保留敏感信息, Apollo Client v3.4+ 会自动在每次 mutation完成后从缓存中清除任何 ROOT_MUTATION 字段。

然而,ROOT_MUTATION的 result 数据也传递到了 mutationupdate函数中,因此我们建议尽可能通过这种方式获取结果,而不是使用此选项。

updateQueries(可选)

渲染属性函数

传递给Mutation组件的children属性的渲染属性函数使用mutate函数和一个包含mutation结果的对象进行调用。使用mutate函数可以在UI中触发mutation。该对象包含您的mutation结果,以及loadingerror状态。

其他
boolean

如果为true,则mutationmutate函数已被调用。

ApolloClient<object>

执行mutationApollo Client实例。

可用于手动执行后续或将数据写入缓存。

TData | null

mutation返回的数据。如果ignoreResultstrue,则可能是undefined

如果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

组件与您的网络接口()之间的共享上下文。

拦截错误策略(ErrorPolicy)

指定此操作要使用的ErrorPolicy

Record<string, any>

组件与您的网络接口()之间的共享上下文。

您希望组件如何与Apollo缓存交互。有关详情,请参阅设置获取策略

如果为true,则hook不会使组件重新渲染。这在您想要使用onDataonError回调中的逻辑自己控制组件的渲染时非常有用。

将此设置为 true 当钩子已经存在 data 时,将会将 data 重置为 undefined

onComplete (可选)

因为3.7.0

() => 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)

确定当钩子的输入(例如 subscriptionvariables)更改时,你的订阅是否应该取消订阅并重新订阅。

确定是否应该跳过当前订阅。如果有用,例如,当变量依赖于之前的查询并且尚未准备好时。

DocumentNode | TypedDocumentNode<TData, TVariables>

一个 GraphQL 文档,通常使用 gqlgraphql-tag 包创建,其中包含一个订阅。

包含所有订阅需要执行的所有变量的对象

⚠️ 已弃用

使用 onComplete 代替

允许注册一个回调函数,当 useSubscription 钩子 / Subscription 组件完成订阅时,该函数会被触发。

(options: OnSubscriptionDataOptions<TData>) => any

⚠️ 已弃用

使用 onData 代替

允许注册一个回调函数,每次当 useSubscription 钩子 / Subscription 组件接收数据时,该函数会被触发。回调函数的 options 对象参数包含当前的 Apollo Client 实例在 client 中,以及接收到的订阅数据在 subscriptionData

渲染属性函数

其他

包含你的 GraphQL 订阅结果的对象。默认为一个空对象。

包含 graphQLErrorsnetworkError 属性的运行时错误

boolean

A boolean that indicates whether any initial data has been returned

Previous
SSR
Next
HOC(已弃用)
评分文章评分在GitHub上编辑编辑论坛Discord

©2024Apollo Graph Inc.(商业名:Apollo GraphQL)。

隐私政策

公司