useMemo 在从 Apollo "data"时未运行 useQuery hook 为 useMemo 所依赖的"data"返回一个新值

Question

我有一个组件，它使用useQuery Apollo Hook从GraphQL API获取数据。该组件还有一个useMemo，它将useQuery Apollo钩子返回的数据变量作为依赖项。useMemo在组件的第一次呈现时运行，这是它应该做的。然后，当来自useQuery的数据返回时，它再次运行。接下来，我对useQuery中的data变量做了一些修改。

现在，当我在另一个选项卡中重新呈现该组件时，useQuery在初始呈现时运行一次，因为它应该运行，但当useQuery的数据返回时不会再次运行。注意:我在前面的选项卡中修改了useMemo内部的数据变量，graphql api返回了一个新的数据值，所以useMemo应该能够发现它，但不知怎么的，它没有。

根据我的调查可能的原因:

1. useMemo只会在第二个选项卡中第二次运行，如果"data"变量是在函数的状态上，当useQuery返回的新数据和useQuery重新渲染组件时，它不会运行，因为它对更改不可见。

任何帮助将不胜感激。谢谢!

functional component: {
const { data, loading, error: loadRolesError } = useQuery();
const result = useMemo(()=>{
// changing data inside here
}, [data])
}

Answer 1

对于这个用例，我将使用Apollo的useReactiveVar钩子。从docs
With the useReactiveVar hook, React components can also include reactive variable values in their state directly, without wrapping them in a query.

有几个部分，所以我在下面概述了一个解决方案，给出了所有的导入声明和可能的实现，从依赖

开始

import React, { useEffect, useState,  useMemo } from 'react';
import { useReactiveVar, makeVar, useLazyQuery, InMemoryCache } from "@apollo/client"; 

使Apollo缓存变量

export const dataWillUpdate = {
// some nice flat schema data object,
niceFlatSchemaData: {}
};
const dataWillUpdateVar = makeVar(dataWillUpdate);

const component = () => {
// make the reactive apollo variable
const dataWillUpdateVarReactive = useReactiveVar(dataWillUpdateVar);
// memo the niceFlatSchemaData data object
const niceFlatSchemaData = useMemo(() => userProfileVarReactive.niceFlatSchemaData, [
dataWillUpdateVarReactive.niceFlatSchemaData,
]);
// see 2 for lazy queries
const [ getData, { data, loading, error: loadRolesError} ] = useLazyQuery();  

useEffect(() => {
// will update here when change to niceFlatSchemaData
// so run query here
getData({variables:{input:{
// nice flat input object for the gql
}}})
}, [niceFlatSchemaData])
useEffect(() => {
// will update here when quer calls back
// state changes for render

}, [data])
}

需要在Apollo缓存中配置变量

const globalCache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
dataWillUpdate: {
read() {
return dataWillUpdateVar();
},
},
},
},
},
});

[1] useReactiveVar
[2] lazy query