是否有可能重新渲染一个组件更新缓存后与React查询?

Question

在根组件中，我从缓存中收到了这些数据。

const queryClient = useQueryClient();
const data = queryClient.getQueryData('prototypes');

在另一个组件中，在触发一个函数之后，我更改了缓存上的数据(使用乐观更新)。虽然数据在缓存中被更改并显示在Devtools中，但根组件中的新数据没有显示，组件也没有刷新。

如何在改变缓存后重新渲染组件?

之前，我在Nextjs中使用这种方式以Ssr模式获取数据。

export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ req }) => {
const queryClient = new QueryClient();
await queryClient.prefetchQuery('prototypes', getPrototypes);
return {
props: { dehydratedState: dehydrate(queryClient) },
};
}
);

在子组件中，我使用useQuery钩子来获取数据。

const { data: prototypes }: { data: FilterPrototypesByDateQuery } = useQuery(
'prototypes',
getPrototypes
);

虽然数据存在于缓存中，但当这个组件被挂载时，在网络中我看到一个获取原型的新请求被触发。

在其他子组件中，当我喜欢一个原型时，我使用乐观更新来更新缓存。但是我看到一个新的原型请求又被解雇了。

const { mutate: likePrototype } = useLikePrototypeMutation({
onMutate: async (like) => {
const previousPrototype: FilterPrototypesByDateQuery =
queryClient.getQueryData('prototypes');
const newState = produce(previousPrototype, (draft) => {
const index = draft.prototype_getPrototypes.result.items.findIndex(
(item) => item.id === prototypeId
);
if (index > -1) {
draft.prototype_getPrototypes.result.items[index].isLiked = true;
}
});
queryClient.setQueryData('prototypes', newState);
return { previousPrototype };
},
onSettled: () => {
queryClient.invalidateQueries('prototypes');
},
});

Answer 1

当您希望查询不再获取新数据时，第一步是将其缓存和过期时间设置为无穷大。这使得RQ永远记住数据，但也总是从缓存返回。

const { data: prototypes } = useQuery('prototypes', getPrototypes, {
cacheTime: Infinity,
staleTime: Infinity,
});

下一步是您不应该手动使查询无效。当您使用setQueryData更改它时，它将被更新。

const { mutate: likePrototype } = useLikePrototypeMutation({
onMutate: async (like) => {
// ...
// this causes the component using that query to update
queryClient.setQueryData('prototypes', newState);
// ...
},
// no onSettled here
// just rollback in onError
});