reactjs - React Apollo (GraphQL)：如何阻止查询组件在每次状态更改时重新获取

Question

我有一个 React 组件，其中有一个 react-apollo Query 组件，它使用 graphql 基于一些过滤器（钩子）获取数据，这些过滤器（钩子）在包含查询组件的同一组件内进行管理。所需的功能是仅在与查询组件关联的状态之一发生更改（即应用过滤器）时重新获取数据，但目前，在我提到的包装器反应组件内的任何状态更改时，查询组件都重新获取数据并进入加载状态以执行此操作。例如。假设查询组件依赖于钩子 A、B、C。现在有第四个钩子 D 会更改页码，在该钩子更改时，查询组件不应重新获取数据。

const MyComponent = () => {
    const [a, setA] = useState([]);
    const [b, setB] = useState([]);
    const [c, setC] = useState([]);
    const [d, setD] = useState([]);
    const [pageNo, setPageNo] = useState(0);

    return (
     <div className="wrapper">
       <button onClick={()=> setPageNo(pageNo === 1 ? 2 : 1)}>
       {pageNo === 1 ? 'Next' : 'Previous'}
       </button>
       <div className="left">
          {
          pageNo === 1 ? (
           //Some dropdown -> setA([...whatever] //Some logic)
           //Some dropdown -> setB([...whatever] //Some logic)
           ) : pageNo === 2 ? (
           //Some dropdown -> setC([...whatever] //Some logic)
           //Some dropdown -> setD([...whatever] //Some logic)       
           )
          }
       </div>

       <div className="right">
         <Query
           query={SOME_QUERY}
           variables={{
             filters: {
               typeA: A,
               typeB: B,
               typeC: C,
               typeD: D,
           }
         />
         {
          ({loading, error, data}) => {
              if(error) return <div>Error...</div>
              if(loading) return <div>Loading...</div>
              
              return (
                  //Perform some computation on data & display in a table
              )
          }
         }
         </Query>
       </div>

     </div>
    )
}

以上是实际代码的结构。我面临的问题是，虽然更改 A、B、C 或 D 应该使查询组件相应地重新获取数据，但不应该更改页面。但是在更改页面时，查询组件会进入加载状态。

标签： reactjsreact-hooksapolloreact-apolloreact-apollo-hooks