Unhandled Rejection (Error) with latest dependencies

[jim108dev]

Hi! I tried to recreate the client with the latest dependencies, meaning

package.json

{
  "name": "whatsapp-clone-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@graphql-codegen/add": "2.0.2",
    "@graphql-codegen/typescript": "1.21.1",
    "@graphql-codegen/typescript-operations": "1.17.15",
    "@graphql-codegen/typescript-react-apollo": "2.2.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.1.10",
    "@types/history": "^4.7.8",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "add": "^2.0.6",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "history": "^5.0.0",
    "jest-fetch-mock": "^3.0.3",
    "moment": "^2.29.1",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-router-transition": "^2.1.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
    "yarn": "^1.22.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier \"**/*.{ts,tsx,css,graphql}\" --write",
    "codegen": "graphql-codegen"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-router-transition)/)"
    ],
    "resetMocks": false
  },
  "devDependencies": {
    "@graphql-codegen/cli": "1.21.2",
    "apollo-link-mock": "^1.0.1",
    "ts-jest": "^26.5.3"
  }
}

If I post a message and return to the chats list I get

Unhandled Rejection (Error): can't define array index property past the end of an array with non-writable length
ApolloError

browser error

Unhandled Rejection (Error): can't define array index property past the end of an array with non-writable length
ApolloError
src/errors/index.ts:49

  46 | // Constructs an instance of ApolloError given a GraphQLError
  47 | // or a network error. Note that one of these has to be a valid
  48 | // value or the constructed error will be meaningless.
> 49 | constructor({
     | ^  50 |   graphQLErrors,
  51 |   networkError,
  52 |   errorMessage,

next
src/core/QueryManager.ts:217

  214 |     update: updateWithProxyFn,
  215 |   });
  216 | } catch (e) {
> 217 |   error = new ApolloError({
      | ^  218 |     networkError: e,
  219 |   });
  220 |   return;

iterateObserversSafely/<
src/utilities/observables/iteration.ts:13

  10 |   // to just the observers with the given method.
  11 |   const observersWithMethod: Observer<E>[] = [];
  12 |   observers.forEach(obs => obs[method] && observersWithMethod.push(obs));
> 13 |   observersWithMethod.forEach(obs => (obs as any)[method](argument));
  14 | }
  15 | 

iterateObserversSafely
src/utilities/observables/iteration.ts:13

  10 |   // to just the observers with the given method.
  11 |   const observersWithMethod: Observer<E>[] = [];
  12 |   observers.forEach(obs => obs[method] && observersWithMethod.push(obs));
> 13 |   observersWithMethod.forEach(obs => (obs as any)[method](argument));
  14 | }
  15 | 

next
src/utilities/observables/Concast.ts:171

  168 | next: (result: T) => {
  169 |   if (this.sub !== null) {
  170 |     this.latest = ["next", result];
> 171 |     iterateObserversSafely(this.observers, "next", result);
      | ^  172 |   }
  173 | },
  174 | 

createHttpLink/</</<
src/httpLink.ts:142

  139 | .then(parseAndCheckHttpResponse(operation))
  140 | .then(result => {
  141 |   // we have data and can send it to back up the link chain
> 142 |   observer.next(result);
      | ^  143 |   observer.complete();
  144 |   return result;
  145 | })

I have checked the server via Playground, it works.

By using the debugger I was able to locate the line in ChatRoomScreen/index.tsx:

fullChat.messages.push(data.addMessage); 
fullChat.lastMessage = data.addMessage; // <- is not reached.

I don't know how to go about this. Maybe somebody experienced the same issue and wants to share his or her solution.