I have a React component inside which I have a react-apollo Query component which fetches data using graphql based on some filters (hooks) that are managed inside the same component which houses the query component. The required functionality would be to re-fetch the data only when one of the states associated with the query component changes (i.e. filters applied) but currently, on any state change inside the wrapper react component that I mentioned, the query component is re-fetching the data and going into loading state in order to do so. For eg. say the query component is dependent on hooks A, B, C. Now there's a fourth hook D which changes the page number, on the change of that hook the query component should not be re-fetching data.
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>
)
}
Above is the structure of the actual code. The problem I am facing is that while changing A, B, C, or D should make the query component re-fetch the data accordingly, changing the page should not. But on changing the page the query component goes in the loading state.
