React-apollo: Updating and removing variables for refetch()

[afriapps]

Intended outcome:

I have 4 variables for a query. The ID var is always present, then there are three others. One of these is a boolean variable. When the boolean is False, I want to remove the variable from the variables.

This is the initial query:

export default graphql(CAMERA, {
  options: props => ({
    variables: {
      id: props.match.params.id,
      timestamp_Gte: APPCONFIG.filters.month
    },
    fetchPolicy: "network-only",
  })
})(Page);

This is how I toggle the boolean variable. It works when the boolean is True, but when false, I should be removed, but the query vairables is still the same than the previous query request:

onToggleShowDetected = (e, val) => {
    variables.detection_Detect = val;
    if (!val) {
      delete variables.detection_Detect;
    } 
    refetch();
  };

Even when giving it only the id variable, all the old variables is in the new request:

refetch({id:camera.id});

Actual outcome:

The variables were not updated. For the second request, when the variable is deleted, its still in the request and it's the same than what it was.

How to reproduce the issue:

Remove a variable from a query after it has been set.

Version

• "apollo-boost": "^0.1.9",
• "apollo-cache-inmemory": "^1.2.6",
• "apollo-client": "^2.4.0",
• "apollo-link-context": "^1.0.8",
• "apollo-link-http": "^1.5.4",
• "react-apollo": "^2.1.5",

[mduta]

Having the same issue on apollo-client ^2.2.7

[RIP21]

Having the same issue. Everything is latest on the day of posing.
In my use case I have as input variables two ENUMs so in <select/> I have an option to have some of the enum value for filtering the table, so upon a change of the filter that I call refetch with filter variable. So let's say it was
{offset: 0, size: 100}
And it will become
{offset: 0, size: 100, type: "COMPLETED"}
If I unselect type to become just an empty string it tries to do a request with
{offset: 0, size: 100, type: ""} and fails since it expects one of the values of the enum and not an empty string.
So I decided to filter out all falsy values, so it returns back to original {offset: 0, size: 100} only.
But once filter change happens and refetch is gets called with {offset: 0, size: 100} I actually see that in resolver for that query I'm getting {offset: 0, size: 100, type: "COMPLETED"} so stale fields are still there.

Please help it's definitely a bug that degrades the quality of the schema since I replaced it now with just String

@mduta @afriapps the only workaround that I found now is to use undefined if to want to "delete" field, so it's kinda "changes"
Which is still bad and definitely not how it suppose to work and requires some comments to explain to people why this is there. So here is my state updater function.

    ({ id, value }) => {
      setFilter(it => ({
        ...it,
        [id]: value === '' ? undefined : value,
      }))
    },

[edwinvandeven]

@RIP21 Thanks for sharing your workaround, you saved me!
Setting variables to undefined has the desired effect.

[dacevedo12]

@edwinvandeven Thanks a lot, you saved me!!

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!

[badrange]

I stumbled across the same issue in our create-react-app / TypeScript based project. This workaround works:

filterValues.date = filterValues.date ? filterValues.date : undefined;
filterValues.time = filterValues.time ? filterValues.time : undefined;
refetch({ ...filterValues, ...variables });

Here are some versions from yarn list:

├─ @apollo/[email protected]
├─ @apollo/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

[badrange]

Would you prefer me to create a new issue or is it fine to reopen this?