Skip to content
This repository was archived by the owner on Apr 13, 2023. It is now read-only.
This repository was archived by the owner on Apr 13, 2023. It is now read-only.

v2.5.0+ re-render prevented on loading change in Query component #2887

@YoonjiJang

Description

@YoonjiJang

Intended outcome:
I have a list of items that displays data from Query component and a modal form that opens up and calls refetch from the aforementioned Query component when the form is submitted. After network request from refetch has been completed, the component should re-render itself to pass the updated loading/networkStatus values to the render prop, even if the data returned from the server is the same as the data in local cache.

Actual outcome:
After network request from calling refetch has been completed, the queryObservable's next handler gets called, but second if block (https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L335-L342)
prevents the component from re-rendering.

How to reproduce the issue:

https://stackblitz.com/edit/react-bv7rtg?file=index.js
Please follow the link to see how to reproduce a simplified version of my current situation. It seems that when I toggle open state in App component (equivalent to opening a modal form), the lastResult variable in Query component (defined here https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L126) is set to the last query result which looks something like

{
  loading: false,
  networkStatus: 7,
  data: { ... }
}

and when the refetch request is done, the query result that gets passed to the queryObservable's next handler (https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L327-L346) is

{
  loading: false,
  networkStatus: 7,
  data: { ...(same as before) }
}

This satisfies the second if block (https://github.com/apollographql/react-apollo/blob/master/src/Query.tsx#L335-L342) so updateCurrentData doesn't get called and the Query component is not re-rendered.

Version

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions