Component rerenders on useQuery hook after useMutation hook call in other component

Help
,
1

There is, I guess, a pretty similar issue here, however, I would like to ask it anyway. So, I’ve created three components A, B and C. If I do mutation via graphQl sandbox, my A component is not being rendered which is expected, however, if I do the same mutation but via my component C, my component A is being re-rendered and I get the updated value I actually don’t expect to have. Am I missing something? Shouldn’t component A not be re-rendered after a mutation was fired in component C? Please check my recording to see how it behaves.

My index.tsx file:

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <QuerySample /> // component A
      <SubscriptionSample /> // component B
      <MutationSample /> // component C
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

QuerySample.tsx:

const QuerySample = () => {
  const { loading, error, data } = useQuery(GET_TRACK, {
    variables: { trackId: 'c_0' },
  })
  
  return (
    <>
      {loading ? (
        <div>Getting tracks...</div>
      ) : (
        <div>Number of view when queried: {data?.track.numberOfViews}</div>
      )}
    </>
  )
}

SubscriptionSample .tsx:

const SubscriptionSample = () => {
  const { loading, error, data } = useSubscription(SUBSCRIBE_FOR_INCREMENT)

  return (
    <>
      {loading ? (
        <div>Listening for changes...</div>
      ) : (
        <div>Number of views is: {data?.trackUpdated?.numberOfViews}</div>
      )}
    </>
  )
}

MutationSample.tsx:

const MutationSample = () => {
  const [incrementTrackViews] = useMutation(INCREMENT_TRACK_VIEWS, {
    variables: { incrementTrackViewsId: 'c_0' },
    onCompleted: (data) => {
      console.log(data)
    },
  })

  const incrementCount = async () => {
    await incrementTrackViews()
  }

  return (
    <div>
      <button onClick={incrementCount}>
        Increment Count
      </button>
    </div>
  )
}