How to update variables in a React-Hooks Apollo polling?

Question

I'm using @apollo/react-hooks to poll data from a GraphQL query each 5mn.

My query accepts a list of parameters including the current date time like this:

const MyComponent = ({ query }) => {
    const {loading, error, data} = useQuery(query, {
      variables: {
          variable1: valVariable1,
          variable2: valVariable2,
          variable3: valVariable3,
          currentLocalDateTime: getCurrentLocalDateTime(),
      },
      pollInterval: 300000
    });
    if (loading) {
      return <h1>Loading...</h1>;
    };
    if (error) {
      return <h1>Error! {JSON.stringify(error)}</h1>;
    }
    return <div> Data: {JSON.stringify(data)}</div>;
});

Let's say I call my first query at "2020-03-06 08h:00mn", using the pollInterval defined above, my 2nd query will be called at 08h:05mn" and the 3rd one will be called at 08h:10mn"

The expected behaviour

When I look on my query on Chrome's Network after 12mn, I'll see 3 queries with different time variable values:

Query 1 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"
Query 2 : variables.currentLocalDateTime === "2020-03-06 08h:05mn"
Query 3 :variables.currentLocalDateTime === "2020-03-06 08h:10mn"

The current behaviour

Query 1 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"
Query 2 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"
Query 3 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"

What I tried to do

I tried to wait the onCompleted event from useQuery and then update variables but it doesn't help because it will be called only the 1st time (and I guess when new data come in but I'm not sure).
I tried to use useLazyQuery instead of useQuery and then use a setInterval() to update my variables then call the query again like this:

const MyComponent = ({ query }) => {
    const [getMyData, { loading, data }] = useLazyQuery(query);
    if (loading) {
        return <h1>Loading...</h1>;
    };
    if (error) {
        return <h1>Error! {JSON.stringify(error)}</h1>;
    }
    // Remove the previous created interval then:
    setInterval(() => {
        const newVariables = {...variables};
        newVariables['currentLocalDateTime'] = getCurrentLocalDateTime();
        getMyData({variables: newVariables});
      }, 300000);

    return <div> Data: {JSON.stringify(data)}</div>;
}

But it seems like I'm reimplementing the default Apollo polling using a setInterval in a "dirty way". So I'm not sure if it's a solution.

Any feedback or experience to update a React Apollo polling variables ?

Chemah · Answer 1 · 2021-02-03T01:29:55.740

It seems the issue is still open https://github.com/apollographql/apollo-client/pull/4974

I found this thread where an user comments that we can use stopPolling and startPolling(POLL_INTERVAL) to update the query variables and it worked for me: https://github.com/apollographql/apollo-client/issues/3053#issuecomment-503490308

This post is very helpful too: http://www.petecorey.com/blog/2019/09/23/apollo-quirks-polling-after-refetching-with-new-variables/

Here is an example:

const POLL_INTERVAL = 10_000;

const { refetch, stopPolling, startPolling } = useQuery(
  MY_QUERY,
  {
    fetchPolicy: "network-only",
    pollInterval: POLL_INTERVAL,
    client
  }
);

const onFilterChange = variables => {
  stopPolling();
  refetch({ ...variables });
  startPolling(POLL_INTERVAL);
};

How to update variables in a React-Hooks Apollo polling?

1 Answers1