2

I have a display component wrapped in a Query component to recieve data from a GraphQL query. After I perform a mutation, I have to refetch the data to update the store. The problem is that calling refetch() results in the child component being unmounted, thus disrupting the interaction and scrolling that the user has been doing to cause the mutation.

Is there a way to call refetch() without it causing the childen to unmount? If not, is there better way to the update the store that won't cause an unmount? Below is the code with the Query component and its child.

<Query
  query={query}
  variables={{videoId}}
>
  {
    ({loading, error, data, refetch }) => {
      if (loading) 
        return <p>Loading...</p>;
      if (error) {
        console.log(error);
        return <p>Error :(</p>;
      }

      const onChange = () => {
        console.log("refetching");
        return refetch();
      }

      const {timestampCollection} = data;
      return(
          <TimestampCollection onChange={onChange} player={this.state.player} timestampCollection={timestampCollection[0]} />
      )
    }
  }
</Query>

Thank you all for the help!

CodeCombustion001
  • 151
  • 1
  • 6
  • You can pass a `key` prop to your `TimestampCollection`, so that React knows how to deal with it. You can read more here: https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js/43892905#43892905. – Colin Ricardo Dec 09 '18 at 17:48

1 Answers1

0

Try to use fetchPolicy="network-only" like below.

<Query
  query={query}
  variables={{videoId}}
  fetchPolicy="network-only"
>
Alien
  • 15,141
  • 6
  • 37
  • 57
Takashi Sato
  • 1
  • 2
  • And another possibility would be, when refetch is fired, it might set `loading=true` and will destroy the < TimestampCollection> component. – Takashi Sato Mar 14 '19 at 21:01
  • You can identify refetch by `({loading, error, data, refetch, networkStatus }) => { ...` and check `networkStatus=4` . Please refer https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-networkStatus – Takashi Sato Mar 15 '19 at 00:05