React-apollo: Component created with graphql() does not update query variables when props change

[tuananhtd]

Intended outcome:

When create react component using GraphQLComponent = graphql(query, options)(MyComponent) it is expected that we can pass query variable via GraphQLComponent's props and but I found a bug that when that props change the graphql query isn't got updated. You can take a look at the Query component in the picture below.

Actual outcome:
The graphql query isn't updated according to the props change.

How to reproduce the issue:
I created a repo to reproduce a code here.

Version

• apollo-client@<2.1.0>
• react-apollo@<1.3.4>

I believe this line cause the bug. It eventually sets operationOptions.options.variables and cause the subsequence render thing that we already pass the variables from the beginning. Because of this we have to pass a non empty option to the graphql function to reproduce the issue. In my case I used this:

const BookGraphQLComponent = graphql(QUERY, {options: {pollInterval: 10 * 1000}})(Book);

[doomsower]

I'm also facing this bug. This works:

graphql(query, { options: () => ({ fetchPolicy: 'network-only' }), alias: `${formName}FormQuery` }),

However, this returns stale data from previous variables:

graphql(query, { options: { fetchPolicy: 'network-only' }, alias: `${formName}FormQuery` }),

Something is wrong with mapPropsToOptions, on this screenshot it totally ignores sourceId from props and sets old sourceId value:

[hyperborea]

Facing the same issue, wrapping options in function as suggested by @doomsower works.

[ksmth]

@tuananhtd is right, the line referenced mutates the original options object. It adds the calculated variables to the passed in options object so that on a subsequent render, the check for !opts.variables fails, as it appears as if variables were passed in through said options object. I've prevented this from happening in the PR.