当阿波罗useMemo useQuery钩子中的“数据”返回useMemo所依赖的“数据”的新值时，useMemo不运行

Question

我有一个组件，它使用useQuery阿波罗钩子从GraphQL API中获取数据。这个组件还有一个useMemo，它将从useQuery阿波罗钩子返回的数据变量作为依赖项返回。useMemo最初以应有的方式在组件的第一次呈现上运行。然后，当来自useQuery的数据返回时，它再次运行。接下来，我对useQuery中的数据变量进行了一些更改。

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

根据我的调查，可能的原因：

1. useMemo只会在第二个选项卡中运行第二次，如果" data“变量位于函数的状态上，并且当来自useQuery的新数据返回并且useQuery重新呈现组件时不会运行，因为它对更改没有可见性。

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

functional component: {
  const { data, loading, error: loadRolesError } = useQuery();

  const result = useMemo(()=>{
    // changing data inside here
  }, [data])
}

Answer 1

我会使用阿波罗的useReactiveVar钩子这个用例。从医生那里

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"; 

使阿波罗缓存变量

   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])

}

需要在阿波罗缓存中配置变量

const globalCache = new InMemoryCache({

    typePolicies: {
        Query: {
            fields: {
                dataWillUpdate: {
                    read() {
                        return dataWillUpdateVar();
                    },
                },
            },
        },
    },
});

1

2