数据陈旧性
假设我们的数据存在于存储中,我们仍然需要考虑这些数据的陈旧性。
默认情况下,Relay 不会认为存储中的数据是陈旧的(无论它在缓存中存在了多长时间),除非它使用我们的数据失效 API 明确标记为陈旧,或者它比查询缓存过期时间更旧。
将数据标记为陈旧对于我们明确知道某些数据不再新鲜的情况很有用(例如,在执行Mutation之后)。
Relay 公开了以下 API,以便在更新存储时将数据标记为陈旧
全局失效 Relay 存储
我们可以执行的最粗略类型的数据失效是失效整个存储,这意味着失效后所有当前缓存的数据都将被视为陈旧。
要失效存储,我们可以在更新程序函数中调用 invalidateStore()
function updater(store) {
store.invalidateStore();
}
- 调用
invalidateStore()
将导致在失效发生之前写入存储的所有数据都被视为陈旧,并将要求任何查询在下次评估时再次重新获取。 - 请注意,可以将更新程序函数指定为mutation、订阅或只是本地存储更新的一部分。
失效存储中的特定数据
我们也可以更细化地选择要失效的数据,并且只失效存储中的特定记录;与全局失效相比,只有引用失效记录的查询在失效后才会被视为陈旧。
要失效记录,我们可以在更新程序函数中调用 invalidateRecord()
function updater(store) {
const user = store.get('<id>');
if (user != null) {
user.invalidateRecord();
}
}
- 对
user
记录调用invalidateRecord()
将将存储中该特定的用户标记为陈旧。这意味着任何缓存并引用失效用户的查询现在将被视为陈旧,并将需要在下次评估时再次重新获取。 - 请注意,可以将更新程序函数指定为mutation、订阅或只是本地存储更新的一部分。
订阅数据失效
仅仅将存储或记录标记为陈旧会导致查询在下次评估时重新获取;例如,下次您返回到渲染陈旧查询的页面时,即使数据已缓存,查询也会重新获取,因为查询引用了陈旧数据。
这对许多用例很有用,但在某些情况下,我们希望在失效时立即重新获取某些数据,例如
- 失效当前页面已可见的数据时。由于没有发生导航,因此我们不会重新评估当前页面的查询,因此即使某些数据是陈旧的,也不会立即重新获取,并且我们将显示陈旧数据。
- 失效以前未卸载的视图中渲染的数据时;由于视图未卸载,如果我们返回,该视图的查询不会重新评估,这意味着即使某些数据是陈旧的,也不会重新获取,并且我们将显示陈旧数据。
为了支持这些用例,Relay 公开了 useSubscribeToInvalidationState
钩子
function ProfilePage(props) {
// Example of querying data for the current page for a given user
const data = usePreloadedQuery(
graphql`...`,
props.preloadedQuery,
)
// Here we subscribe to changes in invalidation state for the given user ID.
// Whenever the user with that ID is marked as stale, the provided callback will
// be executed
useSubscribeToInvalidationState([props.userID], () => {
// Here we can do things like:
// - re-evaluate the query by passing a new preloadedQuery to usePreloadedQuery.
// - imperatively refetch any data
// - render a loading spinner or gray out the page to indicate that refetch
// is happening.
})
return (...);
}
useSubscribeToInvalidationState
接受一个 id 数组和一个回调函数。每当这些 id 的任何记录被标记为陈旧时,提供的回调函数就会触发。- 在回调函数中,我们可以相应地做出反应,并重新获取和/或更新任何当前渲染陈旧数据的视图。例如,我们可以通过将
preloadedQuery
保留在状态中并在此处设置新的preloadedQuery
来重新执行顶级usePreloadedQuery
;由于该查询此时是陈旧的,因此即使数据在存储中缓存,该查询也会重新获取。
查询缓存过期时间
此外,查询缓存过期时间会影响某些操作(即查询和变量)是否可以使用存储中已存在的数据来完成,即查询的数据是否已变为陈旧。
陈旧查询是指可以使用存储中的记录来完成的查询,并且
- 自上次获取该查询以来的时间超过了查询缓存过期时间,或者
- 包含至少一条失效的记录。
此陈旧性检查发生在发出新请求时(例如,在调用 loadQuery
时)。引用陈旧数据的组件将继续能够渲染该数据;但是,任何将使用陈旧数据来完成的额外请求都将发送到网络。
为了配置查询缓存过期时间,我们可以将 queryCacheExpirationTime
选项指定给 Relay 存储
const store = new Store(source, {queryCacheExpirationTime: 5 * 60 * 1000 });
如果没有提供查询缓存过期时间,陈旧性检查只查看引用的记录是否已失效。
此页面是否有用?
通过以下操作,帮助我们使网站更加完善 回答一些简短的问题.