Apollo client skip query based on state

Question

Using Apollo Client I see how I can skip a query based on props like shown here https://ladwhocodes.com/graphql/skip-a-graphql-query-based-on-conditions/31/

But what if I want to skip calling my query based on a change in state.

I have a query set to poll every 5 seconds but I want to pause this polling while a dialogue is open (to avoid re-rendering the dialogue's parent component, causing the dialogue to re-render and then have to focus the cursor where it was before).

I tried this but it doesn't work. Is my desired behaviour possible?

P.S: Also tried to move dialogue open/close state to the parent component but that doesn't work either.

const [scoreRunDialougeOpen, setScoreRunDialougeOpen] = useState(false)  

const { loading, data, error } = useQuery(GET_SELECTED_HEAT, {
    variables: {
        id: eventId
    },
    pollInterval: scoreRunDialougeOpen ? undefined : 5000,
    skip: scoreRunDialougeOpen,
});

Answer 1

Hey guys I actually managed to get it working without stopping the polling in the end. I was in the process of simplifying my demo for a sandbox project and I got it working exactly how I want here

https://codesandbox.io/s/heuristic-pine-2cxi7?file=/src/EventList.js

In the end all I really want is the dialog to not be re-rendered while it is open (I thought stopping the polling was the easy way to achieve this but seems not)

So you can see all I did is moved the dialog to be in the same component as the UseQuery and it works fine (as in the dialog is not re-rendered)

In my original solution the child component which contained the Dialog received the query data as a prop so obviously was re-rendered when the data changed.