Reproduce issue apollographql/apollo-client#5531

src/App.js

@@ -1,78 +1,44 @@
-import React, { useState } from "react";
-import { gql, useQuery, useMutation } from "@apollo/client";
+import React from "react";
+import { gql, useQuery } from "@apollo/client";
 
 const ALL_PEOPLE = gql`
   query AllPeople {
     people {
       id
       name
-    }
-  }
-`;
-
-const ADD_PERSON = gql`
-  mutation AddPerson($name: String) {
-    addPerson(name: $name) {
-      id
-      name
+      happinessLevel
     }
   }
 `;
 
 export default function App() {
-  const [name, setName] = useState('');
   const {
     loading,
     data,
-  } = useQuery(ALL_PEOPLE);
-
-  const [addPerson] = useMutation(ADD_PERSON, {
-    update: (cache, { data: { addPerson: addPersonData } }) => {
-      const peopleResult = cache.readQuery({ query: ALL_PEOPLE });
-
-      cache.writeQuery({
-        query: ALL_PEOPLE,
-        data: {
-          ...peopleResult,
-          people: [
-            ...peopleResult.people,
-            addPersonData,
-          ],
-        },
-      });
-    },
+  } = useQuery(ALL_PEOPLE, {
+    pollInterval: 1000,
+    // when notifyOnNetworkStatusChange is false, onCompleted only gets called once.
+    // changing notifyOnNetworkStatusChange to true causes onCompleted to be called after each successful poll
+    notifyOnNetworkStatusChange: false,
+    onCompleted: data => {
+      console.log('onCompleted was called with this data:', data);
+    }
   });
 
+
   return (
     <main>
       <h1>Apollo Client Issue Reproduction</h1>
       <p>
         This application can be used to demonstrate an error in Apollo Client.
       </p>
-      <div className="add-person">
-        <label htmlFor="name">Name</label>
-        <input 
-          type="text" 
-          name="name" 
-          value={name}
-          onChange={evt => setName(evt.target.value)}
-        />
-        <button
-          onClick={() => {
-            addPerson({ variables: { name } });
-            setName('');
-          }}
-        >
-          Add person
-        </button>
-      </div>
       <h2>Names</h2>
       {loading ? (
         <p>Loading…</p>
       ) : (
         <ul>
           {data?.people.map(person => (
-            <li key={person.id}>{person.name}</li>
+            <li key={person.id}>{person.name}'s happiness level: {person.happinessLevel}%</li>
           ))}
         </ul>
       )}

src/graphql/schema.js

@@ -4,13 +4,15 @@ import {
   GraphQLID,
   GraphQLString,
   GraphQLList,
+  GraphQLInt
 } from 'graphql';
 
 const PersonType = new GraphQLObjectType({
   name: 'Person',
   fields: {
     id: { type: GraphQLID },
     name: { type: GraphQLString },
+    happinessLevel: { type: GraphQLInt },
   },
 });
 
@@ -25,7 +27,7 @@ const QueryType = new GraphQLObjectType({
   fields: {
     people: {
       type: new GraphQLList(PersonType),
-      resolve: () => peopleData,
+      resolve: () => peopleData.map(person => ({ ...person, happinessLevel: Math.floor(Math.random() * 101) })),
     },
   },
 });