我试图在我的react应用程序中使用本地解析器来从我的组件中提取缓存和逻辑,但是我没有看到我的解析器写入和更新缓存时所期望的反应性。例如,我在本地解析器中发生了一个变异,该变异会更改图形的日期范围:
Mutation: {
addWeekOffsetToChallengeGraph: (
_root,{ weekOffset },{ cache,client }
) => {
const { userId } = cache.readQuery({
query: GET_USER_ID,});
const { createdAt } = cache.readFragment({
id: userId,fragment: GET_USER_START_DATE,});
let data = cache.readFragment({
id: 'LocalChallengeGraph',fragment: GET_CHALLENGE_GRAPH_FROM_DATE,});
const { fromDate } = data;
if (
(moment(fromDate)
.add(weekOffset,'week')
.isSameOrAfter(moment()) &&
weekOffset > 0) ||
(moment(fromDate).isSameOrBefore(createdAt) && weekOffset < 0)
) {
return data;
}
data['fromDate'] = moment(fromDate)
.add(weekOffset,'week')
.startOf('week')
.format('YYYY-MM-DD')
.toString();
cache.writeFragment({
id: 'LocalChallengeGraph',data: data,});
return data;
},},
这可以完美地工作,实际上我可以看到缓存中的更新和组件的重新呈现,但是其他使用@client(always: true)
指令的本地解析器却没有运行。这些字段具有解析器,这些解析器从缓存中查询日期范围(现已更新)以计算其值。看一下查询:
const GET_CHALLENGE_GRAPH = gql`
query challengeGraph {
challengeGraph @client(always: true) {
fromDate @client(always: true)
weekDailyChallengeCompletion @client(always: true) {
activeWeek @client(always: true)
totalWeekChallengesCompleted @client(always: true)
}
peakChallengeUserStat @client(always: true) {
date
completed_challenges
}
totalChallengesCompleted @client(always: true)
}
}
`;
const { data } = useQuery(GET_CHALLENGE_GRAPH);
据我所知,尽管always:true
处于打开状态,但阿波罗客户端只是重新渲染组件并从缓存中获取值,而不是调用解析器。我已经尝试过各种方法,例如在突变中使用refetch:
addWeekOffset({ variables: { weekOffset: -1 } refetchQueries: ['challengeGraph]});
,以及将fetch-policy
更改为no-cache
,甚至达到在我突变之前从缓存中手动删除片段的程度。没有什么原因导致这些解析器在我的react功能组件中的初始渲染之外被调用。
谢谢您的帮助!