Getting cannot read property 'subscribeToMore' of undefined

[luco]

Intended outcome:

subscribeToMore returning the subscription in every refresh.

Actual outcome:

subscribeToMore works on the first load of component. The time it refreshes or it's saved, it returns subscribeToMore as undefined.

How to reproduce the issue:

const QUERY = gql`
	  query {
	    getEventsSection(id: "trending") {
	      _id,
	      events 
	    }
	  }
	`;

	const SUBSCRIPTION = gql`
		subscription {
		  getEventsSection(id: "trending") {
		    _id,
		    events 
		  }
		}
	`;

	const { loading, error, data, subscribeToMore } = useQuery(QUERY);

	useEffect(() => {
		subscribeToMore({
			document: SUBSCRIPTION,
			updateQuery: (prev, {subscriptionData}) => {
				console.log(subscriptionData);
			}
		});
	}, [subscribeToMore])

Versions

System:
OS: macOS Mojave 10.14.5
Binaries:
Node: 10.20.1 - /usr/local/opt/node@10/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/opt/node@10/bin/npm
Browsers:
Chrome: 83.0.4103.97
Edge: 83.0.478.45
Firefox: 75.0
Safari: 13.1.1
npmPackages:
@apollo/react-hooks: ^3.1.5 => 3.1.5
apollo-boost: ^0.4.9 => 0.4.9
apollo-cache-inmemory: ^1.6.6 => 1.6.6
apollo-client: ^2.6.10 => 2.6.10
apollo-link: ^1.2.14 => 1.2.14
apollo-link-context: ^1.0.20 => 1.0.20
apollo-link-error: ^1.1.13 => 1.1.13
apollo-link-http: ^1.5.17 => 1.5.17
apollo-link-ws: ^1.0.20 => 1.0.20
apollo-upload-client: ^13.0.0 => 13.0.0
apollo-utilities: ^1.3.4 => 1.3.4

[luco]

Probably related to apollographql/react-apollo#3931.

[sakulstra]

Facing this as well - might also be related to #6405 (and is still present in apollo v3.0.2)

[nbaua]

I am using this with Angular 10,
I tried with declaring

private query: QueryRef<any>; and assigned it as

this.query = this.apollo.watchQuery({
      query: GRAPHQL_GET_SOME_QUERY_DATA,
    });

This way the query reference becomes available to the subscriptions, However sometimes it results as

invariant.esm.js:29 Unhandled GraphQL subscription error Error: Cannot return null for non-nullable field Subscription.wishAdded

Do you guys found some solution?

[nbaua]

I was able to fix this:
#6437 (comment)
@nbaua

What was causing problem:
Code First Approach graphql required a type, specified that and the issue occurred when null data arrived.

What fixed the problem: (On server side - NestJs)

Subscription(returns => YOURTYPE, {
    name: 'SOMETYPENAME',
    defaultValue: null,
    nullable: true,
  })

[ajgassner]

Same issue here. I think it has something to do with react fresh which is now the standard refresh mechanism in CRA 4.0.0

[chattling]

I'm getting this error with React 17.0.1 after removing "import React from 'react'". If I put the import of React back into code, it works. Looks like subscribeToMore does not support new jsx transform.

[detorresvc]

"react": "^17.0.1",
"@apollo/client": "^3.2.9",

`const subscribeToNewMessage = () => {
return subscribeToMore({
document: MESSAGE_ADDED,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;

    const newFeedItem = subscriptionData.data.messageAdded;
    
    const isMe = +newFeedItem.user_id === +user_id
    if(isMe){
      setTimeout(() => {
        scrollToBottom()
      }, 100)
    }

    return {
      ...prev,
      roomMessages: {
        ...prev.roomMessages,
        messages: [
          ...prev.roomMessages.messages, 
          newFeedItem
        ]
      }
    }
  }
})

}`

`useEffect(() => {
subscribeToNewMessage()

}, [])`

Cannot read property 'subscribeToMore' of undefined

how to fix?

[chattling]

@detorresvc I assume as part of upgrading to React 17 you removed "import React from 'react'". I found that subscribeToMore does not always support it. Try putting "import React from 'react'" back as a workaround for now.

[3axap4eHko]

Still facing the issue

Object.QueryData._this.obsSubscribeToMore [as subscribeToMore]
node_modules/@apollo/client/react/data/QueryData.js (83:55)

[mhaagens]

Having the same issue, I'm already using the import React from "react" statement which doesn't seem to help.

[elisalimli]

Can anybody fix it ?

[DPangerl]

I had the same problem.
Instead of using useEffect i've wrapped it in an useLayoutEffect… this seems to work in my case.

[wilsonmfg]

switching to useLayoutEffect was my solution also

[ajgassner]

should be fixed with apollo client 3.4.0 now: #7952 and #7399

[nbaua]

wow, that looks nice.